The mobile responsive website layout has become a very common apparatus for designers. Building a layout is never easy and each website generally requires a unique solution. Responsive design incorporates both desktop and mobile devices to provide a uniform browsing experience. I have seen a lot of fantastic examples showcasing responsive web design trends.
In this article, I want to focus particularly on navigation menus. To build a responsive navigation you need a technique for handling the resize down to lower resolutions, or consequentially handling the expansion for wider desktop monitors.
The process of creating a website should always start with general ideas. These turn into wireframes or low-fidelity mockups to give the designer a sense of direction. It’s fairly straightforward, but the creative process requires a large visual library of existing layouts to understand which interfaces are usable and well-designed. Navigation is a huge part of web design and deserves a lot more coverage.
Responsive Navigation has slightly changed this creative process over recent years. Now designers are much more focused on grids and fluidity. Accessible responsive layouts should be flexible and naturally update to any screen size. Nav menus can be tricky because shortening a collection of links will often require completely revamping the UI.
In this post, I’d like to cover some general tips and guidelines to help designers work with their own ideas for responsive navigation. The brainstorming stage is pivotal to every other stage which comes afterward. Once you have a workable concept, it becomes easier to envision the full design and composition of a responsive website.
Design by Example
Firstly it’s important to understand how other websites are using responsive navigation. I’d suggest looking through some of your favorite sites and pinpointing the best responsive traits. Which layouts seemed more natural than others? Can you apply similar ideas to your own navigation?
The online gallery Media Queries is full of terrific responsive website layouts. There are just a few primary methods for handling responsive navigation, so how you go about it will depend on your website – specifically how many pages are needed and if the menu requires sub-categories for internal links.
It helps to understand what others are doing so you can build on top of that. Web design isn’t easy, but it shouldn’t be an excruciatingly difficult task either. Learn from the success of others, and use those ideas in conjunction with your own to create brilliant navigation.
Sketching & Taking Notes
One of the first steps I always recommend is to take down some ideas on a piece of paper. The web is a digital medium, but a computer isn’t always the best tool for brainstorming ideas. Typing letters on a keyboard doesn’t produce the same cognitive function as writing each individual letter by hand. The same goes for drawing or sketching ideas as opposed to creating them in a wireframe program.
This step will feel clunky and unnecessary at first, especially if you’re not accustomed to writing or drawing in daily life. But I find that it helps to disconnect from the computer for a while because ideas can flow quicker and more naturally.
A fun exercise is to write down a few central themes on a piece of paper. Make a flow chart of words drawing arrows to connect different ideas together. The goal is to map your ideas down quickly and see what feels right. This tends to help more with writing, but it’s also helpful when just starting a new creative project.
Otherwise, it can help to just take sketches of existing navigation menus from well-designed responsive websites. Draw both the full version and responsive version next to each other. Wireframe the concept to demonstrate how each link will be displayed on the page. Depending whether you’re a visual or contextual thinker, I’d suggest one of these two brainstorming methods to get started.
Create a User Experience
Always think about the people who will be using a website before you design an interface. Navigation menus are one of the most interactive sections of a web page. And without a navigation, I wouldn’t have any reason to write this article! But we aren’t creating good navigation for my sake or your sake – it’s for the users.
During the wireframing stage, keep in mind that the average user is your primary target. Think about the best solution from a user experience perspective – not the best-designed solution or the most creative solution. Keep your mind open to possibilities for improving performance.
It definitely helps to check out what other designers have created, because you’ll see from a user’s perspective, what makes a navigation feel like a sturdy bridge vs. rickety old boards unsafe for travel.
For example, the drop-down navigation is a big part of larger websites such as e-commerce shops and big businesses. How should you handle sub-menus or sub-sub-menus which still need visibility on mobile devices? There is no single correct answer, but the best answers would focus solely on the user experience.
If my project needed drop-down navigation, I’d suggest a hidden sliding drawer menu or expandable links in a responsive layout. The navigation on Comedy Central’s website is a perfect working example of these two methods. Removing extra links is another alternative if every page is still somehow accessible.
Building & Testing
If you can design a beautiful navigation in Photoshop, that’s all well-and-good for the initial stages. But to actually build the design into a live website requires logic and persistence. If you’re even somewhat familiar with web development, don’t take this step lightly.
One great exercise is to construct rapid prototypes for navigation menus from scratch. This requires a cursory understanding of HTML/CSS and possibly jQuery if needed. You should end up with a low-fidelity working concept, and then immediately construct the navigation into an HTML page. Make it fully responsive and test the interface in all browsers.
This way, you can see how the navigation should behave in its final iteration. You’ll always have the option to spice up a color scheme with gradients and textures at a later date. Instead of jumping right into extra features, solely focus on the user experience first – animation style, link density, legibility, and of course responsive tendencies.
To get started without a code IDE (Integrated development environment), use an online cloud editor such as CodePen. It’s free to use, and it renders the code in real time.
By default CodePen and similar websites create public code repositories which are freely available to other developers. If you want to create an account for testing projects, just set each repo to private. Then you’ll have access to your code from any computer with all changes updated automatically.
If It Ain’t Broke…
…then don’t fix it! This phrase can be applied to almost anything, and in most situations, it’s hauntingly truthful.
When planning your own responsive navigation, don’t try to be overly creative with your solutions. There is a place for innovation and other cool buzzwords and that place is located within the realm of possibility. Try to stay grounded and don’t get lost in grandiose ideas. Creative ideas typically arise from a chaotic swirl of thought patterns, so it’s easy to get sidetracked.
Visitors won’t really care if your navigation has been seen a thousand times dating back to the Triassic period. As long as it’s functional and blends into the layout, it should work. Making a responsive navigation that works is about 70% of the struggle. Afterward, you get to design all the pretty frills without any concern for the structural foundation.
Throughout the entire creative process, try to envision each goal as simple and achievable. When we set goals that seem impossible, it leads to procrastination and second-guessing. A better strategy is to brainstorm dozens of unique ideas to see if any of them work. I hope these tips can help you reframe the design process with a heavy focus on user-oriented navigation.
Techniques for Responsive Navigation
Check out these various techniques which are my choices following the most popular ideas for responsive navigation. There are obviously some other solutions out there, but this collection should give you ideas for getting started with your own responsive designs.
Block-Level Menu Links
Consider navigation menus which are using single box-style links in an orderly fashion. As you resize the window, these boxes either need to shrink or re-organize themselves. Block-level responsive menus are those which are designed to always keep the links showing in various positions on the page.
As you can see in the portfolio of William Csete, it is possible to structure 3 different breakpoints for your navigation. CSS3 media queries are the quickest and easiest method for building a responsive navigation which looks good in all modern browsers. The links on his website are always kept in block formation, even on 320px width iPhone screens you can see the most important links directly under the logo.
Block and inline-block links are great when you only have a small collection of them. It will not be difficult to reorganize the pattern of links and they can shrink to almost any size. What’s important is being creative and pushing the boundaries for whatever looks best. Do not be afraid to demo a style and see how it looks. Just keep your links flexible yet sturdy and always displaying above the fold.
Condensing the Navigation
A similar idea is to condense your links into smaller spaces while also re-organizing the position as needed. Generally, you would use this technique with horizontal navigation menus which span a large section of the header area. Block-level nav links typically stay the same size and keep their original padding. But for condensing you only need to update the sizes and space between the navigation items, like the example on Oliver Russell’s website.
The varying colors help to distinguish between each of the core navigation links. Although his website may have a large collection of web pages, the top navigation only holds 4 main links. This is why you notice so much extra space which is slowly reducing the padding as the layout resizes. The design style also reminds me of the navigation on Bodhum which condenses links smaller until they eventually break up to display above the logo.
Another interesting possibility for condensing links is to shift from a horizontal into a vertical navigation. This way you are not hiding links away from the page and users can still have full access to them. The website layout by Truf is an excellent example. As the links begin to condense and get closer to the logo, a responsive style will force them into a vertical pattern instead. Using this design you could potentially fit 6 or 7+ links all in order, although it might look somewhat cluttered on a mobile smartphone.
Input Select Options
Many of the new free WordPress themes which are released on their website are utilizing this mobile navigation technique. Not all WP themes are responsive, but for the select few that are I have noticed the navigation eventually turns into a dropdown select menu. Clicking on a specific page will bring you immediately to that page and it becomes the selected option.
On the latest redesign of Smashing Magazine, you can also see this feature being implemented. I will say that although it can look a little out of place, there is plenty of room for keeping links available. This method is very easy to setup and you do not need to worry much about font sizes or extra padding.
There are a couple downsides to this as well, namely that users may be confused as to the purpose of this dropdown. More people are becoming familiar with responsive layouts every day. But some visitors may not recognize this trend, and they may be confused as to the purpose of a select menu at the top of the page. But you can encourage users by designing a nice fitted layout around the navigation select menu. Japi Blog does an excellent job with their responsive design by encapsulating the nav between a dashed border box.
Hidden Dropdown Toolbars
When it comes to hiding navigation links there are 2 fantastic solutions I have found. This first choice is to use a typical dropdown navigation which toggles as the user taps the nav button. Some drop-down menus could appear on top of the page content as you see with Performance Marketing Awards. This option will save space on the page and keep the animation effect relatively disconnected from the page content.
I like this idea for simple portfolio websites or personal blogs. Generally, these websites do not require too many links, so the menu itself should never go beyond the page height. If you are using fixed positioning then this may be a problem and other dropdown/pushdown menus would be a better idea. Right away my first thought is the responsive navigation for the Treehouse Blog. Instead of having the dropdown appear over the content, it will push down the page to make room for displaying the full vertical navigation.
This idea stands out to me the most because you can include sub-links and even sub-sub-links if necessary. It is an elegant solution for switching between a desktop-style hover dropdown into a mobile-style click-to-toggle dropdown. Andrew Chalkley even wrote a tutorial for the blog detailing ways in which developers can build their own responsive dropdown navigation.
Sliding Nav Boxes
The other alternative for a hidden responsive navigation is to keep your links off to the side of the page and toggle this menu in a similar fashion. The user may tap on a button to hide/show the navigation, but it will slide in from the side as is typical of many iOS applications. The homepage design for Kin HR uses this technique combined with a top-level hidden navigation.
The initial page uses a large fullscreen background with links positioned off in the right corner. As you resize the layout a small 3-line toggle button will appear. Tap this to see the nav links push down the page and appear right at the top. Visitors can easily toggle between showing and hiding these links without much difficulty.
The hidden responsive menu for Sequence behaves in a similar fashion. The toggle button will slide the entire page over to the right, which reveals a common vertical navigation menu. I have seen this trend skyrocket in recent iPhone applications and it provides one of the easiest & quickest user experiences. Strangely their website toggle button does not close the nav; Instead, you have to tap somewhere in the body or onto one of the links. But obviously this implementation will change between each website and you can choose your own functionality when building a similar navigation menu.
Responsive Design Galleries
Although mobile responsive design has been around for years, it seems to have undergone a tremendous expansion over the year 2012. I would not be surprised if we find even more inspiration galleries, open source libraries, web apps, and design practices revolving around compatible responsive websites.
I hope these navigation trends may provide a starting point for launching your next project. The key aspects to consider would involve how many links are to be included in the design, plus how they should be formatted within the layout. But spending some extra time planning out your responsive ideas will certainly yield a beautiful final product design.