A Study of Trends in Mobile Design

Advertisement

This article is a part of our new eBook Mobile Design For iPhone And iPad1 (just $9.90). The eBook presents articles on professional design for the iPhone and iPad, including guidelines for the development of mobile web pages. Available in PDF, Mobipocket and ePUB formats.

The industry has evolved in many ways, but one particular area has affected how we build websites to a greater extent than any other. The surge in Web-enabled mobile devices has forged a subculture of visitors who require the adaptation of our websites to meet their needs. While mobile design is still in its infancy (and little primary research on mobile trends exist), we need to observe how this now-critical element of our industry is evolving, and the patterns which exist from current development efforts.

The aim of this article is to showcase the variety of methods in which some of today’s most popular websites provide an interactive and (hopefully) useful mobile experience for their end users. There are plenty of big names which were analyzed, such as Facebook and Amazon, and you’ll see plenty of useful graphs to draw some inspiration from. With statistics and some really interesting revelations on the diversity of modern design, you can be excited about the future of mobile Web design!

You may be interested in the following related studies:

What is This Anyway?

To determine some best practices and common trends within the ever growing field of mobile Web design, a study was conducted to analyze how popular websites deal with important factors relating to the information architecture and design implementations within mobile design. Because this research could have covered any number of variables, it’s important to state that this study isn’t going to answer every one of your questions–but it hopefully may help you to learn a few things!

Screenshot6
Figure 1: Mobile design has become an essential component of a successful, compatible website. Smashing Magazine has a mobile version7, too.

Of the websites that are measured and accounted for within the study, we not only examined how these websites deal with mobile devices and how visitors are served a mobile experience, but also if they had non-Web features, such as mobile apps, that can play a useful role in the process. In addition, some of the layout conventions, design choices, coding levels, and some useful features specific to mobile websites, have been measured (to their existence, their conformance level, and the method they undertake).

Note: While a great deal of effort has been put into making this study as accurate as possible, the number of variables being considered may result in anomalies. Factors such as websites without mobile experience have been accounted for (as has bias–to the greatest extent possible, during the study).

Examining the Variables

Before presenting the results of this study, it’s important to account for a few of the variables and methodology that came into play to explain how the research and results were formed. Using this information you can hopefully recognize the limitations of this particular study, and if you really feel adventurous, perhaps you could expand on the subject and conduct some research of your own to see how the results apply under different situations. It could make for interesting reading!

Screenshot
Figure 2: The above chart explains the process this study undertook to uncover its results

Regarding the methodology for this study, the protocol begin by selecting an independent group of sites (outsourced) and variables to test against–many of which had never been examined on such a scale (or in such depth) previously. The approval for which variables were included had to meet certain criteria; firstly, the results had to be interesting (and could affect how the mobile design situation is seen), and also had to be statistically significant (we don’t want to state the obvious).

Note: Some variables were dropped from the final analysis due to a lack of conclusive, useful results. An example of this is the support for orientation (portrait and landscape modes); as a result of how browsers deal with the layout, this became a non-issue, seeing 100% native support.

Site Selection Protocol

Picking a group of websites to analyze is, of course, a critical part of the process. To eliminate the potential for bias or for focusing on a niche, it was decided that the top 100 websites depicted through Google’s AdPlanner list8 would be a suitable candidate. While the list held 1,000 websites and the study could easily be expanded, we used the initial 100 websites to receive a good sample and to provide enough variety for the baseline results. This level is used as the qualifier for statistically significant results.

Screenshot9
Figure 3: The Google AdPlanner top 1,000 websites list10 is the unbiased resource used to study from

Variables (Per Category)

The results of this study wouldn’t be anything without its variables. When deciding what to test against, the focus became twofold: how the mobile experience is activated, and how that experience functions. How visitors are directed to a mobile experience became worthy of attention due to the increasing number of implementations that exist. Secondly, it was vital to test those pages to ensure they accounted for speed, bandwidth, display size, touch screens, and other best practices.

Screenshot
Figure 4: Plenty of variables were considered to give you some informative results to learn from

Margins for Error

As with any study, there is always a potential for error or bias to occur. To avoid as many of these issues as possible not only were the websites independently sourced, but all testing was undertaken on a desktop machine, several handheld devices, and a number of emulators (this occurred on every website). Following this practice reinforced the results (avoiding erroneous numbers), and the testing was verified on two separate dates to ensure that the experience resulted from consistent practices.

Screenshot
Figure 5: Emulators were used to expand the number of physical devices included

And Our Survey Says…the Results

Now that all of the basics (as to how the study was undertaken) have been explained, it’s time we get down to the really interesting stuffthe results! You should be prepared for plenty of charts and graphs, and some of the results may be really surprising. We’ve broken down each type of result into its own subsection and have provided various ways the results can be interpreted, so hopefully the findings of this study will be quite apparent. Without any further delay, let’s get down to business!

Method of Access

Within this test it was important to establish whether a mobile experience was made apparent to a user immediately. When a user proactively visits a website they want to be made aware that their device is either supported, or that the regular website will load. In this test we 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.

Screenshot
Figure 6: The proportion of automatic redirects against desktop websites with optional mobile support

