Feb 09 2010

Mobile Web Design: Tips and Best Practices

Advertisement

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

About the Author

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.

Comments and Discussions
  • App Sheriff, 09 February 2010

    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

  • New York Web Designer, 09 February 2010

    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!

  • Helen, 09 February 2010

    Don’t forget to add a back-to-the-top-link at the buttom of the page.

  • blythe, 09 February 2010

    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

  • ESN, 09 February 2010

    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.

    • Madlen, 10 February 2010

      “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.

  • Matthew Heidenreich, 09 February 2010

    Don’t forget to give me the option to view the full site. I get very angry when that isn’t an option.

    • Dalilah Green, 03 May 2011

      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.

  • PelFusion, 10 February 2010

    i also created an article on how to convert website into mobile format…but this one is really in detail

  • Artmov, 11 February 2010

    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.

  • Daryl SWS, 03 March 2010

    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!

  • JR, 11 March 2010

    Very Useful Article. I’ll visit sample websites.

  • Francesco, 10 May 2010

    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/

  • Timothy Christenson, 14 May 2010

    I clicked on this page by searching Bing. I have found it quite informative. Thanks for sharing. I will have to visit here again!

  • Tomas, 03 June 2010

    Good article!
    You might guys also be interested in source I found recently for mobile webdesign inspiration at http://www.MobileWebShowcase.com

  • Abhishek Dilliwal, 20 June 2010

    hey thats nice, its quite useful… specially the examples u gave… awesome!
    Thanks

  • Gail Barraclough, 28 June 2010

    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.

  • Frank Nu Minh, 03 July 2010

    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.

  • Talia Mirage, 03 July 2010

    nice site, did it take a long time to create?

  • Tanya Baldez, 04 July 2010

    I am amazed that someone finally got around to saying this! I wanted to say it, but was too afraid to :(, nice site tbh.

  • Talia ZeCrella, 04 July 2010

    Does this work for amateur webmasters?

  • mobile, 05 July 2010

    it really nice to know this website good to read and see.

    mobile

  • Argentina Knoedler, 08 August 2010

    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.

  • Julio Whitsett, 08 August 2010

    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.

  • murraybiscuit, 26 August 2010

    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.

  • Babul, 09 September 2010

    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

  • diesel, 12 September 2010

    Encuentro que no sois derecho. Soy seguro. Lo invito a discutir. Escriban en PM, se comunicaremos.

  • Garrett Riopel, 17 September 2010

    Great read. I found your site from a google search, and was glad i did. The info has helped me immensely.

  • Sam, 26 September 2010

    thanks a lot!

  • Earle Lantier, 05 October 2010

    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.

  • Attorney Jospeh Face, 09 October 2010

    Nice point. I entirely agree. Well stated!

  • Dental School Grants, 10 October 2010

    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.

  • replika nokia, 10 October 2010

    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.

  • Fingerprint Scanner, 11 October 2010

    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.

  • Kathryn Maliszewski, 23 October 2010

    Hmmm, I am sure think we just received a t-shirt in that has to do with this topic. That is so silly.

  • Josefina Dunmead, 23 October 2010

    Hmmm, I do think I just shipped a t shirt in that has to do with this issue. That is very interesting.

  • Joanne Bernes, 23 October 2010

    Funny, I do think I just got a shirt in that has to do with this subject. That is really wierd.

  • john, 27 October 2010

    Thanks for sharing it.simply awesome

  • Creola Saunas, 01 November 2010

    Hey, I really enjoyed reading this ! Thanks for the share ! Have a nice day.

  • 5olio, 02 November 2010

    great idea , i really interested about it

  • maycatdecal, 02 November 2010

    I was very happy because Joined together with you and comment on the most burning issues.

  • Wesam Alalem, 02 November 2010

    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 ;)

  • Wesam Alalem, 02 November 2010

    Sorry, but I forgot to mention that I added this page to my bookmarks, it is great reference. ;)

  • uScoore, 02 November 2010

    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.

  • Dahii, 02 November 2010

    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.

  • Who Knows, 03 November 2010

    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! ;)

  • Seguros De Ciclomotor, 04 November 2010

    Excelente nota. Muy interesante lo que dices, muchísimas gracias!

  • spain holiday deals, 07 November 2010

    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!

  • Designers Work, 07 November 2010

    Wow, I love the “Watchmen” site…thanks for the great collection!

  • Search Torrents, 09 November 2010

    I have fallen in love this web site

  • WINDOWS 8, 10 November 2010

    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.

  • ladies electric shavers, 12 November 2010

    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.

  • DieselMu - MuOnline Server, 13 November 2010

    great posting …! thank you !

  • website enhancement, 14 November 2010

    Nicely done, I love the Disney site. By the way you have a good web blog here. Keep it up.

    • Rob Wessels, 18 November 2010

      Perfect explanation, congrats. Learned a lot from it!

  • john porter, 17 November 2010

    Great post and explanation. Keep it up my friend.

  • Dorathy Nakama, 20 November 2010

    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.

  • Trinidad Tattersall, 20 November 2010

    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.

  • Chicago Web Designer, 24 November 2010

    Great Info – well done. I’ll be sure to pass this link around and post it on my company site. Thanks!

  • Chicago Web Designer, 24 November 2010

    Thank you for the valuable information – very well done.

  • Tennis, 01 December 2010

    Great post, i think the same.

  • Dekoration24, 01 December 2010

    Yeah thats right! i agree with you!

  • ?????????????, 06 December 2010

    hey thats nice, its quite useful… specially the examples u gave… awesome!
    Thanks

  • Água na Boca, 06 December 2010

    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.

  • James-MobileWebsiteDesign, 07 December 2010

    Hey, great channel and information you have here, keep it coming, best of luck- James

  • panasonic lumix tips, 09 December 2010

    Top-notch post it is actually. My mother has been looking for this content.

  • Mobile Distractions, 16 December 2010

    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?

  • Mirac, 20 December 2010

    Excellent article… thanks for sharing…

  • I wish I had seen this post few months ago. Really informative and guiding.
    Thanks for the share.

  • Srikanth Dhondi, 21 December 2010

    Yes, really good source of information. Thank you very much for write up.

  • Nirvana, 23 December 2010

    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.

  • bangladesh travel, 31 December 2010

    I will definitelycome back to check it out again and have subscribedto your RSS feed. Have an excellent day

  • Accident Helpline, 31 December 2010

    Really great examples, I wish I had seen this post few months ago.

  • Rosendo Maski, 05 January 2011

    I was just thinking about that, hmm awesome I wonder. Well thanks for the post really handy, to me anyway.

  • Rocky Piek, 05 January 2011

    I like it, this is exactly what I was looking for, hopefully there will be more of this on your website over time?

  • CopyPaste Traffic, 18 January 2011

    I’d incessantly want to be update on new posts on this internet site , saved to favorites ! .

  • R210 STAND CNFGW Cisco, 18 January 2011

    Per favore, puoi PM a me e mi dica qualche altro pensa a questo, sono davvero fan del tuo blog …

  • Johnie Araya, 18 January 2011

    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!

  • John Dietrich, 18 January 2011

    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.

  • pilates workout, 18 January 2011

    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.

  • VPCZ13GGX B Sony, 18 January 2011

    merci! post très utile!

  • Rehan, 22 January 2011

    Hey.. I like your articles, in fact you have such a awesome site! Thanks and all the best :-)

  • Davey Junior, 23 January 2011

    Good one. I look forward to read more.

  • LDS Scriptures, 28 January 2011

    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

  • danille, 30 January 2011

    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?

  • Service Central, 04 February 2011

    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?

  • adiro, 07 February 2011

    Thanks for your interesting post

  • Richard, 18 February 2011

    Great post.

  • Gratis Gewinnspiele, 24 February 2011

    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.

  • Mike Robertson, 28 February 2011

    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!

  • conference venue, 08 March 2011

    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.

  • Bal?kesir Haber, 12 March 2011

    thanks for that great share. I’m searching like that post

  • steven, 17 March 2011

    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?

    • dex, 01 July 2011

      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.

  • Ethan, 20 March 2011

    Excellent tips! Thanks!

  • Alabora, 25 March 2011

    Thanks Admin Very Nice…

  • Brittany Rubinstein, 01 April 2011

    Currently building my first mobile website. This is super helpful! Thanks for the tips!

  • Russell, 04 May 2011

    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.

  • murtaza kanpurwala, 13 May 2011

    nice work …….. and great website

    Thanx for sharing

  • abdullah, 31 May 2011

    Thanks for the information.
    Good work.

  • Leola Weismantle, 12 June 2011

    Thanks for this great post. You help me so much

  • 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.

  • giovanni ferricchio, 09 February 2012

    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?

  • kamal, 10 April 2012

    Best article about mobile web design…

  • sgk, 11 April 2012

    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,

  • zemin kaplama, 16 July 2012

    Thanks for such a outstanding submit as well as the critique, Im totally impressed! Keep stuff like this coming.

  • Olivia Moss, 15 August 2012

    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 !!

  • Dennis, 27 August 2012

    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.

  • Michael Holt, 24 September 2012

    Excellent article, Cameron. Thank you for the attention to detail, and your exhaustive approach to mobile design.

  • Brian P, 22 December 2012

    Nice article. Great tips on how to design plan on new mobile site..Can CDN improve mobile site performance?

  • Peter Drinnan, 12 February 2013

    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"/>

  • Parker, 06 November 2013

    Good stuff for understanding mobile websites……….

search form
 
image description image description