Starting with a mobile first method of design, we made sure to focus on important headings and features first for ease of navigation. For mobile users, who are on the go, the homepage needed to prioritize primary navigation content to the top right such as a hamburger menu and a shopping cart. We also prioritized a search bar so that mobile users could easily search the site’s inventory for a specific book or author. The navigation options that follow further down the page are then prioritized based on mobile needs first.
Since desktops are fixed in position and tablets are less mobile than phones, we then prioritized more advertisement type features such as the New Arrivals and Upcoming Events sections. Here we also expanded the primary nav bar and relocated the shopping cart for a more browsing style of shopping.
Navigation of content is done initially by selecting an option from the primary nav, and then by means of a left rail nav which filters first by publisher and then by series. Product pages are then navigated by buttons located below the content. Social media buttons are less important to desktop and tablet users, so they have been relocated underneath the footer nav.
This was all coded in HTML and CSS with Bootstrap for responsive design purposes.
Check out live responsive demos of the homepage and forms pages here (works on mobile):