Mobile Web Design: Tips and Best Practices
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
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
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
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
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
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
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
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
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.
Mobile Web Design is fast growing trend. Take a look at this Video: jQTouch and mobile design for iPhone and iPod touch
Link: http://tinyurl.com/yjrfpnr
Six revisions: A Quick Look at Mobile Web Designs
Link: http://tinyurl.com/y8wk4mz
It sure is. Mobile Website Development is going places that we probably wouldn’t have imagined it going a few years ago.
Nice.Superb article. you could have split this up into seperate articles for an increidble series on mobile web design. The examples are great.
It´s the Future!
Don’t forget to add a back-to-the-top-link at the buttom of the page.
Great tip!
Really great examples. I’m a big fan of the designs for Geek Squad and 1M Creative. Simple, yet sophisticated. Mobile devices are certainly transforming the world of marketing! The key is simple and clear communication.
Check out this blog if you interested on some more thoughts around mobile marketing :) There is some great stuff here:
http://www.microarts.com/culture/branding-insights/2010/01/2010-year-marketing-makes-contact.php/?s=bl
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.
“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.
Don’t forget to give me the option to view the full site. I get very angry when that isn’t an option.
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.
i also created an article on how to convert website into mobile format…but this one is really in detail
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.
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!
Very Useful Article. I’ll visit sample websites.
Very good article, thanks!
To test valid markup and get suggestions on how to fix the errors you can use the free testing tool at http://ready.mobi/
I clicked on this page by searching Bing. I have found it quite informative. Thanks for sharing. I will have to visit here again!
Good article!
You might guys also be interested in source I found recently for mobile webdesign inspiration at http://www.MobileWebShowcase.com
hey thats nice, its quite useful… specially the examples u gave… awesome!
Thanks
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.
take it from me, I know a good site when I see one… Your site rocks, I think I’ll hang around a while if that’s ok with you.
nice site, did it take a long time to create?
I am amazed that someone finally got around to saying this! I wanted to say it, but was too afraid to :(, nice site tbh.
Does this work for amateur webmasters?
it really nice to know this website good to read and see.
mobile
Once your app is storyboarded, choose from the templates in the SDK and start developing. Don’t miss the YouTube tutorials that offer great guidance on using the templates.
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.
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.
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
Encuentro que no sois derecho. Soy seguro. Lo invito a discutir. Escriban en PM, se comunicaremos.
Great read. I found your site from a google search, and was glad i did. The info has helped me immensely.
thanks a lot!
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.
Nice point. I entirely agree. Well stated!
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.
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.
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.
Hmmm, I am sure think we just received a t-shirt in that has to do with this topic. That is so silly.
Hmmm, I do think I just shipped a t shirt in that has to do with this issue. That is very interesting.
Funny, I do think I just got a shirt in that has to do with this subject. That is really wierd.
Thanks for sharing it.simply awesome
Hey, I really enjoyed reading this ! Thanks for the share ! Have a nice day.
great idea , i really interested about it
I was very happy because Joined together with you and comment on the most burning issues.
that’s great article, I was confused about designing a mobile website, now I know where to start and what to do.
Thank you very much,
Keep up the good work ;)
Sorry, but I forgot to mention that I added this page to my bookmarks, it is great reference. ;)
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.
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.
Another great reference I bookmarked hehe, this is one of the better sites I came across about jQuery.. and believe me I’ve seen a lot of them! ;)
Excelente nota. Muy interesante lo que dices, muchísimas gracias!
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!
Wow, I love the “Watchmen” site…thanks for the great collection!
I have fallen in love this web site
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.
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.
great posting …! thank you !
Nicely done, I love the Disney site. By the way you have a good web blog here. Keep it up.
Perfect explanation, congrats. Learned a lot from it!
Great post and explanation. Keep it up my friend.
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.
Hi. I wanted to thank you for the wonderful facts you have posted on your site. I will definitelycome back to check it out once again and have subscribedto your RSS feed. Have a fantastic day.
Great Info – well done. I’ll be sure to pass this link around and post it on my company site. Thanks!
Thank you for the valuable information – very well done.
Great post, i think the same.
Yeah thats right! i agree with you!
hey thats nice, its quite useful… specially the examples u gave… awesome!
Thanks
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.
Hey, great channel and information you have here, keep it coming, best of luck- James
Top-notch post it is actually. My mother has been looking for this content.
A very good article. Helped me a lot while making this: http://onlyfor.mobi
What do you think? does it follow the simple rules of best practices in mobile web design?
Excellent article… thanks for sharing…
I wish I had seen this post few months ago. Really informative and guiding.
Thanks for the share.
Yes, really good source of information. Thank you very much for write up.
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/
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.
I will definitelycome back to check it out again and have subscribedto your RSS feed. Have an excellent day
Really great examples, I wish I had seen this post few months ago.
I was just thinking about that, hmm awesome I wonder. Well thanks for the post really handy, to me anyway.
I like it, this is exactly what I was looking for, hopefully there will be more of this on your website over time?
I’d incessantly want to be update on new posts on this internet site , saved to favorites ! .
Per favore, puoi PM a me e mi dica qualche altro pensa a questo, sono davvero fan del tuo blog …
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!
Which theme is this blog can you tell me, im about to set up a new site so im very curious about this one, please send me a mail.
Excellent Info… I found this blog incredibly late.. really am searching this type of blogs for my long term reference.. thanks for sharing such a nice blog.
merci! post très utile!
Hey.. I like your articles, in fact you have such a awesome site! Thanks and all the best :-)
Good one. I look forward to read more.
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
I love the design of this blog, is it a free theme or custom?
What are best sources to get various kinds of projects like web design and development, data entry, call cente?
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?
Thanks for your interesting post
Great post.
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.
Thanks! This was a very nice read. I love the simplicity of most of these designs. Thanks again for the tips, I have tweeted this!
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.
thanks for that great share. I’m searching like that post
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?
hi steven! i just used http://www.convertwebsite.com/ to optimize my websites for iOS and Android and i’m very happy about their job :) i recommend it.
Excellent tips! Thanks!
Thanks Admin Very Nice…
Currently building my first mobile website. This is super helpful! Thanks for the tips!
Covered all the bases here, I followed the same principles for The Barclays Bikes Cycle Hire App designed over the past six months for the European bank Barclays…
http://russellwebbdesign.co.uk/2011/05/04/barclays-bikes-app-for-iphone-and-android/
Keep it up, book marked as well as referenced a few buddies.
nice work …….. and great website
Thanx for sharing
Thanks for the information.
Good work.
Thanks for this great post. You help me so much
bilgisayar, pc, en ucuz, laptop, notebook, monitör, tv
where can i find, web template for mobile ?
I like ThemeForest for templates, including mobile template. Most of them are $10-$20
Apple iphone user interface is perhaps the best example of mobile navigation.
Great post.
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.
thanks for the info . i will add this in my blog .
Thanks for usefull statistics and site information to refer.
Yea, I agree. This is good stuff for sure :)
Yea, I agree. This is good stuff for sure :)
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.
Just found and read this article today. 2 years after publishing it still provides some nice tips. Thanks!!
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.
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.
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 !
Excellent article – straight to the point.
This is awesome sauce, great tips for fluffy design stuff! Everyone else concentrates solely on techie tips.
The tecniques you describe in this article are excellent guidelines for mobile websites design. But all the mobile sites you present don’t pass the W3C mobileOK Checker test:
http://validator.w3.org/mobile/
Why?
Best article about mobile web design…
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,
Thanks for such a outstanding submit as well as the critique, Im totally impressed! Keep stuff like this coming.
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 !!
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.
Excellent article, Cameron. Thank you for the attention to detail, and your exhaustive approach to mobile design.
Nice article. Great tips on how to design plan on new mobile site..Can CDN improve mobile site performance?
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"/>
Good stuff for understanding mobile websites……….