Mobile Web Design: Tips and Best Practices
- By Cameron Chapman
- Posted in How To's
- 122 comments
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
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
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
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
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
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
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
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
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
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
- Designing for the Mobile Web
An article from Sitepoint with tips on creating better mobile websites. - Best Practices for the Mobile Web
A great rundown of technical best practices from 456 Berea Street. - Mobile Web Design: Tips & Techniques
An excellent resource for designing mobile websites. - 10 Tips to Create a More Usable Web
While not specific to mobile web design, this post from Webdesigner Depot has plenty of appropriate tips. - Eight Tips to Keep Your Mobile Website Readers Happy
A quick rundown of some usability tips for mobile web design.
About the Author
Cameron Chapman is a professional Web and graphic designer with over 6 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.
enucuzagel, 13 June 2011
bilgisayar, pc, en ucuz, laptop, notebook, monitör, tv
Hamid, 17 June 2011
where can i find, web template for mobile ?
julien, 12 January 2012
I like ThemeForest for templates, including mobile template. Most of them are $10-$20
Vishal Alimchandani, 03 August 2011
Apple iphone user interface is perhaps the best example of mobile navigation.
Great post.
Alicia Frick Laguarda, 08 September 2011
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.
ibad sha, 25 September 2011
thanks for the info . i will add this in my blog .
Sandeshaya, 29 September 2011
Thanks for usefull statistics and site information to refer.
Richard, 29 September 2011
Yea, I agree. This is good stuff for sure :)
heemhamoo, 20 October 2011
Yea, I agree. This is good stuff for sure :)
Jessica, 31 December 2011
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.
Vincent, 18 January 2012
Just found and read this article today. 2 years after publishing it still provides some nice tips. Thanks!!
Martin, 25 January 2012
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.
Stephen Alberts, 26 January 2012
Great article! Best tip here is to make it simple! Who wants to scroll around on a confusing mobile website. It kind of defeats the purpose.
Mike, 27 January 2012
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 !
Norv, 31 January 2012
Excellent article – straight to the point.
Leyton Jay, 01 February 2012
This is awesome sauce, great tips for fluffy design stuff! Everyone else concentrates solely on techie tips.