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.
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.
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 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.
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.
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 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.