Screenshot
Figure 7: The distribution of websites which implemented a mobile design on the WWW subdomain

Screenshot
Figure 8: How mobile-friendly websites dealt with desktop PC users trying to access the mobile website

Screenshot
Figure 9: While Amazon’s .mobi website11 stays mobile friendly, the primary m.amazon.com12 redirects PC users to the original website.

While the number of websites that employed a script to detect and redirect visitors to a mobile experience wasn’t as high as one might have expected (as many believe that the mobile website should come first to boost loading times), an interesting trend occurred where all but one website (answers.com) employing a mobile version of the experience (on the WWW subdomain) forced the redirection of PC users back to the desktop view without allowing entry to access the mobile edition (if they wished to).

Mobile TLD Usage

This second test aimed to determine the use of TLD conventions in mobile design. In order to keep the scope of the results as strict as possible, only subdomains (such as m.) and the .mobi TLD were considered (along with dedicated mobile websites). As such, directory paths on the WWW domain such as “/mobile/” were not considered. The possible implications of this result could showcase the popularity for the .mobi TLD, and trends which may exist in the use of subdomains on mobile websites.

Screenshot
Figure 10: The distribution of mobile TLD subdomains, including the level of extension popularity

Screenshot
Figure 11: The number of websites which offered no mobile-optimized experience in any form

Screenshot
Figure 12: A graph showcasing the number of subdomains supported per website (on average)

Screenshot
Figure 13: The levels of which WAP- or WML-enabled devices are supported or offered access

Screenshot
Figure 14: The percentage of websites which redirect the user to a separate mobile TLD

Screenshot
Figure 15: PayPal makes use of a mobile website13 that uses the m., mobile and .mobi TLD domains

Interestingly, while many sites offered some form of mobile experience and some redirected the visitor, the use of .mobi extensions was much lower than expected. In addition, an unusual trend made itself apparent. Unlike other nations’ mobile websites, Asian ones trended toward using “3G” in preference to “m” or “mobile” (as used elsewhere). It’s worth mentioning in addition that only Apple devices were lucky enough to receive a dedicated website using the “touch” or “i” subdomain.

Mobile Phone Apps

While this test was not so much about the type of code rendered in browsers, it seemed prudent to determine how many websites in the surveyed list provided a mobile application for devices such as iDevices, Android, or Blackberry. The results of this test simply look for the presence of a mobile app; the platform itself is not taken into account. With so many apps having Web connectivity, the results of this test really push the barriers to access in finding how mobile-friendly a website is.

Screenshot
Figure 16: The number of websites that had mobile phone-specific apps (for any platform)

Screenshot
Figure 17: The percentage of websites with a mobile app, but without a mobile-friendly website

Screenshot14
Figure 18: The Internet Movie Database has a mobile website15 and an iPhone app16 to further improve the mobile experience

While it’s not surprising that many of the top 100 websites had a mobile app, due to the popularity and the widespread use of their services, what did become apparent and rather interesting is that some of the listed websites which did not have a mobile-friendly website (in any form) still had an app. This particular trend seems to indicate that the transition toward a mobile-friendly set of services, is down to the heightened demand for apps (which unlike mobile websites, have no fallback to function on).

Average Loading Time

In the next test, we felt it was important to measure the loading times of each website to see how mobile experiences account for the bandwidth restraints and temperamental speeds of the average Web user. For the purposes of this study, each of the times were registered over a Wi-Fi connection (not a 3G or Edge stream due to some emulator usage, to ensure balanced results) and were done using an uncached format; therefore, the loading time would be accurate to include any external resources.

Screenshot
Figure 19: The highest, mean, and lowest loading times as calculated from an uncached “cold boot.”

Screenshot
Figure 20: The percentage of websites requiring more than 10 seconds loading time on a Wi-Fi connection

Screenshot
Figure 21: The percentage of websites requiring less than 3 seconds loading time on a Wi-Fi connection

Screenshot17
Figure 22: YouTube18 had one of the fastest loading times for any mobile-oriented website

While caching will produce substantially quicker loading times, the results were fairly conclusive that the loading time of each website was pretty evenly spread, with only a small number of websites having load times of over 5 seconds (often in such cases it was a result of slow server response, rather than of the physical content being transferred). As visitors obviously don’t want to wait for long periods of time to get their data, a speedy and effective loading time has become critical to the design process.

Home Page Asset Size

Along with the time it took to load a page, in equal measure it immediately became obvious that the size of the files and any loaded external resources should be measured. With many mobile Internet plans having capped services and international browsing potentially becoming prohibitively expensive (by the megabyte), it seemed only fair to determine how each website was optimized and whether the amount of uncached data loaded was as small, or big, as a regular desktop-oriented website.

Screenshot
Figure 23: The highest, mean, and lowest file (and asset) size as calculated with caching turned off

Screenshot
Figure 24: The percentage of websites with a total uncached asset size of more than 100KB

Screenshot
Figure 25: The percentage of websites with a total uncached asset size of less than 25KB

Screenshot19
Figure 26: Softonic20 had the largest file size of any mobile site — quite a surprising result!

