Cameron Chapman February 9th, 2010

Mobile Web Design: Tips and Best Practices

Kein Beitragsbild

Cameron Chapman

Cameron Chapman is a professional Web and graphic designer with many years...

 Sponsors love


Last year, more than 63 million people in the United States accessed the Internet from a mobile device. It’s forecast that by 2013 there will be more than 1.7 billion mobile Internet users worldwide. With those kinds of numbers, it’s imperative that web designers and developers learn optimal development and design practices for mobile devices.

For the most part you won’t need to learn any new technologies for mobile site design. But you will need to look at site design in a new way, one that is decidedly more restrictive than design for standard browsers. To work around the issues that mobile site design presents, and to get a result that is as user-friendly and useful as your standard site, some creative problem-solving skills are required.

You may want to check out the following related article as well:

Familiarize Yourself with the Hardware and Software Available

Cell phone and mobile device platforms vary greatly when it comes to operating system, screen size, resolution, and user interface. To be able to decide which platform(s) you want to optimize your site for, it would be helpful to familiarize yourself with the different available options.

The most common operating systems in use are Windows Mobile, the iPhone platform, Palm OS, Mobile Linux, Symbian OS, the BlackBerry platform, and Android (which is poised to get a lot bigger thanks to a recent deal between Verizon and Google). There are other proprietary systems specific to particular phones, such as those found on some Verizon handsets and specific brands of phones. You can estimate, based on the type of audience your site targets, which OSs your users are most likely to be using. If your visitors are mostly business users, you’ll need to optimize your site for Windows Mobile and BlackBerry devices. If your users are younger, trendier, or more tech-savvy, you’ll want your site optimized for iPhones and Android devices. In any case, ensure your site is at least usable on the majority of mobile platforms.

StatCounter Global Stats – Top 8 Mobile OSs

StatCounter Mobile OS Stats

Mobile browsers are another factor to consider. Some of the more common browsers include Safari for the iPhone, Android browser, Opera Mobile, WebOS browser (on Palm devices), BlackBerry browser, and Internet Explorer Mobile (on Windows Mobile devices). There are additional browsers in use on Nokia and on other phone brands. Some of these browsers are based on proprietary code, while others are built on WebKit (Android, Safari), Gecko (Fennec, a Mozilla browser) or other common platforms.

StatCounter Global Stats – Top 9 Mobile Browsers

StatCounter Mobile Browser Stats

Finally, you need to consider your site visitors’ most common screen size and resolution. Your site should work on the widest range of mobile devices that your visitors might be using. Common resolutions for standard cell phones include 101×80 pixels (many Sony Ericsson phones), 128×128 pixels (some Samsung phones), and 120×160 pixels (many Motorola phones). For smartphones, there’s a lot more to work with. The iPhone has a 320×480 pixel screen; the HTC Touch Pro has a 480×640 pixel screen; the Palm Pre has a 320×480 pixel screen; the BlackBerry Storm has a 360×480 pixel screen; and the HTC Venus has a whopping 800×480 pixel screen. Many of these screens can comfortably display a standard website.

Simplify!

Your mobile site, in most cases, should be simpler than your standard site. The only exception to this is if your standard site is already very minimalist. Eliminating graphic elements from your site is usually an effective way to optimize its display on a mobile device. Look for ways to simplify both the design and functionality of your site. This might mean redoing your menus, eliminating images, breaking up text over multiple pages, or otherwise re-working your site’s layout and functionality.

Examples

A List Apart Mobile

A List Apart

The Onion

The Onion

Amazon.com

Amazon Kindle Store

Use Valid Markup

Considering the variety of potential operating systems and browsers from which people might be accessing your site, web standards become even more vital. Standard browsers are, for the most part, very forgiving of bad code, but with a mobile browser you often won’t get that kind of leeway. Make sure your code validates is as clean and minimalist as possible.

Give Users the Option of Visiting the Standard Site

