Mobile Web Design Trends For 2009


Web designers know that the industry involves plenty of change, and continuous adaption and development of skills is required in order to stay up to date. In the past few years, one of the biggest areas of change has been the amount of Internet users who are accessing websites via phones and mobile devices. As a result, Web designers have a growing need to be educated in this area and ready to design websites that accommodate this audience.

Because designing websites for mobile devices brings some unique situations and challenges into play, the subject requires a strategic approach from the designer and developer. In this article, we’ll look at the subject as a whole, including current trends, challenges, tips and a showcase of mobile websites. Plenty of helpful resources and articles are also linked to throughout the post, so if you’re interested in learning more about designing for mobiles, you should have plenty of information at your fingertips.

1. Simple options

One of the most intriguing things about mobile websites is the scaled-down options that are available to visitors. The mobile home page of Digg1, for example, contains only 10 simple headlines and links, a log-in link and a few very basic navigation options. When it comes to mobile websites, simplicity is key. Because of the lack of space on the screen and Internet connections that are often slower, it’s important for visitors to have access to what is most crucial, and as little else as possible.


In an age of crowded pages, the simplicity of mobile websites can be refreshing. What’s important is there, and what is most likely excess gets cut out. The simple options that a user has can make a mobile website much more usable than it would be otherwise, as long as the options allow for actions the visitor wants to take.

2. White space

White space is an important part of any design, and it’s something that’s usually a challenge in Web design because there is a desire to get as much as possible in front of the visitor. White space becomes even more of a necessity in mobile design because the typical screen size is so much smaller. A jumbled website would be very user-unfriendly and very difficult to pull off in the mobile environment.

As you browse through the websites shown in the gallery further down in this article or in real-world scenarios on your own mobile device, you’ll find that many websites include ample white space, especially the ones that are helpful and easy to use.

3. Lack of images

As high-speed Internet connections have become more common in recent years, designers have been able to take more liberties with things like bandwidth-hogging video and images. The average visitor on a desktop or laptop wants to see a visually engaging website, and, as a result, images are heavily used. However, when it comes to mobile design, excessive use of images often does more harm than good.

There is a great variety of speeds of mobile Internet connections and of pricing plans for access. Visitors are more likely to be slowed down or concerned with use of their resources when they’re on a mobile. Additionally, the size of the screens can make many images difficult to see and content harder to read. For these reasons, it’s very common to see minimal use of images in mobile Web design.


As a growing number of mobile users move to smart phones with larger screens and better connection speeds, more opportunity exists to use images. However, because there is still a large percentage of users who are not using these devices, many mobile websites still avoid images when possible.

4. Sub-domains instead of .mobi or separate domains

When the .mobi top-level domain (TLD) first became available, a lot of buzz surrounded the news. While some websites use .mobi for mobile versions of their websites, it is currently more common to see companies use a sub-domain or a separate folder on their primary domain. There are multiple issues a company must consider when making this decision, but one of the major benefits of using a sub-domain is that it keeps everything on one domain, rather than spreading things out and potentially confusing visitors.

You’ll commonly see mobile versions of websites at such addresses as,,, and other ones along these lines. Some actual examples are m.twitter.com4, mobile.washingtonpost.com5 and Of course, there are exceptions to this trend, but as you look at the mobile versions of major websites, you will see more sub-domains than .mobi TLDs.

5. Prioritized content

Because of the simplicity of these pages and the general lack of many options, the content displayed is highly prioritized. One thing you may find surprising when viewing mobile websites is how much of the content is prioritized for the visitor. Of course, all websites should be user-focused, but because most websites are run commercially for business purposes, there are often elements that aren’t necessarily important to visitors, such as banner ads. While advertisements have largely become an accepted part of the Internet, most mobile websites are ad-free. The content available on a mobile website is typically of the highest priority to the average mobile visitor, not the company, although in the end the company benefits by having a more usable website.

You can see an example by looking at the mobile version of The Onion7. Like most news websites, TheOnion.com8 does have ads with its stories (although many are internal ads). The mobile version, however, is ad-free.

The Onion9

Another example of prioritized content and simple options can be seen on Best Buy’s mobile website10. The only options here are for a product search and store locator (a phone number is also listed to allow customers to place orders). The logic here is that visitors who are accessing the website on a mobile device are probably on the go and probably have something very specific in mind. Maybe they’re looking for a store close to their current location to buy a product. It’s less likely that a mobile visitor would be interested in simply browsing the website, so the most important options for this visitor are presented, with nothing else to get in the way.

Best Buy11

Common Challenges in Designing for Mobiles

Of course, Web design for mobile devices brings its own unique set of challenges that designers must overcome to create a successful mobile website. If you’ve attempted to design for mobiles, these were probably some of your most significant challenges.

1. Variety of screen sizes

