We coded Dyn.com’s HTML and CSS to respond well to different screen sizes because it was important to us that the site remain intuitive and easy to use on any device and in any orientation. We made sure it loads fast and that users can quickly find what they’re looking for, using media queries to shift and redesign our WordPress templates to make sure they flowed nicely at different sizes.
One of the most important parts of a responsive design is navigation and it can be really tricky to figure out what navigation should be removed, where it should live and how it should look among the rest of the content. We did a lot more in our media queries than just restyle and reorganize the navigation on our pages, but I want to dig in to our process for deciding how the navigation would change at different screen sizes.
From the planning to the execution, here’s how we attacked the navigation on Dyn.com from all experiences.
What should we keep in the navigation?
We have a number of navigation areas in our page templates: main navigation in the header, auxiliary navigation in the footer and sometimes, we have sidebar navigation.
Our header navigation contains big list items for our main product lines: DNS, Email, and Labs. It also contains some very important utility navigation like the ‘Sign In’ button and a link to our Support section. We determined that all of this info is important, no matter what device you’re using.
We decided that our side navigation and footer navigation are both secondary to our content in the information hierarchy, but all of the information featured in those areas would be useful to users no matter what device they’re on. We did a lot of work developing our content to make sure that we only included what is useful to visitors, so we’re lucky to not have clutter that would need to be removed on a mobile device.
What should I remove?
If you have navigation that you’re considering dropping at smaller screen sizes, ask yourself: do larger screens need it too? Of all visits to your site, how many people click on that nav item versus its siblings? If you’re able to segment your analytics to see mobile data, analyze their usage of your navigation. To do this in Google Analytics, choose “Mobile Traffic” in the “Default Segments” list in just about any report.
We ended up removing the search bar if the screen size was smaller than 360px, which was a tough decision to make. 1.4% of visits use the search bar and only 0.57% of mobile traffic visits include a search, so we decided that it’d be okay to remove it if the user’s screen size is this small. But in general, the navigation that you keep should be important to all screen sizes and anything else should be dropped.
Where should the navigation live?
I suggest that at small screen sizes (480px and below), you allow the main content to stretch across the screen at 100% width with padding around the sides to keep it readable. This means positioning your navigation above or below it. Our side and footer navigation is secondary to our content, so we decided that the footer navigation should stay at the bottom and we moved the side navigation to appear right after the main content ends.
We wanted to keep both easy to scroll through and click on. Users will see the header and main content right at the top of their screens and can scroll to the bottom of the content to view the auxiliary navigation if they want to dig deeper. We kept the main navigation at the top since it’s most frequently used and also indicates where the user is in the site through “current”-indicator styles and breadcrumbs.
This part does take some planning in your HTML. You may have trouble moving your navigation around if you have some divitis in your code or if the original order of your content and navigation prevent you from moving them around in the document flow. For example, the main content markup on Dyn.com is above the sidebar markup in our HTML which made it easy to put one above the other on smaller screen sizes. On a large screen, the main content floats to the right and the sidebar floats to the left. On a small screen, we eliminate floats and the document flows naturally.
How should the navigation look?
When the device or browser size is 600px wide or below, we start using different CSS in our media queries. In the CSS that applies to the header, we:
- move and resize the logo
- shrink the total header height
- give the utility nav, search bar and “Connect” navigation the same width
- absolutely-position the utility navigation to the top right of the screen, and the search bar and connect navigation to specified pixels below it
- change the padding, width and borders on the product navigation so they sit in one nice line with lots of space to click on
If the screen is smaller than 360px, we also:
- hide the search bar
- update the positioning of the utility and “connect” navigation to replace the space where the search used to be
- shrink the header height again
The sidebar navigation styles remain more or less the same, but this navigation is now centered on the screen below the content. The footer changes to 100% width and instead of styling the links in a vertical list, we float them next to each other. We keep headers above each list of links to continue to make the hierarchy of the links clear.
The most important thing is that clickable areas remain as large as possible. Make sure you include enough padding on your links to make them easily selected and space things out in a reasonable way.
Remember that your media queries don’t have to rely on standard screen sizes (480px, 360px, etc.). Restyle your content based on the grid you’re using and when the content starts to become unreadable or the navigation unmanageable.
Now that you know what went into the Dyn.com navigation, we invite you to check out the experience on your computing device of choice. If you’d had issues with this on your website, be sure to ask any questions and relay your own experiences in the comments below! For more web development tips and tricks from our staff, check out our blog archive.