FILTER

2020
- January
2019
- January
2016
- March
2015
- December
- September
- July

Tags

advertising, analytics, api, banner vendor sourcing, bitmap, bitmap graphics, brand, brand disloyalty, branding, business card design, buyer mentality, caching, call to action, cms, coding, content management software, conversion rate, crossword puzzle, custom mailer packaging, daily deals sites, demographics, document formatting, ecommerce, email marketing, empowered customers, engagement rate, eps files, event planning, facebook, flash, google, graphic design, graphic files, infographic, life of a graphic designer, linkedin, logo, long-tail keywords, map creation, market niche, marketing, marketing campaigns, marketing crossword, natural search, online, organic reach, package design, packaging labels, page size, paid advertising, paid search, pay per click, pinterest, plugins and widgets, potential client discussions, product value, puzzle day, reasons to rebrand, search engine navigation, search engine optimization, search marketing, seo, site navigation tips, social media, t-shirt design, top 6 reasons to refresh your brand, twitter, unoptimized images, ups, vector graphics, vector logos, vehicle magnet modification, video training, voice, website, website development, worldship

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