Although Web designers are used to dealing with varying screen sizes and the resulting issues, mobile design presents this challenge in a bit of a different way than dealing with different-sized desktop monitors. Most designers are comfortable with the challenges that arise from various screen resolutions on desktop monitors, but if you haven’t worked with mobile design before, it can be something yet more complicated that you need to overcome.

Because mobile technology is always changing, screen sizes are changing, too. Fortunately for designers, modern mobile devices typically have bigger screens and higher resolutions than those of a few years ago, but of course those older phones are still in use.

While we’re on the topic of mobile screen sizes, there are two excellent articles from April of 2008 at Sender 11: Mobile Screen Size Trends9612 and More on Mobile Screen Size Trends13. The results of the study behind these articles show that 240 x 320 (a.k.a. QVGA) should be the standard for mobile development. Many newer mobiles and smart phones have larger screens, but smaller ones are largely a thing of the past.

The graph below shows the findings of the report, which is close to a year old at this point. With the rise in popularity of the iPhone and its competitors, the most recent numbers most likely favor larger screens even more.

Mobile Web Trends14

For more interesting details on the study and other helpful charts and graphs, please see both15 articles16 at Sender 11.

2. Lack of understanding

One of the biggest challenges that many designers face is just the intimidation of dealing with a new aspect of design. If you haven’t considered mobile browsers and visitors in your previous design work, it’s most likely not something you feel comfortable doing without some research. Because mobile browsers behave somewhat differently than desktop browsers and because the environment of its users is not the same, the designer needs to gain some understanding and familiarity. Through the information and resources presented in this article, you can easily get started with a general understanding of the mobile Web, if you don’t already have experience.

3. Rapid change

Like any other technology, rapid change is a constant. Of course, Web designers need to stay on top of the industry in general, and the mobile Web is no different. As technology and trends continue to change, the mobile Web will evolve accordingly. The challenge of change isn’t really anything new to designers; the mobile Web just presents another area in which designers need to stay up to date.

4. Testing challenges

One of the most significant challenges in designing for mobiles is the wide variety of phones in use. While designing for desktops brings its own testing challenges, with its various browsers and screen resolutions, there are more dependable ways of testing these items at the moment. On the mobile Web, however, many of your visitors will likely be accessing your website in an environment that you were not specifically able to test.

There are, of course, some things you can do so that a mobile website is tested as well as possible. To start with, the simplicity of mobile websites in a way makes the testing process easier because there is less that can go wrong. With a careful design and some well-planned testing, it’s possible to be fairly certain that a website will be displayed properly and, more importantly, usable on the vast majority of mobile devices.

At the end of this article, you’ll find links to a number of helpful resources for testing, but we’d like to point out a few here as well. First, the Web Developer Toolbar17 has some very useful features for testing a website for mobile users. Because CSS and images may not be enabled when a mobile visitor is on your website, you can use the toolbar to disable both and see how the website will appear. While this does not exactly replicate the experience of visiting the website in a mobile browser, it can help identify potential problems in the way content and navigation is displayed.

Another helpful testing resource is the Opera browser18. In the Opera toolbar, go to “View” and select “Small Screen.” This will display the website in a very narrow window, similar to what would be used on a mobile device. Additionally, you can use the Opera WebDev Toolbar19 to view an unstyled page by clicking on “Display.” By viewing the page in the small screen with CSS turned off, you can get an idea of how mobile visitors may experience the website. The screenshot below shows the Smashing Magazine front page unstyled in the small window.

Smashing Magazine unstyled and small

5. Deciding on what is essential

If websites are to contain only what is most essential, the website owner or designer will have to determine accurately what content is most important. This may seem pretty simple, but taking a website that’s loaded with content, images and maybe even video, and weeding it down to just the essentials can be quite a challenge. Another aspect to this issue that must be considered is the status of the average mobile visitor. What are they doing? Why are they accessing the website at that time? What are they likely and unlikely to have any interest in? Keep in mind that the goals of mobile visitors are often vastly different than those of visitors sitting at a desk.

Considerations for Mobile Design

Now that we’ve looked at some of the current trends and challenges in designing for mobiles, let’s examine some specific issues that should be considered by designers during the process.

1. Clean, semantic markup
The best thing you can do to lay a solid foundation for a usable mobile website is to incorporate clean and semantic markup. What you may be able to get away with on a traditional website may cause significant problems on a mobile website. Clean markup will help ensure that the browser is capable of properly displaying the website, and it will help give visitors a pleasant experience, with no unnecessary difficulties.

2. Separation of content and presentation with CSS
Alongside clean, semantic markup is the need for the separation of content and presentation. Mobile visitors are much more likely than desktop visitors to see a website with images and CSS disabled. The most important thing for these visitors is to be able to access the content and links: presentation is secondary. A website that uses clean, valid markup, with CSS to separate the presentation from the content, is off to a great start as a mobile website.

