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. 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 break points 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 webpages, 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 dropdown 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, instead 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 explaining how 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
Final Thoughts
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, webapps, 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.
View Source
Tuesday, July 09, 2013
