Mobile Web Design Trends for 2011

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.

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

mobile design trends 2011

* * *

NYC Go

mobile trends

* * *

Nissan UK

mobile web design trends  2011

* * *

WVU Today

mobile design trends

* * *

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

mobile web design trends

* * *

Victoria’s Secret – Wedding

mobile trends

* * *

Dolce & Gabbana

mobile web design trends  2011

* * *

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

mobile web design trends

* * *

OMG

mobile trends

* * *

Victoria’s Secret Pink

mobile website design trends

* * *

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

mobile website design trends

* * *

BBC iPlayer

mobile trends

* * *

Video Surf

mobile web design trends  2011

* * *

Vimeo

mobile website design trends

* * *

Motorola Retail Solutions

mobile web design trends

* * *

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

mobile design trends 2011

* * *

Aviva

mobile website design trends

* * *

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

mobile web design trends  2011

* * *

Jemma Clements

mobile design trends 2011

* * *

Pixanimal Studio

mobile web design trends

* * *

Urruti Meoli

mobile trends

* * *

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

mobile design trends 2011

* * *

Good Bytes

mobile web design trends

* * *

Kenny Saunders

mobile web design trends  2011

* * *

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

mobile design trends

* * *

GDO Creative

mobile web design trends

* * *

Collage Creative

mobile trends

* * *

Denon Graphic

mobile design trends 2011

* * *

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

mobile design trends

* * *

Worldpics

mobile web design trends

* * *

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

mobile web design trends  2011

* * *

Slurpy Studios

mobile trends 2011

* * *

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

mobile web design trends

* * *

Vondi

mobile design trends

* * *

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

mobile web design trends  2011

* * *

Information Architects

mobile trends 2011

* * *

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

mobile website design trends

* * *

Threadless

mobile web design trends

* * *

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

mobile design trends

* * *

Lawrence

mobile web design trends  2011

* * *

Geek Squad

mobile trends 2011

* * *

Mitsubishi Motors Sweden

mobile web design trends

* * *

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

mobile trends 2011

* * *

Oestreicher+Wagner

mobile web design trends  2011

* * *

Diesel

mobile website design trends

* * *

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

mobile design trends

* * *

Subaru Canada

mobile trends 2011

* * *

Design Hotels

mobile web design trends  2011

* * *

Icon-Illustrated Horizontal Panels

Please Fix the iPhone

mobile trends 2011

* * *

Plaveb

mobile web design trends

* * *

Blue Cross Blue Shield Florida

mobile design trends

* * *

Image-Illustrated Horizontal Panels

Coosh

mobile design trends 2011

* * *

Zara

mobile trends

* * *

Visua Design

mobile trends 2011

* * *

Accordion Style Horizontal Panels

McGarry Bowen

mobile website design trends

* * *

Downtown LA

mobile trends

* * *

Horizontal Panels with eCommerce Attributes

Bloomingdale’s

mobile design trends 2011

* * *

Steve Madden

mobile design trends

* * *

American Eagle Outfitters

mobile trends 2011

* * *

Asos

mobile design trends 2011

* * *

Transparent Style Horizontal Panels

New Orleans Online

mobile trends 2011

* * *

Marina Yachting

mobile design trends 2011

* * *

DeviantArt

mobile design trends

* * *

Minimal Style

Way Too Good

mobile trends

* * *

Lapse

mobile trends 2011

* * *

1 Trick Pony

mobile trends

* * *

Thirdoor

mobile design trends 2011

* * *

Cleartrip

mobile design trends

* * *

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

Comments are closed.