The results of this test are rather interesting. While many websites (especially WAP-oriented ones for less capable devices) required less than 25KB to function, which seems like an acceptable level–a large number of websites supposedly providing a mobile experience required over 100KB, some even as high as 0.5MB! More interesting is the coincidence that the percentage of websites that have asset sizes of fewer than 25KB, matched (exactly) the percentage requiring over 100KB.

Doctype Declarations

When producing a website, one of the initial questions we ask ourselves is, what language or version of that language will best meet our contents needs. The debates about HTML vs. XHTML have been endless, and as many mobile variants exist (the mobile profiles for XHTML and WML), it became apparent that statistics related to the types of DTD most often used could be of benefit to readers. This test therefore examined the Doctype of the front page to see if any patterns of usage exist.

Screenshot
Figure 27: The distribution of mobile website Doctypes, based on language versions and profiles

Screenshot
Figure 28: The percentage of websites using a mobile-specific profile in preference to desktop profiles

Screenshot
Figure 29: The percentage of websites that support both a WML and full XHTML experience

Screenshot21
Figure 30: Dailymotion’s iPhone friendly website22 was one of the few leveraging HTML5

The results show conclusively that XHTML is currently more popular than HTML (or HTML5). This could be down to HTML’s lack of a mobile profile (used in most cases), though it can be noted that many smartphones supported HTML and XHTML. In addition, the spread of mobile vs. desktop profile usage was fairly similar. This questions the need for mobile profiles, if the full specs are supported. In addition, Facebook’s iPhone-friendly website was the only one which failed to provide any Doctype at all!

Code Validation

With the semantic Web and the need for our industry to maintain standards, this test followed an earlier study by Jeffrey Zeldman in which a large number of websites were put through a simple “pass or fail” test against validation. While Zeldman’s research focused on the Alexa top 100, this piece of course used a different set of data. While standards aren’t the be-all and end-all of design, this test was included to provide additional comparisons as to the stage conformity to semantics were at.

Screenshot
Figure 31: Distribution of website validation (in the case of CSS, proprietary properties were ignored)

Screenshot
Figure 32: The percentage of top 100 websites with a front page that validates against the DTD chosen

Screenshot23
Figure 33: The MySpace website24 wasn’t unusual, in that its source code didn’t validate25.

Because this checkpoint focused only on the front page of mobile-friendly websites, the results are not as complete as they could be. They do instead provide a good indication as to the care being given to mobile experiences. Unfortunately, the results seem to correlate with Zeldman’s research in that the overwhelming majority failed to meet the standards for the DTD they chose to conform too. This seems to reinforce the fact that design is more important to those designers, than optimizations or quality.

Code Separation

The next test that was carried out links quite heavily into a few of those that were previously carried out. The separation of structure, style, and behavior has been shown to have benefits in reducing file sizes (due to avoiding repeat coding, and to cache advantages). It therefore seemed right to see not only if websites did separate their style or behavior, but also if they took advantage of CSS3 or jQuery in the mobile design to provide a more dynamic behavior within the website layout.

Screenshot
Figure 34: The percentage of websites using embedded inline style rather than external files

Screenshot
Figure 35: The percentage of websites using external CSS2.1 or CSS3 within their designs

Screenshot
Figure 36: The percentage of websites using external JavaScript or jQuery within their designs

Screenshot26
Figure 37: Wikipedia makes use of the jQuery library within its mobile-orientated website27.

While you would have thought that most websites would immediately break the style and behavior from their mobile pages in order to improve performance, a moderate number of the websites did have all of their code directly tied into the page. In addition, only a rare number of those mobile websites took advantage of the jQuery framework, and an equally small number made use of CSS3 media queries to dynamically scale the layout. The numbers for CSS3 usage were, predictably, similar to HTML5 usage.

Font Family Types

Typography is an essential element of the Web, and of how information is visualized. This particular test was created to not only see which Websafe typefaces are being implemented on the Web, but to see what font families are being used. In addition, any websites which rely on the default typefaces by not providing a font stack (or which have a stack with multiple typefaces), would be noted. The elements for which this test was created were not only based on headings, but on all manner of content in the page.

Screenshot
Figure 38: A distribution showcasing the typefaces used within the primary font stack

Screenshot
Figure 39: The percentage of mobile designs with no font stack declared (using defaults)

Screenshot
Figure 40: A graph showcasing the number of fonts declared within a family, per website

Screenshot28
Figure 41: m.naver.com29 was slightly more adventurous with non-Websafe typeface usage

The results are quite surprising. In every case where a font family was declared, the category of typefaces used was always sans serif (for both headings and body text). In no instances did serif or another classification get used, and in some cases no font family was declared at all (which could be due to inconsistencies in available fonts for such devices). In addition, the number of occasions where no font stacks were built–resulting in the use of system defaults alone–was fairly significant.

Heading Contrasts

Since the evolution of the cellphone, the ability to have color screens with as much depth and clarity as a desktop PC (using high definition graphics) has increased the ability for us to give our headings and content the colors of the rainbow, both in the foreground and in the background. This test was added to the study in order to see if any trends existed, the range to which color is used within headings, and to determine whether mobile websites made use of background effects such as gradient colors.

Screenshot
Figure 42: Showcasing the number of colors used within the foreground or background of headings

Screenshot
Figure 43: A distribution of websites using a black foreground or white background in headings