Depending on what kind of device your visitors are using, they may want to just use your standard website. This is particularly true with a lot of the better smartphones and the iPhone, the latter of which does an excellent job of rendering standard websites without issue. Give your mobile visitors the option of visiting the standard site, even if it’s just through a link in the footer (where most of us are already predisposed to looking). You could additionally give them the option to come back to the mobile site without having to use their back button.

Examples

Geek Squad

Geek Squad

Julian Andrade

Julian Andrade
Weather Underground

Weather Underground

Use a Separate Mobile Theme

While optimizing your main site for mobile use sometimes makes sense, it’s often easier to use a separate mobile theme, which can be done on most CMSs by changing the CSS for mobile devices. A dedicated mobile theme means you can really take into account how your visitors will see your site, and optimize it specifically for them. Some sites have one design optimized for regular mobile devices and another for iPhone users.

Examples

Gamespot

Gamespot

Marmalade on Toast

Marmalade on Toast

Watchmen

Watchmen UK

Limit Scrolling to One Direction

It’s really annoying to have to scroll in multiple directions on a web page when using a standard browser. That doesn’t change when you’re visiting from a mobile device; in fact, it’s worse. It’s very easy to accidentally scroll the wrong way (horizontally instead of vertically or vice versa) when using a touchscreen phone. If your site only scrolls one way, you eliminate the potential for such a hassle.

Examples

Disney

Disney

Taltopia

Taltopia

Mogreet

Mogreet

Don’t Use Pop-Ups or Open New Windows

Depending on the particular platform, popups and new windows can interfere with the browsing experience, so don’t use them. If you absolutely need something to open in a new window, make sure you alert your mobile visitors that it will do so.

Minimize the Use of Images

Use only the images you need to get your message across. A logo is fine, as are most icons. Images that are integral to the content on your site are also fine. But eliminate images that serve no purpose other than to look pretty. They generally won’t look pretty on a mobile device anyway, so why bother? And sometimes they just make your site look worse, or cause strange scrolling or layout issues if the resolution is other than what you were expecting.

Examples

Radio Paradise

Radio Paradise

Raleigh Information

Raleigh Information

Topix

Topix

Optimize Your Navigation

Many mobile devices have touchscreen interfaces, so try to design with that in mind. That means making the clickable area around your links a little greater, making buttons larger, and putting more space between links. Trying to click on tiny, barely-visible links is a real pain, and having to zoom in every time you want to click on something doesn’t make it much better. To improve these navigation issues, many sites use a completely separate mobile navigation design, optimized for touchscreens or non-mouse input devices.

Examples

American Modern Insurance

American Modern Insurance

1M Creative

1M Creative

Daily Horoscope

Daily Horoscope

Don’t Rely on Flash or JavaScript

Not all phones and mobile devices support Flash or JavaScript. Even if they do, there’s no guarantee it will be the most recent version. And forget about Flash if your visitors are using an iPhone. Make sure all the important information and functionality on your mobile site is in plain (X)HTML/CSS. Otherwise, you risk a large portion of your visitors being unable to access important content.

Include as Much Content from Your Standard Site as is Practical

How many times have you gone to a favorite website from your phone and then realized you can’t get to the part you wanted to visit? It happens all the time. Include as much of the original site content as possible on your mobile site. In addition to making it available, make sure the navigation route to get to it also remains relatively unchanged.

Examples

The Dieline

The Dieline

Yahoo! Mobile

Yahoo! Mobile

Volkswagon

Volkswagon

Make Sure Redirects Work Properly

Don’t just send mobile users to your home page. There’s nothing more annoying than clicking a link, either in search engine results or from another website, and having it redirect to the homepage if you’re on a mobile device. If your site automatically detects whether a visitor is coming from a mobile browser, make sure it’s set up to send that visitor to the link they were trying to visit, otherwise they’re likely to leave and never come back.

Further Resources

Cameron Chapman

Cameron Chapman is a professional Web and graphic designer with many years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.

