Responsive web design is losing a bit of its controversial aura and beginning to sink in as the go-to way to make your website viewable across all platforms. When responsive sites first came about in 2011, many ‘old school’ web developers where weary to jump on board, sure it was just another passing fad that web design studies would implement on their own sites but not much more than that. Recently there have been many ‘big sites’ like The Boston Globe and Smashing Magazine that have adopted responsive designs and it has changed the train of thought from passing fad to the way of the future.

Now that it is a widely accepted solution, there are widely known problems that you run into when designing sites to be viewed in seemingly infinite range of widths and heights. First off we’re going to tackle the issues presented by navigating your site at different sizes.

Navigation

One of the first things I always think about when designing a website is the site map and how the navigation is going to work. Single level? Dropdowns? Maybe a nifty little sidebar nav? There are a billion different aspects of a site that determine what type of nav is going to work best in each situation, but that’s conversation for another day. For this one we’re going to assume you at least know what type of navigation your going to use.

So your nav bar is set up and it works wonderfully – until your screen gets just a little too small and then things start dropping down to the next line and it looks awful. Now you have a couple of options. We’ll take a look at CSS-Tricks and how they handle their navigation at different screen sizes.

CSS-Tricks navigation at full-width

You can see that it’s a very clean, single level navigation with icons and descriptive text. At this full-width size it’s very easy to get all of those elements in there and looking good. But what happens when the screen gets to netbook/small desktop window/horizontal tablet size…?

CSS-Tricks navigation at mid-size (small desktop window, tablet in landscape, net-book)

Simple enough – they drop down to the next level and stack! They had to get rid of the smaller descriptive text at this size, but the icons and text stay relatively the same. But even this stacked version won’t fit on skinnier windows or a tablet in portrait orientation, so what happens then…?

CSS-Tricks navigation at tablet in portrait size

Again, another so simple it would just about hit you in the face solution – drop the icon to get rid of some width and throw back in the descriptive text underneath. Still works perfectly and still offers a further description of what you’re clicking on. But even this simple setup won’t fit on your smart phone, right?

CSS-Tricks navigation at phone size

Maybe it is that simple – the exact same link layout as the previous screenshot just stacked  two’s instead of four’s. So at a few main break points in the design – desktop, net-book/tablet landscape, tablet portrait, and mobile – the design of the links in the navigation has to change but they generally keep the same design aspects and spacing at every size to maintain some consistency.

Another Site, Another Method

Now we’re going to take a look at how another one of my favorite sites on the web handles its navigation at different screen sizes. Smashing Magazine was recently redesigned to incorporate ever screen size from monster monitor to tiny phone, but we’re just going to look at a few of the key break points.

Smashing Magazine's navigation at full-width

Since Smashing Magazine is such a large collection of articles with many, many subjects covered, they have main navigation as well as a sub-navigation available at this full-width size. Since they have so much width to work with they went with a two-columned navigation that sits the left of the main content. This works great for large monitors, but for a regular laptops having four columns is going to be very cluttered, so…

Smashing Magazine's navigation at standard laptop size

Yet again, it’s another super simple solution – moved the left-most main navigation column to the top as a standard horizontal menu. It easily frees up more width in the design for the content and is still very functional as the main navigation. But that column still takes up a lot of room on let’s say a tablet in landscape

Smashing Magazine's navigation at mid-size (small desktop window, tablet in landscape, net-book)

I feel like there’s a pattern here – another easy fix by taking the left-column sub-navigation and placing it as another horizontal nav bar under the main navigation. It still conveys itself as a sub-nav very clearly but it now gives the smaller screen-size more width for viewing the content. It is still a full-width navigation so on a phone you would have to…

Smashing Magazine's navigation at phone size

Put all the links in a drop-down selection menu? Why not – it works, it takes up the least amount of space possible, and it naturally uses a phone’s inherent selection method when it’s clicked. It retains the native operations of the phone, and looks clean and simple across all platforms. This being said, it does limit the navigation a bit – in fact, I’ve actually tried to look up an article that I had previously read on my computer on my phone and wasn’t able to locate it because it was under a nav option that’s no longer available at the mobile menu size.

In Conclusion…

There is no ‘correct’ way to responsively design your site’s navigation. There’s a ton of ways out there to go about it and you just have to pick the method that makes the most sense for your particular site. The navigation on a big site like Smashing Magazine will have to be done differently than the navigation for your business simple 5 page brochure style site. The best thing to do is have a good, long sit down with your site map and a laptop, click-through some examples and think up something perfect for your navigation whether its one of the solutions above or something completely new and creative.

+Jack Nycz