Screenshot
Figure 44: The percentage of mobile websites using a gradient background within a header

Screenshot30
Figure 45: 56.com31 made use of a wide range of colors and contrasts within it’s headings

As you may have expected, the majority of websites showcased in the list made use of either black or white as the primary colors (in certain cases, shades of grey were used). This stands to reason as a method to keep the contrast ratio high on small screen devices, in order to boost the readability of the content. Another trend uncovered was the preferred use of gradients within the background of headings to give them an added layer of texture, instead of using solid colors or an increased text size.

Body Content Contrasts

The ability to showcase color in our designs is central to how we subtly influence our visitors. Carrying on from the previous test targeted at headings, this one involved examining the colors used within non-heading level elements and determining which colors they used. As this has a big impact within accessibility and the general scope of design, a mixture of visible foreground and background variants were recorded (though as with the previous test, the results were limited to the front page).

Screenshot
Figure 46: Showcasing the number of colors used within the foreground or background of body content

Screenshot
Figure 47: The percentage of websites using a black foreground on a white background in body content

Screenshot32
Figure 48: eBay33 uses a one-paneled black and white contrast ratio for the body text, like most websites

Within the previous set of results for headings, black and white were shown to be dominant within the text in order to maintain a visible level of contrast. This set of results, as you might expect, follows the same trend and uses less additional colors in the palette. While the color contrasts were only built up from a sample of each website’s front page (and then contrasted against each other for the comparison), the results clearly show that a sensible approach to text visibility has been maintained.

Authentication Required

Many places require visitors to login before full access to a service is granted. On most desktop websites, a bunch of information is provided without a user needing to be registered (explaining features or contact details). However, an interesting trend seemed to exist in which mobile users were expected to have an account and know what the service did, as if the mobile website were simply a bonus feature of the service (thereby only offering a login form). The aim of this test was to see if this was the case.

Screenshot
Figure 49: The number of websites requiring the visitor to login before accessing pages

Screenshot34
Figure 50: Facebook35 requires you to authenticate before accessing the website

While it’s understandable that some websites do not require users to authenticate themselves–and this means that the number of recorded “forced logins” will be drastically reduced–the results of this test are quite shocking. While it should be considered bad practice to require logins on a website without any description of the service being present (for mobile-only traffic), a number of popular websites which were contained within the top 100 list proved positive for doing this, as they had no useful site information!

Returning to a Full Website

The next test depended entirely on the mobile website’s ability to follow common requirements and return the visitor back to a non-optimized website upon request. While a website’s mobile experience will be enough for some, it’s important to realize that some people may not adjust well to new a UI or may request functionality that only exists on the main website, and offering a fallback mechanism is worthwhile. The test also aimed to uncover any naming conventions used to represent this link (if one exists).

Screenshot
Figure 51: A graph of the various naming conventions used in links toward a full website link

Screenshot
Figure 52: The percentage of websites which do not have a link returning you to the full website

Screenshot36
Figure 53: Daum.net37 allows gaining access to the full website by clicking the “PC Version” link

In the results, some websites offering mobile versions of their services used common words in their links to indicate returning to the main website, such as “full site” or even “desktop version.” In these cases, no common preference could be found even though usage was spread fairly evenly. What is quite surprising however is that many who force-redirected visitors to the mobile website, refused to link or to allow access the full website. This in turn limited the ability of mobile visitors to access some services.

Navigation Conventions

This test was focused upon what could be considered one of the most important elements of a website. A successful navigation scheme can be the difference between an easy-to-use interface, and a complex and potentially unusable website. When carrying out this test, four types of navigation conventions were checked as to whether they were being used on the home page (most sites used more than one): text links, icon-based navigation, image links, and special menus (such as dropdowns or panels).

Screenshot
Figure 54: A distribution of websites making use of text, icon, or image-based navigation styles

Screenshot
Figure 55: The percentage of icon- and image-based navigation against conventional text

Screenshot
Figure 56: The percentage of websites which employ the use of menus (or content on demand)

Screenshot38
Figure 57: HP’s mobile website39 enlists a menu to determine your country of origin

The results of this test were fairly conclusive in that every single website (as you might imagine) had standard text anchor links, though some menus were formed of plain text. In addition, image-based menu options were quite popular and were actually used more often than icon-based navigation–which, for devices that depend on icons representing apps or services, was quite a surprise. Special menus also saw some popularity, especially when used with content-on-demand scrolling mechanisms.

Home Page Link Ratio

Having a relatively small amount of space can be a real problem in mobile devices, and therefore the potential for confusion as to navigation options, and how many links are provided, can potentially increase the difficulty for users to know the extent of where their choices will lead. If a website has too many links (or too few), the choice can quickly overwhelm a user’s sense of perspective. As such it seemed worthwhile to see how many options were provided in the form of links on a single page.

Screenshot
Figure 58: The number of websites using a small, medium, or large number of links on the front page

Screenshot
Figure 59: The percentage of websites using a large number of links as a result of a menu convention

Screenshot40
Figure 60: 2345.com41 has loads of links within its home page, but is that really a good thing?