132 comments

  1. Thank you for a great article. “Don’t Rely on Flash or JavaScript” is also one of the advices I give to my designers. I recommend reading “Mobile Web Best Practices 1.0” by w3c: http://www.w3.org/TR/mobile-bp/ It covers many areas including design, development and accessibility.

    1. “Don’t Rely on Flash or JavaScript”, but offer it to those, who can handle it. To get the most out of a handset is also part of a good user experience. You just need to know the device and its specifications.

    1. But in your phone the full site may take longer time to load and you may have to scroll a lot, I feel that would add to my frustration. A well developed mobile site should have the information that customers want.

  2. Somehow I see that the battle will be between iPhone, Android and Symbian. RIM, too – most likely.

    We’ll see some beautiful web pages designed for mobile phones in 2010, for sure.

  3. These posts couldn’t have come at a better time. Incredibly informative and helpful.

    The examples are great too.

    @ESN thanks for the “Mobile Web Best Practices 1.0” link :o)

    Cheers!

  4. I have been betting at Apple and Goldman Sachs mainly. The recent Goldman drop helped me make a lot money with my puts but I retained Apple for the longer term, I think it has longer term potential. Many thanks for your revealing articles and please wirte more.

  5. The reason for this is that human beings are sensory creatures. A simple depiction of a tangible book makes an ebook more appealing. So, next time you’re selling something, remember the importance of tangible product designs.

  6. nice article – except for the stats. living in a non-US country, anything which puts apple near the top is hopeful at best.
    maybe take a look at the latest smartphone report from gartner:
    http://www.bloomberg.com/news/2010-08-12/nokia-loses-market-share-as-growth-in-smartphones-extended-gartner-says.html

    it paints a very different picture – symbian, RIM, android, iphone (14%), winmo.

    as always, you don’t design sites for everybody, so focus on the users and browsers most relevant to your product.

  7. Amazing!.! Bookmarked this web page that has this striking guidance. Will come back again to see if there are any updates. You, the author, are a master. Thanks

  8. My English communication isn’t so good butprobably I understand every thing. Thank u so well for that wonderful website message. I jolly be glad reading it. I believe you happen to be a superb author. At this time added your website to my favorites and will arrive back once again to ur web internet site. Hold up that magic work. I household to see more soon.

  9. This is certainly an excellent article and I completely trust what you said. I am trying to setup the Rss but I am certainly not very computer literate. Can certainly someone tell me how I can setup the RSS feed so I get notified of any new article? You should explain it in an great way as I feel getting old.

  10. I really liked your blog postt. I certainly think its essential to keep one self upto date wiith as much of information as possible. Thankss keep this blog updated. I am coming back for moree.

  11. This really is an excellent article and I completely agree with what you said. I am trying to setup the Rss feed but I am not necessarily very computer literate. Can easily someone tell me how I could setup the RSS feed so I get notified of any new article? Make sure you explain it in an clear to see way as I are getting old.

  12. uScoore meets new people online and tells them what you think about them.

    Do you have a crush on one of your facebook friends tell them on uScoore.

    uScoore helps you finding a date, in a very simple and easy way.

  13. uScoore meets new people online and tells them what you think about them.

    Do you have a crush on one of your facebook friends tell them on uScoore.

    uScoore helps you finding a date, in a very simple and easy way.

  14. I dont totally agree with what you ‘re talking about in this post, I find that you are thinking a little bit in stereotypes, but… hey, anybody has his right to his own opinion, right? :) Entertaining post tough!

  15. When I originally commented I clicked the ?Notify me when new comments are added? checkbox and now each time a comment is added I get four emails with the same comment.

  16. Took some time to go through all the comments, but I really did get something out of reading the post. It proved to become incredibly valuable to me and, I am sure. to everyone posting comments! It’s not often that you can be informed, and also entertained at the same time. I am certain you also got something out of writing this article.

  17. Hi. I wanted to thank you for the good details you have posted on your internet site. I will definitelycome back to check it out again and have subscribedto your RSS feed. Have an excellent day.

  18. Hi. I wanted to thank you for the good details you have posted on your internet site. I will definitelycome back to check it out again and have subscribedto your RSS feed. Have an excellent day.

  19. Web Design Tips

    Once you’ve decided that you require a website for your business, it’s time structure a pan. For many people, the idea of planning a web design may seem troublesome, but following the right agenda may easily assist you in creating a successful and organized web design ….
    to read more
    revolutionary-technologies.com/blog/web-designing/web-design-tips/

  20. that’s called a great source of information for doing some job. thanks for the information you provide. Web Design is the growing field in the IT World which is really very good thing but have some bad factors of this thing on some children which is not a good thing.

  21. This will be a really enceinte imagination that you are furnishing and you turn over it away for free. I bask seeing websites that begin to see the value of supplying a prime resource for free. I truly enjoyed reading your Wiley Post. Thanks!

  22. Creating a cutting edge mobile phone application is within the reach of your organization, with the help of a firm that has expertise in mobile application development platforms

  23. Thanks for the great tips! A question? Given that so many people now surf the net using wifi and 3G connections on their phones, is it still relevant to limit the use of images and javascript?

  24. Mainly, the story is in reality the greatest on this noteworthy theme. I approve with your consequences and will sedulous look forward to your next updates. With your acceptance allow me to take your rss feed to be up to speed with future stories. Thanks a million and please go on with the delightful activity.

  25. Nice list. Hopefully more designers than programmers are reading it. In my experience, it’s usually the web designers that resist and oppose usability centered ideas. They seek to glorify the site’s appearance, setting aside the user experience.When you have time you should add some AJAX based design tips and woes.

  26. I enjoyed reading through this article. I have a question though, if I want to optimize my site for iPhone do I have to change in the CSS file the size for the main column to be 320×480px and try to rearange all the content to fit within this box size?

  27. this is OUTSTANDING. Well written, logical, full of relevant examples… I am impressed. THANKS a lot, the mobile web design is a new world for us, and trying to learn enough about it so I don’t sound dumb in front of a client was crucial, and you’re making it possible.

  28. I would have loved to read your article on the proper design of websites for mobile users but unfortunately I am viewing this site on my phone and it is absolute hell on the eyes. I have to choose between microscopic text and scrolling horizontally as I read each line. I guess that I should be getting my information elsewhere.

  29. Very nice tips indeed, however there are some things that i would reconsider.
    that being trying to keep the information similar on both the normal website and the mobile version.
    This is not a good idea, as there needs rather to be a thought about what kind of information is viable in a mobile kontext, vs a stationary kontext. Science has however shown that alot of people access the web through their mobile phones even at home, when access to stationary media is available.

    Therefore i would recommend having a selection of short version information on the mobile version while linking to full site version if the user would like to read it all.
    Personally i use the mobile for the application related features while most informative pages stay on the fullversion, exept contact information, opening hours and such information that is directly related to the world you figure in.

    Also, its very intressting statistics, very different from our europe ones..

    who am i?
    16 years experience in webb, Bachelor in learning and usability for digital contexts, HCI.

  30. Thank you for the tips & tricks. I wil be starting a mobile version of my website from scratch (no CMS involved) and this post is full of good advices !

  31. grt post!!.. had a question, I have a website where registration form is very important. How should I place this form on the mobile website. Should it be a button where the user’s clicks and then take to the form/// OR should I place the form as soon as the user lands on the page..

    Thanks,

  32. Hi! I used this Mobile website builder for WordPress plugin by DudaMobile. Its great and easy to use. You can customize your mobile friendly site the way you want to. You can choose from the various drag-and-drop features such as click-to-call, mobile maps and contact forms. Or very easily use the site editor to easily change copy, add images or try out with different backgrounds, colors and fonts. Chose the best for yourself !!

  33. Great article…two points that I really took away from it is creating a different theme from the desktop version and simplifying. I think functionality is way more important over the looks (although that doesn’t mean it has to look ugly..lol). In my experience, when I’m looking for a local business on the go, I’m not really giving points to how great the graphics are as much as how easy is navigation and how fast I can get to the information to make a decision and also find the location.

    What surprises me is how many local businesses don’t even have a mobile website and how much business they are losing because of it.

  34. No matter what you do, make sure you have the following metatag on your page or you will go bonkers trying to get your fonts to scale properly. I speak from the experience of many hours lost:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

Sorry, Comments are closed...