3. Alt tags
Because it’s likely that some visitors will not be able to see images on the website (or will choose to disable them), alt tags are extremely important for usability purposes. Of course, alt tags should be used anyway, but it’s even more critical for mobile visitors.

4. Labeling form fields
Like alt tags, form field labels help make a website much more usable for mobile visitors. Imagine trying to use a form without knowing what is supposed to go where. Simple details like alt tags and form field labels can make a big difference this way.

5. Use of headings
With inconsistent and often limited styling of text on mobile browsers, headings become more significant. Mobile browsers are less likely to style text exactly how you would like it to be, but h1, h2, h3 and other such tags generally help make certain text stand out and build the structure of the page from a visitor’s perspective.

6. Avoid floats if possible
Even if a mobile browser correctly displays a website that uses floats for layout, it’s unlikely the website will look good on a small screen. Usually the website will be more usable and look less awkward without floats altogether and with content simply stacked up.

7. Reduce margins and padding
Most likely, your mobile website should have smaller margins and padding than your main website has for traditional visitors. Of course, this depends partly on how much of a margin and padding your website currently has, but very large amounts can make the layout awkward.

8. Pay attention to navigation
Most websites have a primary navigation menu very high on the page. This is helpful on mobile websites as well, but generally, mobile navigation options are scaled down. Provide only the most relevant links, and, if possible, give visitors an easy way to access the other navigation items.

9. Consider Color Contrast
Because mobile screens may not have the same appearance as desktop or laptop monitors, make sure the background and text colors provide adequate contrast so that the content can be read easily.

Sitepoint’s Designing for the Mobile Web

In March of last year, Sitepoint published an article, Designing for the Mobile Web20, by Brian Suda, that provides an excellent point of reference on the subject. In the article, Brian breaks down the process of designing for mobiles in seven understandable and digestible steps. The article is useful enough to restate the main points here.

1. Don’t Mix Up Your Markup

For most websites, we can ignore WML and make use of the markup language with which we’re probably much more familiar: XHTML.

2. Know Your Phones

We must cater not only to different screen sizes and resolutions, but to different shapes. From short and long rectangles to tall and skinny ones to perfect squares, the mobile world contains a rich tapestry of variation that almost makes you want to pull your hair out!

3. Target the Right Customers

Traditional website customers are most likely sitting at a desk facing a large monitor that has a decent resolution. Visitors who are browsing your mobile website are unlikely to be in the same circumstances. They may be waiting in line, riding on the train or bus, running to the departure gate or lost in an unfamiliar town late at night and trying to get somewhere.

4. Publish the Bare Minimum

While the concept of having only one website, and simply styling it differently depending on the medium the visitor is using, is popular with many standardistas, a separate mobile website is required to deliver an optimized experience for mobile users.

5. Choose a Great Domain Name

When deciding on a domain name for a mobile website, the colleagues and companies I’ve worked with have always used a sub-domain. Creating a sub-domain is the easiest of the options to set up (you already own the domain), it’s the cheapest option (there’s no need to register the .mobi), and it means you avoid having to spend hours tweaking the server (and potentially messing up normal traffic).

6. Validate Your Markup

Mobile browsers are much less forgiving than desktop browsers. A browser running on a mobile device generally doesn’t have the luxury of a 2 GHz processor and 100 MB of disk space. Therefore, you must check, validate and recheck your markup, time and time again.

7. Test, Test, TEST!

Testing your website with a Web browser on a desktop computer can get you only so far in terms of simulating the mobile experience. There are many elements of mobile device usage that can’t be replicated accurately in this way.

Brian’s article is an excellent starting point for those who are new to designing for mobile devices, and it’s also a great resource to have handy down the road when you want to check your work to make sure you’re doing things the right way.

After all this talk of mobile websites, let’s take a look at some screenshots of examples. Many of these screenshots are from Mobile Awesomeness21, a gallery of mobile websites. Those that are from Mobile Awesomeness are linked to the relevant pages there, many of which contain additional images.

New York Times22

New York Times23







Bank of America30

Bank of America31







Washington Post38

Washington Post39







Circuit City46

Circuit City47







Food Network54

Food Network55

The Onion56

The Onion57







Best Buy64

Best Buy65

Testing Tools for Mobile Web Design

As with any other type of Web design, testing is a big part of the process. However, testing websites for mobile devices brings additional challenges, and fortunately, there are some tools available that were created especially for these purposes.

W3C mobileOK Checker 66

W3C mobileOK67





Openwave Phone Simulator72

Openwave Phone Simulator73

Opera Mini Simulator74

Opera Mini Demo75



Blackberry Simulators78

Blackberry Simulators79



