How To Structure Navigation For Responsive Design

Posted on March 27, 2015

Responsive website design very simply is giving site visitors an optimal viewing experience no matter what device they are using. Based on the screen size, the website "responds" and renders the site to be best viewed at that screen size. Other options do exist, including dynamic serving where differing versions of a site's HTML are used for different devices or using separate URLs where the site detects the device being used and sends a user to a URL for that device, but Google bluntly states "Responsive design is Google's recommended design pattern."

Given this high need for responsive design, we wanted to talk you through some of the best practices we go through when developing a website responsively.

Keep Your Menu Simple

The benefit an oversized desktop monitor has over a phone screen is pretty clear: space. On a desktop, you have the room for large, open navigation. On smaller devices, you don't have that amenity and have to make the most of the limited space available to you. Create categories to allow users to easily navigate to the pages they need to.

Make Your Calls To Action Obvious

Given the small screen sizes of most mobile devices, the last thing you want is for a visitor to miss the entire point of why you want them on the site. If it is a newsletter signup or a special pricing promotion you are running, make sure your calls to action are easy to find. Include them in the body with secondary or less important actions placed in your menus or lower on the page.

Design For Landscape and Portrait Use

Responsive design isn't just about creating an optimal viewing experience for different device sizes, but also different device orientations. Take both landscape and portrait dimensions into consideration when designing to make sure that navigation and calls to action both appear and are functional no matter what way a device is used.

Help Users Get Back To The Homepage

If you are seeing anything common about these best practices to responsive design, it all revolves around "easy." Make it easy for users to navigate the site and do what you want them to do. In that same vein, the homepage is a good place for any user to fall back on if they need to restart a search or simply get lost within the site. Make it simple for users to get back to your homepage via buttons and/or working it into your navigation.

Designing your website to be responsive not only impacts site visitors, but is also becoming more important in the search engine world as well. Follow these little tips and Google, Bing, and Yahoo will be just as happy as your visitors will be.

« Return to all Blogs