When testing the websites, the results were categorized based on the number of links that existed in the front page of a website (these were labeled as small, medium, or large as per the link ratio). For the websites being measured, the results indicated that fewer links were visible on a mobile website than on the desktop variant (even when complex layouts were used). This seems to follow conventions, in that a reduced viewing space should hold less information to avoid unnecessary scrolling, and to reduce complexity.

Golden Image Ratio

Images on a mobile website can be a tricky affair, as these devices often require more bandwidth than anything else and therefore can reduce the loading times. Within this test, the trend of using small, medium, and large as a representation of the number of images on the page were used, similar to the link testing. Primarily focused upon the home page, the amount required to fall into each category was reduced as most websites will naturally hold more text links than images (per page, on average).

Screenshot
Figure 61: The number of websites using a small, medium, or large number of images on the front page

Screenshot
Figure 62: The percentage of websites using a large number of images resulting from icon navigation

Screenshot
Figure 63: The percentage of websites using a large number of images resulting from image navigation

Screenshot42
Figure 64: Russian Mail.ru43 uses icons and images to highlight specific link usage within the page

As you might imagine, on mobile websites the results backed up many assumptions that mobile websites will have not only fewer images on the page, but will have smaller images presented on the screen (to match the kind of experience available on small screens). This in turn helped reduce the file sizes in earlier tests (and the speed benchmark). What makes this result particularly interesting is that websites (such as Flickr4644) which oriented around images, also followed this reductionist trend.

Link Click Region

The purpose of this test was to go beyond the mere presence of links (and images with links) and to examine how large the click region actually was on the page. With mobile devices and small screens supporting touch sensitivity, there is a need to keep link click regions as large as possible to ensure the usability and accessibility of such devices (to help with big, imprecise fingers). The scale used followed small, medium, or large, and focused upon the link click’s size compared to other elements on the page.

Screenshot
Figure 65: A graph with the average size of a website’s link click region (small, medium, or large)

Screenshot
Figure 66: The percentage of websites with a large number of links, images, and large click regions

Screenshot45
Figure 67: Flickr4644 uses image links to provide a more visible click ratio, for easier usability

The results of this particular test were evenly spread, showcasing a good number of websites using large- to medium-sized links that ensured navigating could be accomplished without an accident occurring. While this trend was especially present in more image-oriented websites (as linking often occurred in image thumbnails), there was also an interesting trend in which Asian or Russian websites were more likely to have smaller click regions (fewer characters in words also reduced the click region further).

Block Placement Ratios

The next test looked at the visual layout of the page and examined how the design was broken down into either physical or visual blocks of information. It’s worth stating that all of the websites measured used a single column layout, but that the way in which links and segments of content are split may give the visual indication of separation, which was worth examining further. As mobile websites require a lot more scrolling than desktop websites, the separation of blocks becomes more critical to visual identity.

Screenshot
Figure 68: Distribution of horizontal elements (columns or table cells) within the viewport

Screenshot
Figure 69: Distribution of vertical panel segments (headings or separated rules) per page

Screenshot
Figure 70: The highest, mean, and lowest range of blocks, both in column and panel distribution

Screenshot47
Figure 71: The Zol website48 makes use of visible blocks, which separate content by heading

Interestingly, while the majority of websites held no horizontal panes (including table cells, navigation links, and other side-by-side elements), a number of websites defied convention and had anywhere between two and eight points of reference within a single line on the viewport. This visual separation was also backed up by how a number of websites had vertical breaks, which split the content into separate sections. Most mobile websites’ readability was increased due to such content organization.

Scrolling Experience

The final test was included as a representation of how scrolling is experienced within the mobile website. The variables analyzed included the number of fingers required to initiate a scroll (as when content scrolls using an overflow, two fingers rather than one are required), and whether the window supported the fancy flourishes of jQuery, JavaScript, or CSS3 in providing paneled scrolling–where panes of content would rotate at specific intervals, or sections could be scrolled by request.

Screenshot
Figure 72: The percentage of mobile websites using paneled navigation over conventional scrolling

Screenshot
Figure 73: The percentage of overflow-based scrolling in preference to a full page scrolling effect

Screenshot49
Figure 74: Yahoo50 splits it’s content into several panels which can be activated on-demand

The results of this test show a general lack of paneling in general (which is representative of the lack of “flourish” scripting in most mobile websites). This may have been partly due to the nature of the websites being studied (portfolio or showcase websites are more likely to have paneled mechanisms). What is interesting however is that to increase the simplicity of the designs (as none of the sites used overflow text), they also maintained a liquid layout to reduce the complexity of required scrolling.

Going Beyond the Basics

While the sample used did constitute a wide array of Web presences, it’s worth noting that different niches may produce varying levels of results. For example, a study of the same variables upon websites which primarily act as a designer’s portfolio (as denoted in the results) will obviously account for different usage needs, and the experience may therefore vary. That said, the trends which the websites employ do bear a resemblance to many others (and therefore can be deemed as reliable).

Screenshot
Figure 75: Different websites will follow different trends, but they still have comparative similarities

To ensure that the results were not simply a result of the top 100 websites’ own popularity bias, an extra 10 websites were browsed too (their results weren’t logged as it was an exercise of conformance) in order to see the accuracy of the top 100 findings. Within these were a mixture of varying website types, but the overwhelming majority of websites followed similar practices, or made changes which would logically make sense under the usage scenario. Therefore, the trends do seem to apply consistently.

