Thanks to the folks at Smashing Magazine, we now have an in-depth report highlighting trends in mobile design and a map to help us plan for the road ahead.

Mobile Design Trends

Smashing Magazine’s Study of Trends in Mobile Design looked at a variety of websites and brands in an effort to showcase the methods being employed by today’s most popular websites. The sites selected for the study were all listed on Google’s AdPlanner list. Though the site includes one-thousand sites, the initial 100 were used.

The sites were closely examined and matched against a list a variables. Sites were measured based on how the mobile experience is activated, its functionality and how visitors are directed to a mobile experience. Variables that accounted for speed, bandwidth, display size, touch screens and other best practices were also included.

Results of the study indicated that mobile design is still evolving slowly. Many websites seem to be disconnected from a primary website, making us wonder if companies have a mobile design strategy in mind at all. Ultimately, mobile design, like web and print, is about spending your customer’s time wisely. According to the results, some companies may want to re-examine their strategies for mobile customer experience.

Mobile Access

Was the mobile experience made apparent to a user immediately? It’s an interesting question that you may have not asked yourself before. Ideally, we want the mobile web experience to be seamless, but wouldn’t it be nice to know in advance which sites supported a mobile device or loaded the regular site as is? Could it improve or alter the way you use the mobile web? The study not only examined whether a redirection or device detection occurred, but also if the mobile experience was provided on the standard website (rather than a subdomain), and if a regular PC could switch to the mobile version too. Of the sites surveyed:

  • 39% redirected
  • 32% had a native site
  • 29% had a non-mobile site

Mobile Phone Apps

When it comes to creating a mobile phone application, many companies are not ignoring the presence of their mobile website. The study found that among the sites surveyed 67% had an app (33% didn’t) and that among those with an app, 53% had an app and a website, while 14% had an app but no mobile-friendly site.

Content, Navigation & Layout

Websafe Fonts

The study tested to see which websafe typefaces were being implemented on the Web, as well as what font families were being used. The elements for which this test was created were not only based on headings, but on all manner of content in the page. In every case where a font family was declared, the category of typefaces used was always sans serif (for both headings and body text).

mobile_design_trends.jpg
Mobile Font Stacks: A distribution showcasing the typefaces used within the primary font stack

User Login

So what happens if you need to require authentication when accessing a mobile site? On a desktop browser, users don’t usually have to log in before accessing general information about the site. The study tested to see if mobile users were expected to have an account and know what the service did before accessing the mobile website. In some cases this was true (14%), but overall 57% of mobile websites didn’t require users to log in before accessing the site.

mobile_design_trends1.jpg
Mobile Autentication: Facebook requires you to log in before accessing the website

Menus & Links

The study looked at sites’ navigation and tested the ease at which a user could navigate through a company’s mobile site. They tested four types of navigation conventions, including text links, icon-based navigation, image links and special menus (such as dropdowns or panels). The results were fairly conclusive, in that every single website had standard text anchor links, though some menus were formed of plain text.

mobile_design_trends2.jpg
Interactive Menus: The percentage of websites which employ the use of menus (or content on demand)

Scrollability

The study also looked at how scrolling is experienced within the mobile website. They examined how many fingers were required to initiate a scroll (as when content scrolls using an overflow, two fingers rather than one are required), and whether the window supported paneled scrolling–where panes of content would rotate at specific intervals, or sections could be scrolled by request. The results indicated that most sites (53%) used traditional scrolling and 18% experimented with jQuery, JavaScript, or CSS3 to provide paneled scrolling.

The Future of Mobile Design

Overall the Study of Trends in Mobile Design, though just a snapshot of 100 mobile websites, highlighted the favored approaches of many well known companies. However, it doesn’t necessarily imply that these ‘trends’ are representative of best practices. Ultimately, like any design and development, to be successful, companies must understand their product, their users and the ways that they can effectively customize their experiences for a specific purpose.