Mobile design has developed a look of its own over the last time. Using the barest minimum of available space, designers have managed to find the most adventurous solutions for this kind of web browsing to make it remain interesting for the users. And though mobile web may have different rules, sometimes they are smartly broken, but it’s being done in an orderly manner. This smoothly shifts the introduction from that of mobile design concept to basically trends listing. While trendspotting we have separated 16 categories – and here’s actually the compilation of those main things which you can examine and further consider on your mobile web design. For each trend mentioned, we provide some great real-life examples and a short consideration that goes hand-in-hand with mobile constraints.

• Slider Gallery
• Large Photo Background
• Magazine Style
• Video Content Listing
• Full Website Option
• Social Networks Integration
• Introduction Blocks
• Common Website Design – Depleted Version
• Grid Style Thumbnail Gallery
• Two-Column Navigation Menu
• Binary Linear Navigation Optimized for Fingertips
• Drop-Down Menu
• Image Based Navigation
• Icon and Text Based Navigation
• Horizontal Navigation Panels
• Minimal Style

Yet the major mobile web design trend consists in leveling out the differences between standard website designs and their mobile versions. The crux of the matter here is that we have a constant flow of new handheld devices with larger screen resolutions, more intuitive interfaces. The mobile environment is enduring rapid enhancement which also results in better connectivity issues and faster mobile web browsing, with data traffic being significantly increased. This forces designers to get unrestrained and open the horizons for mobile web design creativity. And now take a look at what the following prominent sites are doing with their mobile presence.

Slider Gallery

The slider is conceived as a convenient solution to handle high volumes of images. It allows to easily navigate between multiple slides and frequently offers some fancy transition effects. This is especially useful in mobile layout because on a limited space you can display multiple pictures.

G-shock

* * *

NYC Go

* * *

Nissan UK

* * *

WVU Today

* * *

Large Photo Background

The use of over-sized photo as website’s background creates stunning visual effect. Having an overlay of content the photograph faster conveys the story and brings a really great sense of contrast.

Tyler Alberti

* * *

Victoria’s Secret – Wedding

* * *

Dolce & Gabbana

* * *

Magazine Style

Magazine designs have also become increasingly popular as they function like a portal to content on the rest of the site. Here the most relevance is given to images and headings.

Us Mobile

* * *

OMG

* * *

Victoria’s Secret Pink

* * *

Video Content Listing

When it comes to sites with video content, the overall similar trend consists of listing the videos with a concrete explanation on what visitors should expect once clicking on a proper link.

YouTube

* * *

BBC iPlayer

* * *

Video Surf

* * *

Vimeo

* * *

Motorola Retail Solutions

* * *

Full Website Option

Mobile site versions usually provide a link to switch back to a standard website for the user to find and view the other content that’s only accessible on the desktop version of the site. Plus, this trend is becoming increasingly popular due to how many handheld devices today have large screens and wi0fi connectivity allowing them to easily display desktop versions of any website.

Advantage Bridal

* * *

Aviva

* * *

Social Networks Integration

Another popular trend is embedding social blocks in mobile websites in order to leverage user bases and experiences from external social networking sites to a particular community.

Duda Fresh

* * *

Jemma Clements

* * *

Pixanimal Studio

* * *

Urruti Meoli

* * *

Introduction Blocks

Many mobile sites follow the practice of using intro blocks to make a first comforting impression, introduce the site, display personal information about the owner or the company which stands behind.

Mikael Geljic

* * *

Good Bytes

* * *

Kenny Saunders

* * *

Common Website Design – Depleted Version

This is one of the most frequent styles to embrace. Website owners simply reduplicate all the main parts of their full website designs eliminating unessential elements. The output is then optimized for mobile web standards.

Federica

* * *

GDO Creative

* * *

Collage Creative

* * *

Denon Graphic

* * *

Grid Style Thumbnail Gallery

Grid-based image gallery is especially useful for categorical groupings of visual content. The act of navigating in this case is clicking one of the thumbnails to open the particular content slide or web page.

Torn Robes

* * *

Worldpics

* * *

Two-Column Navigation Menu

The style is remarkable for having a skeleton οf navigation menu split into two columns. Such layout perfectly serves many mobile sites as all menus are housed within the scope of a mobile screen.

Nordic Ruby

* * *

Slurpy Studios

* * *

Binary Linear Navigation Optimized for Fingertips

This type of navigation menu is represented by a twofold navigation bar in contrasting color style. It links to most essential content blocks which are usually ‘about’ and ‘portfolio’ pages.

Toy Soldier

* * *

Vondi

* * *

Drop-Down Menu

In this case the dropdown part is dynamically displayed upon clicking. It’s usually placed at the top of the page and is used to trim down long menu that is overwhelming the screen space.

Vivacitas

* * *

Information Architects

* * *

Image Based Navigation

Lots of menus are entirely based on graphics. Additional imagery in this case helps to unambiguously guide the visitors through the different sections of the site.

Ralph Lauren Rugby

* * *

Threadless

* * *

Icon and Text Based Navigation

Icons with accompanying textual passages also make it easy for people to find their way around the website. It works for a graphic appeal and favors a quicker visual read of the link.

Euro DNS

* * *

Lawrence

* * *

Geek Squad

* * *

Mitsubishi Motors Sweden

* * *

Horizontal Navigation Panels

The major trend arising around menus is the use of horizontal panels, which are sure to be a mainstay in mobile design. They’re space effective and can considerably facilitate fingertip content browsing as the clickable area is larger.

Deck Fifty

* * *

Oestreicher+Wagner

* * *

Diesel

* * *

As might be expected, there’re numerous design variations possible for such navigation style. So in this trend category we can further define the following sub-categories:

Horizontal Panels with Overhead Image

Charles Luck

* * *

Subaru Canada

* * *

Design Hotels

* * *

Icon-Illustrated Horizontal Panels

Please Fix the iPhone

* * *

Plaveb

* * *

Blue Cross Blue Shield Florida

* * *

Image-Illustrated Horizontal Panels

Coosh

* * *

Zara

* * *

Visua Design

* * *

Accordion Style Horizontal Panels

McGarry Bowen

* * *

Downtown LA

* * *

Horizontal Panels with eCommerce Attributes

Bloomingdale’s

* * *

Steve Madden

* * *

American Eagle Outfitters

* * *

Asos

* * *

Transparent Style Horizontal Panels

New Orleans Online

* * *

Marina Yachting

* * *

DeviantArt

* * *

Minimal Style

Way Too Good

* * *

Lapse

* * *

1 Trick Pony

* * *

Thirdoor

* * *

Cleartrip

* * *

Don’t forget to check out Designing and Building a Mobile Website.

Written by Lilian Rigo

It all started as a joke and a bit of a challenge. But then somewhere along the line I realized that being involved in copy-writing is too good to pass up. Big love for analyzing was a certain slide to where I am now. To pick up every tidbit of info, meditate on words literariness, and then pour it all in a decent form - that is the essence of my current work being. Overall, I see the web as a Klondike of art, music, and literature... it's all there. Maybe someday, I'll brave more than just copy-writing. We'll see. Lil Rigo on Google+.

Be Sociable, Share!

• 
• 
• 
• 
• 
• 

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
•