Note: In addition to the above, it’s worth stating that a couple of the websites within the top 100 listings were either subdomains, or international versions of a website which has already been mentioned. While this could prove an issue for repeat conventions, the results varied enough to qualify their inclusion.

Common Factors at Play

The common factors which were widely implemented included the trend of using scripts to redirect mobile-friendly users, in preference to giving visitors a choice (which is interesting, as it constitutes a double-edged sword in terms of usability). In addition, the trend of subdomains also followed a well-trodden pattern in order to be recognised easily by end users. A final example, which showcases the common factors, is the unfortunate issue that few of the websites’ code validated!

Screenshot51
Figure 76: Some websites actually generate their mobile layouts using automated tools like Mobify52

Models for Other Genres

Expanding this study across a different cohort of website types may have varying differences as to how trends are implemented. Examples include the increased use of CSS3 and “flourishes” in portfolio websites, a reduced number of mobile apps on small business websites, and increases in the amount of required authentication if the study were applied primarily to social networks. In addition, if a website is more content-focused (like Smashing Magazine), an increase in file sizes will be an obvious side effect.

Screenshot53
Figure 77: Professional designers such as Simon Collison54 may use CSS3 media queries to account for display sizes

Potential Improvements

Taking this study forward, improvements could be made. While the websites were tested using a range of real mobile devices including an Apple iPhone4, a Blackberry device, a Nokia device, a phone using WinMo, and a couple of phones using Android, a greater level of compatibility could be established if an increased number of devices were used (excluding emulators). In addition, a larger range of websites may boost the general accuracy of the results (such as if all 1,000 websites were tested).

Screenshot55
Figure 78: Additional studies could be undertaken on particular niches, like newspaper websites. Example: The Guardian56.

The Future of Mobile Design

As interesting as these results are, hopefully they will inspire you not just to follow design trends, but to seek them out. While the Web may still be in its infancy, mobile design is literally only a few years old. This means that trends will likely evolve ever more rapidly, as more usability studies and additional research are carried out to determine how user needs are being catered for. The future of mobile Web design is an up and coming industry, and we need to pay it plenty of attention.

As an increasing number of handheld devices appear (with different renderers and viewport sizes), the way we design is being affected by frameworks like jQuery, the advancement of standards such as HTML5 and CSS3, and the way applications are gradually being pulled toward the cloud. While this study showcases that rudimentary trends exist for mobile designs (such as single column layouts), it will be an interesting next few years as more designers account for the booming mobile audience.

Buy our eBook “Mobile Design For iPhone And iPad”!

Screenshot57

This article is a free sample of our new eBook Mobile Design For iPhone And iPad58 (just $9.90). This eBook presents articles on professional mobile design for the iPhone as well as the iPad, including studies of trends in mobile design and guidelines for the development of mobile web pages.

These articles are a selection of the best from Smashing Magazine in 2009 and 2010, dealing with mobile design for the iPhone and iPad

The authors are: Alexander Dawson, Alexander Komarov, Cameron Chapman, Jen Gordon, Jon Raasch, Kim Pimmel, Luke Wroblewski, Marc Edwards, Michael Flarupp, Nick Francis, Rachel Andrew and Steven Snell.

The eBook is available in PDF, ePub and Mobipocket formats.

(rs)

↑ Back to topShare on Twitter