For more information on mobile Web design, please see the articles listed below. We’ve also listed some additional helpful resources.




  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100

↑ Back to top Tweet itShare on Facebook

Steven Snell is a Web designer and blogger. In addition to maintaining his own blog and writing for a number of other top design blogs, he also manages an online shop that offers premium graphic design resources.

  1. 1

    hi, thank for saving of our lives.


  2. 102

    Is there a 2010 article yet?

  3. 203

    Thanks for the information shared here. that was an interesting and informative. I had a good experience by participating in the Adobe Summit in 2009 which features the latest developments on the Adobe Flash Platform that is of utmost importance to both developers, as well as designers.. I learnt lot of new technologies in Adobe. And I am planning to attend 2010 edition as well. I found the information about the conference from

  4. 304

    Great Article… Can anyone tell me more organizations like Netbiscuits which provide a platform for mobile website creation. Please email me at batraankur46


  5. 405

    Great article. Thank you for sharing.

    I just wanted to share our latest beta release: Our Automated Web-to-Mobile Technology allows you to convert your blog to a mobile compatible version “on-the-fly”. Your converted blog will reflect any changes made to your website or blog instantly with our continuous synchronization technology on

  6. 506

    A-1 Mobile Web Design

    September 20, 2010 7:39 pm

    This article is an answer to prayer. I’ve been trying to succinctly explain this to my clients, so I will share this article with them. Thanks!

  7. 607

    I rate this article a 10 (out of 10) because it is more of a reference resource than a plain article. Truly excellent job!

    I’d like to add this iPhone simulator resource to the mix, I use it at A-1 Mobile Web Design, it can be found at Testiphone iPhone Simulator.

    I hope this contribution will be accepted. Thanks.

  8. 708

    The biggest challange on mobile web design is testing. Definitely.



  9. 809

    Pablo Echeverri - Graphic Design

    October 28, 2010 11:35 am

    Very complete post.

    I know of a page with some more designs:

    There is also a company called cantoni that has a sort of directory.
    Envato also launched a mobile tuts website. Very helpful for designers and programmers.

  10. 910

    Several of the points related with this blog post are generally beneficial nonetheless had me personally wanting to know, did they critically imply that? 1 point I have acquired to say is your writing experience are excellent and I will be returning back for any brand-new blog publish you arrive up with, you may probably possess a brand-new supporter. I book marked your blog for reference.

  11. 1011

    Very good post-
    With lots of information and links. I got a real good idea just what works (and looks) best on cell phones. The “examples” really helped me.

    I’m just leaning about the mobile market and wondered about my own sites and what I should do to them. I had heard that a simple WP plugin was all that’s needed, and was looking for info on that, but didn’t seem to find that here. Maybe a future post???

  12. 1112

    Great article, I like the screenshots of the sites.

    If you are looking for a list of high quality websites that are optimized for mobile devices (Iphone, Ipod touch, Blackberry, etc) please take a look at my new mobile sites directory.

  13. 1213

    Helpful article, but I could’ve done without the nasty stuff from “the Onion”

  14. 1314

    Out of my examination, shopping for electronic products online may be easily expensive, although there are some tips that you can use to acquire the best discounts. There are continually ways to locate discount promotions that could help make one to buy the best consumer electronics products at the smallest prices. Good blog post.

  15. 1415

    It’s true that the simplicity of these mobile pages and the general lack of many options, the content displayed is highly prioritized. One thing you may find surprising when viewing mobile websites is how much of the content is prioritized for the visitor. Of course, all websites should be user-focused, but because most websites are run commercially for business purposes….There are some web developers who personally create mobile atom sites for their websites to make it more compatible for mobile visitors.

    Post Graduate Diploma in Education

  16. 1516

    Straightforward and well crafted, ty for the post.

  17. 1617

    Thanks for the excellent article..

    I got a site which contains more of mobile designs collection and gallery..

    Contains design and mobile screenshots


  18. 1718

    Great resource for mobile designers, thank you for the information. Being cyber Monday, it will be interesting to see how mobile devices are used today.

    Paul –

  19. 1819

    Simplicity and white background really attract me to a certain website. Lack of images could turn me off except if it will make the download of the website faster then I would not mind visiting that kind of website. I am glad that Walmart was included in the list of websites that you have indicated. Digg is also improved their website design but I hope more features will be accessible in the near future.

  20. 1920

    A phone is now the best way to reach customers and businesses. In this world of fast, fast and faster, the economy can only react to what’s put before it. Most business are closed minded to only having a adnormal website (laptop and desk top) they are not made for the flexible life of smart devices…Now instead of spending $30-150,000 just to convert your business to a Mobile Website, does it for just a low fee, while other businesses are closing or crashed before they can get started this company is giving away Business Opportunities.

  21. 2021

    Nice article. Pleasure reading it.


↑ Back to top