6 Examples of Sliding Navigation on Mobile Sites

August 28, 2012 · 2 comments

by vail

Examples of Sliding Navigation on Mobile Sites

One of the first things that becomes evident when digging into mobile websites is the extreme simplification of the navigation. Navigation not only becomes very prominent and central on a mobile website, but also is a often minimized substantially in presentation and content. Using traditional navigation can lead to frustration with mobile users, who are intent on finding information quickly, as it loads pages separately and does not provide a cohesive experience between one page and another. Some mobile sites attempt to maximize space with drop-down menus or accordions, but the problem with these is the addition of an unnecessary step – users are forced to return to a home screen or menu page to change direction. A good strategy is to use mobile frameworks and building blocks and lean how to make an iPhone App using these. Good navigation and other best practice is often injected into your project this way.

A clever solution to the navigation problem for both mobile and full-screen design is a combination of responsive structure, single-page design and fixed-position navigation. The beauty of this strategy is brought to light by the inclusion of lightweight and mobile-friendly scripting to produce elegant sliding effects and pages that “snap” to the viewport. Visitors can move between content areas quickly and seamlessly when navigation is always visible, even while scrolling using the touch-screen.

This technique is ideally suited for specific types of content such as galleries, portfolios, tumblogs and activity streams. This showcase highlights 6 unique and eye-catching examples of ways you can use sliding navigation when designing mobile-ready sites.


ElegantThemes
ThemeForest

Advertisement

FridgeWorks

image

Navigation on this site stays with you as you scroll and makes it easy to access anything you need from any point in the site. Rather than jumping around to different parts of the site, the links filter the content instead. If you choose to scroll a particularly long page of content, the designer has Top links distributed intelligently throughout each page to bring you back up quickly.

Netontwerp

image

Designer Simon Wuyts creates a unique layout using fixed navigation that slides in each page of content. The design fits beautifully into the mobile viewport, and gives visitors enough information in a simple and elegant format.

Riot Industries

image

Riot Industries portfolio keeps everything within the viewport by using left-hand navigation and a unique thumbnail tabs which, when tapped, slide in a mini-gallery of preview screenshots. Pagination is used to make moving between slides easy and minimizes reload time. If you select the “About” link, the portfolio slides over to reveal a content page. The result is a stunning design that engages and interests visitors, and functions perfectly on a variety of devices.

SLM Online

image

Straight Line Music is mobile simplicity at its best. Rather than use traditional paged navigation, this site puts only what a mobile visitor probably cares about in one interface. The page loads with a “Listen” link in the upper right that slides in to reveal a full music player.

Smorge

image

Smorg uses delightful icon-based navigation that slides down the side of the page in either orientation. The links are perfectly suited to the tip of a finger, and each page fits snugly within the mobile viewport, reducing the need for additional scrolling.

TME Network Solutions

image

TME features a set of gorgeous layouts tied together by large mobile-minded landing-page links, and a traditional top navigation bar that slides in with each page transition. The entire site loads dynamically, and content is inter-linked from each area, making this site extremely easy to navigate and entertaining to use.

Author : Vail

Vail is a long-time writer, designer and copy editor with a vibrant background in corporate business writing, music journalism and internet media design. Since 1996, her articles and photography have been published in various music magazines, poetry compilations, and business publications. When she is not hard at work designing something, she loves writing for Wix.com, which has recently launched their mobile website builder.

{ 2 comments… read them below or add one }

Adam Beaumont November 16, 2011 at 2:14 pm

Good range of sites for me to take ideas from and take to my client to see what they want, I would suggest the final TM solutions just because of the vertical layout..

Reply

v September 9, 2011 at 1:33 am

Please encapsulate “A good strategy is to use mobile frameworks and building blocks and lean how to make an iPhone App using these. Good navigation and other best practice is often injected into your project this way.” in parenthesis () with an editor note, as it was not part of my original copy. Thanks.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous post:

Next post:


Web Analytics