Alexander is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business (HiTechy) and writing, he spends time in Twitter, SitePoint's forums and other places, helping those in need.

  1. 1

    Thanks a lot for such a kewl article that took 65 hours of intensive preparation. :D This will be a lot useful for us in the future. Thanks again.

    0
    • 2

      Vitaly Friedman (editor-in-chief of Smashing Magazine)

      December 2, 2010 4:17 am

      Thank you for your kind words — it means a lot to us.

      @all: By the way, the “65 hours” remark refers to the tweet we’ve sent out just before publishing this article.

      0
  2. 3

    Very good “state of the art” article. Guys, things are going to change, so it’s time to change your hands according to new standards. Love this article — very useful. Thanks!

    0
  3. 4

    Again a good one.

    On the topic I would say, mobile designing may be the future but there is less place for creativity (as opposed in case of computers). Displaying ads and still not looking cheap will be hard to achieve in mobile devices (publishers will earn less, no. of ads will decrease). And also as pointed in one of your previous articles the designing part will be less (apps).

    0
  4. 5

    What I don’t quite understand is, that with the pretty much full fledged mobile browsers that people use nowadays on the iPhone/Android/Win7 mobile phones, is there always an actual nééd for these mobile sites?

    Some sites that I really love to use because of how they look (Tuaw.com and Smashingmagazine.com for example) forcibly push you towards a mobile site if I use my iPhone… very annoying, since it’s such a barebone “design”. With the current smartphone screen-real estate, I feel much happier using a full website where I can zoom in and out of articles, than using a minimalistic “plain” mobile site that I can’t get out of. With some sites it’s very understandable to have a mobile version, such as Ebay or Amazon for example, but “normal” sites like Smashingmagazine, Tuaw, Engadget and Wired for example, it’s just so much nicer to see the full glory of the website that you’re used to visiting, on your beautiful smartphone :)

    0
    • 6

      Your reply makes a fantastic point as to why giving the visitor a choice is so important, since I think I would tend to disagree with you.

      Most of the time, I am so thankful that I can read a “Smashing” or “A List Apart” article on my phone without having to bother with all the additional clutter. I enjoy not having to pan and zoom to get to the content I want.

      0
  5. 7

    “A final example, which showcases the common factors, is the unfortunate issue that few of the websites’ code validated!”

    Why is this unfortunate? Considering 8 of the first 10 www sites on your list don’t validate (and still manage to have millions of visitors and revenue dollars), I don’t see an issue. Validation holds little weight in my eyes, especially as some of the standards they are holding me to are 10-15+ years old. As long as the site works, validating is a waste of time IMO. The time spent making sure the site validates could be better used trying to improve the overall usability of the site. I think it makes more sense to spend your time improving things that the public might actually see and benefit from, we all know they could care less about validation.

    Don’t get me wrong, validation is great when learning the craft or when you have an issue you just can’t seem to troubleshoot on your own. But, it’s hard to argue it’s necessity when some of the worlds largest .com’s fail validation. (amazon has 250-500 errors ((number changes with each validation test run)), but yet they must be doing something right)

    0
    • 8

      While I agree that validation isn’t technically important, I think it does showcase a level of attentiveness to a site and (perhaps in failing cases) an emphasis on how code degrades over time (and could potentially give problems in the future). Perhaps using “unfortunately” wasn’t the right word to use (and I agree that validation for validation’s sake isn’t an ideal) but as a general indicator it does seem to reflect the current state of the web and for semantics sake I’ll continue to see validation as a positive act.

      PS: I don’t really see comparing validation against earnings or success as a valid point. Nigerian scammers manage to trick people into making them rich, yet it doesn’t mean they have a quality product. The case for validation isn’t about getting rich, it’s about a quality build (whether the consumer notices or otherwise).

      0
      • 9

        “The case for validation isn’t about getting rich, it’s about a quality build (whether the consumer notices or otherwise).”

        While true to an extent, the definition of “quality” will vary from one person to the next and is really an opinion. I’m sure Amazon thinks they have a “quality” site, even if it fails validation miserably. When building a site for a client, do they really worry about “quality” in regards to validation or are they looking at the bottom line (their bank account/customers?)

        I’m not disputing the fact that it would be nice for every site to validate and be as future proof as possible, but really, at the end of the day, does it really matter? As long as the client and their customers are happy and the site functions properly, I think the goal has been met.

        0
    • 10

      Looking at validation on the most popular sites in the world is completely futile. Many sites are purposefully non-valid in order to create a smaller page and save load time. For example on the google homepage they don’t close some of the tags nor quote tag attributes.

      @Alex, the loading time graphs in the article are clearly bogus – 7% of sites take longer than 10 secs to load but only 6% take longer than 3 secs? Wha??

      Finally, you mentioned the Smashing Mag mobile site so I tried it out – it’s completely unusable compared to the regular site! The font size is so damn small… I have better luck on the desktop site zoomed on the content column.

      0
      • 11

        Sorry but I can’t agree, when I validated the sites I did examine the types of failings that were occurring. While it’s clear to see that Google (in your example) strategically removed markup to reduce file sizes, in every case I could find the issue was not that of size reduction, it was poor semantics (such as block elements within inline). I do accept that there may be reasons for having a site not validate and in some of those cases I did actually allow a pass (if for example the issue was simply that of using proprietary code for CSS3 support). But your claims do not match the (actually quite bloated) markup in many of the mobile sites examined (not to mention how so many of those failing sites used images extensively and accounted for some of the largest file size ratios in the results).

        Regarding the loading times I apologise, you were correct that something had gone slightly wrong with that particular result. Upon seeing your post I went straight back to the raw data, identified the issue (it was my math) and have reissued the results graph (to what it should be). Thanks for letting me know!

        0
        • 12

          I see your point about the validation, thanks for explaining. I was always completely baffled by Amazon’s level of non-validation (644 errors, 122 warnings on the homepage alone?!)

          I think another part of it is compatibility. Sometimes it’s simpler to use an unofficial tag, attribute or value in lieu of CSS, for larger cross-browser compatibility. For a huge website like Amazon they are probably more worried about that than using semantic HTML.

          0
  6. 13

    Slightly annoyed by the title of the book ‘Mobile design for iPhone and iPad’, what does seem to be a trend within our industry is iBlindness. Surely the principles that apply to mobile design transcend the device.

    0
  7. 14

    I want to say a thank-you for the research put into this article. I imagine it was quite an undertaking, and I’m sure there’s a lot of data gathered. However, I am having difficulty understanding the results of the tests as presented here.

    The text is written to require graphs to explain the specific points brought up, and the charts don’t necessarily answer the points–or attempt to answer the points in a very non-specific way. For example, the average load time section shows three graphs which leave a lot to interpretation and questions about load times. On the other hand, one bar graph showing all 100(?*) load times would show the same points in one graph that may better represent the data as a whole.

    Another example is using non-specific labels to explain a point, such as Figure 58: “The number of websites using a small, medium, or large number of links on the front page.” How many links are considered a small amount? Again, one graph showing the data for all 100(?*) sites ordered from fewest to largest would explain better how many sites use each category. Plus, further insight may be gleaned from that unified graph if, say, it appears that many sites share the same number of links, for instance.

    I would recommend researching some data visualization resources to aid in future articles of this type. It would lead to some great discussion!

    Is there a chance that the anonymous data could be released so the community could find more insights?

    (*The count of sites from the data in the graphs, does not always equal 100.)

    0
    • 15

      Chris, I can help with the points raised (and I’m glad you liked my research).

      Regarding why some results did not list a complete 100 values (equal to the tested), a number of sites featured in the study didn’t provide a mobile orientated site of any kind (some even blocked mobile devices). For those sites in particular, as there was no measurable (useful) implementation to test against (that was orientated or optimized for such devices), their results became a Non-applicable (N/A) variable (and were discounted thereby making the analysis of the results whom were viable count for more). There were a few other variables at play, but in as many circumstances as possible the remainder made up a “N/A” value – to avoid degrading the actual implementations.

      Regarding the other elements:

      In the case of links the ratio between small, medium and large did factor on the overall length of the page. But in general (as most mobile sites were of a similar length) the small made up between 1-25 anchors, medium between 26 and 50 anchors and large over 51+. In the case of images the same applied but as images have a greater visual impact on a site, the ratio of small was 1-5, medium as 6-10 and 11+ images made equated to large (based on presence rather than image size). In addition, the click region was registered as small, medium or large dependant on the visible comparative against other sites being measured (I screenshot the cases to gauge their comparative size).

      Regarding the load times, they were measured in seconds (to two decimal points).

      PS: I agree that perhaps the ebook was unfortunately titled, my research took a little over two months to put together and I ensured that testing was spread equally between devices and how those sites were rendered (both on physical handsets and emulators) so the data should be *good* (and I hope useful) no matter what environment you use!

      0
  8. 16

    One good thing that will come out of html5 being widely accepted is the user will have more control over what they see in the browser. e.g. for blogs I can set the user agent to show only the article and not all the ads and extra information which I just wouldn’t click on anyway on a mobile device.

    This will most likely display a readable website for the users browsing on smartphones without needing to zoom.

    0
  9. 17

    I thin at this moment is better dont have ads in the mobile versions, because is one simple way to catch maybe new users, or to gain current users, for example i use all days smashing magazine mobile version, but at this time dont work very well on mini opera 5.1 because the text dont colapse to screen resolution… if you whant to make better for ipad make like all people do… auto works fine

    0
  10. 18

    Just looked at the mobile version on my iPad… The Text Size is much too Small…

    0
  11. 19

    I just purchased the ebook after reading this article, but haven’t received it yet. That was extremely surprising. Had you guys been SEO “experts”, I’d have the book plus a free t-shirt and discount coupons by now. Extremely surprised!

    0
    • 20

      Edwin, please get in touch with our support team (see your confirmation e-mail) or try to login in the shop and download it. It should be working!

      0
  12. 21

    Surendra Vikram Singh

    December 5, 2010 11:09 pm

    Thanks for such a nice article!…..

    How to redirect a normal web url(http://www.example.com) to mobile url(http://m.example.com) if opened on a mobile device……

    0
  13. 22

    Surendra Vikram Singh

    December 5, 2010 11:11 pm

    How to redirect any website web url(http://www.example.com) to mobile url(http://m.example.com/) …..Thanks in advance

    0
  14. 23

    An amazing and in-depth look at mobile web statistics.

    I’ve never seen a article as comprehensive and informative as this one. Great job.

    It’ll be extremely interesting to see mobile web progress as it becomes a more accessible technology.

    0
  15. 24

    I’ve run into a lot of mobile sites lately that just don’t provide enough information. There is a challenge when you have to condense a site down for a small screen, but, I don’t think that means you should leave content out of your mobile version, you just have to be a bit more creative and thoughtful with navigation/ui. This is a problem for iPad users especially when they go to browse on Safari and the moblie version has restricted functionality on a slightly larger screen.

    0
  16. 25

    Its 100% true that the future of mobile Web design is an up and coming industry, and we need to pay it plenty of attention. anyway nice and very informative post.

    0
  17. 26

    “The percentage of overflow-based scrolling” : 100% and 0% ? No mistake ?

    0
  18. 27

    Wow – in depth article! We are currently looking at specific mobile collection on our microstock website – pixmac.com so the ‘Golden Image Ratio’ is useful – I’ve sent this on to my developers. thanks.

    0
  19. 28

    The link to the eBook is a 404.

    0
  20. 29

    Many sites indeed used multiple subdomain’s or TLD’s to redirect users to the same location. My guess would be that this is for compatibility reasons, though the variation of mobile orientated paths was particularly interesting for me (as to how diverse it was). In addition, a few sites offered both traditional WAP-WML and feature rich HTML/CSS sites (on different TLD’s) to allow for cross device support. Some even had an iPhone specific URL in addition to a traditional mobile site – taking advantage of device specific features!

    0

↑ Back to top