10 tips for designing mobile websites

By

10 tips for web designers in 2010 - the year of the mobile.

1. Design with a fluid layout, min-width: 320px

There are two factors that make this a necessity. First, mobile device screens are so small that you really need to utilise all of the available space. Second, there are a lot of different screen resolutions out there. The only way to utilise all of the space available on different sized screens is with a fluid layout.

I have found websites with a minimum width of 320px will look good on most high-end mobile devices like the iPhone, Android and Nokia N97. Here are the screen resolutions of some of the most popular devices:

Device Screen res (height x width)
iPhone 320 x 480
iPhone 4 320 x 480 (scaled by a factor of 2)
Nokia N97 360 x 640
HTC Legend 320 x 480
LG eXpo 480 x 800

Technically, the retina display on the iPhone 4 has a screen resolution of 640 x 960 pixels but don't worry, if you optimise your site for 320 x 480, the iPhone 4 will scale it up by a factor of two so it fits the whole screen. You will need to insert higher resolution images - but more on that in the next section!

2. Include high res images for the iPhone 4 retina display

The iPhone 4 display has four times the number of pixels as that of the original iPhone. To prevent mobile sites from looking tiny, it magnifies them by 200%. That works great on text and vector images like SVG. But its not so hot on bitmap images (or even the HTML5 canvas so it would seem). To avoid pixelation, you need to insert alternative high resolution images for the iPhone 4.

Designers should create their Photoshop documents with a width of 640 pixels. Developers should export the images at full res for iPhone 4 and 50% res for everything else.

Here's how to use a CSS media query to insert a high resolution image for iPhone 4:

.myImage {
    height: 40px;
    width: 100px;
    -webkit-background-size: 100px 40px;
    background: url("images/myImage.jpg");
}

@media screen and (-webkit-device-pixel-ratio: 2) {
    .myImage {
        background: url("images/myImage@2x.jpg");
    }
}

The first line that might jump out at you as being a little unusual is probably -webkit-background-size: 100px 40px;. The -webkit-background-size CSS property takes two parameters: width and height. The parameters can be lengths, percentages or "auto", and can even be mixed, i.e. -webkit-background-size: 100% auto. This tells the browser to stretch the background image to a specific size.

The second interesting part is the media query @media screen and (-webkit-device-pixel-ratio: 2) {...}. This means that any styles contained within the curly braces only apply if the device has a pixel ratio of 2 (two physical pixels per measurement pixel). Inside the media query selector, we override the .myImage class, and replace the background image with the high resolution image myImage@2x.jpg.

The left half of this screenshot shows the pixelation that occurs on iPhone 4, and the right half shows how it looks when we insert with a high resolution image:

The left half of this screenshot shows the pixelation that occurs on iPhone 4, and the right half shows how it looks when we insert with a high resolution image

3. Turn off auto-scaling

Mobile devices will assume your website is optimised for desktop computers unless you tell them otherwise. Add a viewport meta tag to the head section of your HTML to set the width of your website to match the width of the display, render with a zoom level of 100% and prevent the user from zooming in/out.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Mobile phones will also adjust text size when the screen orientation changes unless you include a special CSS parameter:

body {
    -webkit-text-size-adjust: none;
}

4. Make clickable elements big enough for a fingertip, ≈44px²

Your mobile visitors don't have the accuracy of a mouse - they are often using their fingertips on a touch screen. Don't make them put their fingers through a pencil sharpener just to click your button! Apple has said that the average finger tap on an iPhone is 44px by 44px (in your high res Photoshop doc that will be 88px by 88px), so aim to make clickable areas at least that size. This doesn't mean you have to design gigantic looking buttons. Just add some padding to your small buttons to enlarge the clickable area.

5. Don't use hover states

Today's touch screens can't detect when a finger is getting close to touching, so the concept of rollovers does not apply. On the iPhone your :hover style will actually display on click and then remain on screen even after the user takes their finger away, which can be really annoying. So the rule is - don't use :hover in your CSS or mouseover in your JavaScript.

6. Create icons for your site

Hopefully users will really love your site and add it to their home screen for easy access. Don't ruin the mood with an ugly default icon! Add these meta tags to the head section of your HTML to define icons.

<!-- 57 x 57 Android and iPhone 3 icon -->
<link rel="apple-touch-icon" media="screen and (resolution: 163dpi)" href="icon57x57.png" />
<!-- 114 x 114 iPhone 4 icon -->
<link rel="apple-touch-icon" media="screen and (resolution: 326dpi)" href="icon57.png" />
<!-- 57 x 57 Nokia icon -->
<link rel="shortcut icon" href="icon57x57.png" />

Note: The iPhone will automatically add rounded corners and a glossy effect to your icon. If you want to turn this off, change the rel attribute to apple-touch-icon-precomposed. Thanks to Jesse Dodds for discovering how to specify a seperate high res icon for the iPhone 4 retina display.

7. Reduce load time by using CSS3 instead of images for gradients, rounded corners, shadows, etc.

Depending on the devices you are targeting, CSS3 can be an excellent option for mobile design. With old school web design techniques, a button with a gradient and rounded corners might consist of 9 separate image slices, a bunch of nasty non-semantic markup and a hefty amount of CSS. With CSS3, you can create this:

CSS3 button

With this:

.redButton {
    color: #B91440;
    font-size: 19px;
    line-height: 25px;
    padding: 10px 30px;
    border: 1px solid #FFFFFF;
    background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#FFFFFF));
    -webkit-box-shadow: 0 0 2px #E4E3E3;
    -webkit-border-radius: 5px;
}

Go here for everything you need to know about CSS3.

But be careful! While the iPhone, Android and Nokia all have good CSS3 support, the Windows Mobile 6.5 browser is built on a version of IE6 (sigh...). Define, define, define your target devices before you begin design and development.

8. Use an HTML5 doctype

Not all browsers implement HTML5 features, but they will still accept an HTML5 doctype.

<!DOCTYPE html>

Using this doctype declaration will allow you to display HTML4 elements to all browsers, and then add in additional functionality for the browsers that support HTML5.

9. Make your site operate offline

Your visitors won't always have a fast Internet connection. If you're designing the type of site that will have return visitors, consider leveraging the client-side storage capabilities of HTML5. It can be as simple as creating a cache manifest file that tells the browser what files it needs to cache for offline access. A more advanced option is to create an SQLite database on the client with JavaScript.

10. Include an option for your mobile visitors to view the normal website

Detection scripts can get it wrong, or a user might simply prefer not to use the mobile optimised interface. So my final tip is, always offer users a way to switch back to 'normal mode'.

So there's a few mobile web tips I've picked up over the last few months. I'd love to hear yours too in the comments!

This entry was tagged with Mobile development, Web development. Bookmark the permalink.

Comments

  1. Solid tips!

    Comment on tip (2): I can imagine including the higher res image for iPhone 4 is not always a good idea since images are the heaviest items to download. This can hurt over EDGE or worse connections.

  2. Thanks Wolf. Yeah good point. I've heard that Google Maps can feel really slow on the iPhone 4 because of the amount of data that has to get downloaded. So you've really gotta weigh up sharp images vs. speed.

    But there are some other alternatives for image formats like using SVG for vector images. SVG images can be much much smaller than PNGs and GIFs. Of course they don't work for everything though!

  3. By Kay

    For the development of my client’s mobile website and mobile apps I have been using http://www.unitymobile.com. Their platform allows us to create the mobile site once and publish it to all OS’s and devices. This saves time when creating the site because we do not have to monitor screen sizes and images for each device on the market. With the use of their redirect feature my clients customers are able to automatically be redirected when they access the desktop site from a mobile phone. They also have a fully featured analytics platform and SMS campaign management for mobile marketing needs.

  4. Thanks Kay. Will check it out.

  5. Are you using the word 'mobile' to mean 'high-end touch smartphones' ? Most mobile devices in the world (yes, with browsers that are used) are way narrower than 320px.

    Anyway, assuming you are, you should also mention:

    -webkit-text-size-adjust:none;

    Which stops weird font-sizing stuff happening if you're a pixel-perfection junkie.

    I guess these are "10 tips" of very, very many...

  6. Hey James, Yeah I am really just talking about the high end phones that have come out in the last three years (but not limited to just touch screens). I'm a web developer and I'm not so interested in the low end devices or WML. Definitely a good tip on the -webkit-text-size-adjust property!

  7. By tcs

    Thanks... you just saved me a lot of trouble updating my sites.

  8. Great article, thanks!

    I was interested by the resolution specification for the iPhone / iPhone 4. It's a good solution but will not look quite right on the iPad because the iPad is a different resolution and also uses a slightly larger icon than the iPhone (72x72). The way around this is to just include the single highest resolution image and let iOS handle scaling to the smaller sizes, omitting the resolution limiting code. It may be a slightly larger download for devices that don't need it but not significantly so, in most cases.

  9. Keegan, thanks for the great article.

    Any tips on implementing #10? I generally use a media query to load a mobile stylesheet; how do you recommend bypassing it?

  10. Keegan, until the MMA is able to influence the Service Providers to unify their delivery systems, we continue to run into a decade and half old problem: Mobile Content constantly has to digress to the lowest common denominator. Since there are no consistent delivery systems, only sparce guidelines, we continue to read articles like yours, and excellently written, I might add. As Editor and Publisher of a Telephony Infastructure newsletter from 1995 through 2001, I have noticed very little progress while awaiting Congress' dithering on the spectrum issue. Now I believe we have reached critical mass, but God forbid we should actually let the manufacturers know this.

    What I mean by articles like this, is they start out seemingly easy to understand, and by the time you get to Point #2, we are focusing exclusively on how we can get our pages to work for the iPhone, or Verizon, or the Android.

    You would have thought that Steve Jobs learned his lesson when IBM put Apple underground once before, or BETA was beat by VHS, but no, history teaches these mavericks little.

    The reason it is so difficult to make mobile pages work is that there are so many different configurations, and so many different OS's we have to contend with. I continue to advise my clients, and readers to not worry about images, don't do anything fancy, and just stick to plain text, with a link to their Desktop OS Version at the very most.

    It is far better to just operate the team at the speed of the slowest runner, to row at the rythim of the slowest rower, and in this case, build one's page at the ability of the worst web enabled phone, Keegan, which is plain text.

    Now having said that, I am a HUGE proponant of getting a library of short, crisp 4G video clips categorized, and libraried for mobile...I tout getting companies to make as many pages mobile moving forward as possible. We try to make every new page in text, as an example and to lead the way. I was invited to interview to run a Web Design company and when I saw that their page was not even mobile enabled, I cancelled the appointment!! LOL So don't get me wrong, I am about as mobile a guy as there is. ....

    But I don't want to lose business to the competitor who puts his mobile pages in plain text, so I keep working at the speed of the slowest Phone. That is a sad state, and until the Service Providers in the United States get their act together, compromise, instead of trying to roll over each other, then that is what we are stuck with. I have to go, I don't have any more time, please include me in your newsletter, and do a guest blog for me, ok?? I appreciate you and really enjoyed the read, God Bless. Lonny Dunn, Editor/Author, I tweet at ProNetworkBuild

  11. > I’m a web developer and I’m not so interested in the low end devices or WML

    Not sure I follow the logic... but if you can guarantee your users all have funky new gadgets, then you're all set ;-)

  12. Hi Richard, You can use serverside code to determine whether or not the mobile website should be displayed. You can detect the device with the user agent string, and then display your mobile stylesheet and other mobile elements if 1) The device is a mobile phone and 2) The user did not click "View the normal site". There is a simple example here: http://webdesign.about.com/od/mobile/a/detect-mobile-devices.htm but if you want a more robust implementation look at http://wurfl.sourceforge.net/index.php

  13. Hi Mark, I would be wary about serving high res images to all devices. They are mobile phones after all, they are not known for having high bandwidth. I think when the new iPad OS comes out in autumn, it will be able to use the high res images we deploy for iPhone 4.

  14. Lonny, thanks for your post. I think you're coming from the same angle as James, in that my tips are aimed at the high-end devices and aren't going to work on older devices. If I had to support every mobile device out there, I would build an app with a text based interface that sent data via SMS. But as I said to James, my interest and experience is in web development. I am passionate about designing great interfaces, building rich experiences and leveraging modern web technologies. So where possible, that's what I do!

    The basic rule here in web design for mobile is to define which devices you will target. Then you can create realistic expectations about the kind of experience you will be able to create and how much reach you will get.

  15. I'd like to point out that you don't need *any* additional HTML to add the icons you’re talking about (tip #6). Just use the correct filenames and put the images in the root of the site and you’ll be fine.

  16. I strongly disagree with "disable scaling"! Please don't do it! I haven't got multitotch screen for you to disable it!

    It's annoying I can't zoom in images (Flickr makes me click like it's 1993, instead of letting me use multitouch).

    I do zoom beyond 1:1, simply because things are physically too small on 3" display.

  17. screen and (resolution: 326dpi)

    is stupid. What if iPod touch will have different dpi? And screen on older iPhone has 166, not 163 dpi.

    Just use one high-res icon. It'll be scaled down if needed.

  18. By jamesh

    9 great tips. One which I don't agree with at all:

    3. Disable scaling.
    Scaling is an incredibly useful tool for accessibility. If you need a pixel perfect layout and just happen to have better eyes than me (probably), then you may have selected a font which is just a little bit too small for me to read comfortably, or at all.

    I also agree with others for the use of wurfl.xml and Mobile Web doesn't start and stop with high-end smart-phones, but that is for a different comment.

  19. Thanks so much everyone for all the brilliant feedback on this post via comments and Twitter! I have made some small changes to it since publishing to include James' tip about "-webkit-text-size-adjust:none;" and I have changed the scaling tip to disable "auto" scaling, without removing the users' ultimate control over scaling.

  20. Great article with easy to understand (and employ) tips. What I think is missing in article and comments is to consider whether developing (and maintaining) a mobile site is really feasible for your site.
    In your case, with this article page, I prefer the desktop site on my X10 smartphone (Android, 480x854):
    On the desktop site in my mobile browser I get the logo, the colours are as you intended, the text adjusts for readability, I get the text images, comments are with pictures and after reading the article I can quickly scan the page for other stuff - and due to web standards I know where to look. Also if I share the article I will not be sharing the mobile URL.
    I think this article is really useful if you NEED to make a mobile site - which most sites should not need to if they are build well, like this one. At least not for high-end devices.
    So that would be my eleventh "tip for web designers in 2010 – the year of the mobile" :)

  21. Sorry to spam my own site, but I also put together a couple roundups of tips for developing for mobile, which hopefully some folks will find handy:

    Mobile-specific HTML, CSS, and JavaScript
    http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript

    Tools to help develop:
    http://davidbcalhoun.com/2010/the-mobile-developers-toolkit-mobile-web-part-2

  22. Great article! Bookmarked for use on a client project starting next week.

  23. Awesome post mate, though I agree with the other folks when it comes to disable scaling... Rest are top-notch!

  24. By Matt Bee

    Personally I think that the high end devices aren't what should be targeted, when talking about mobile devices, the percentage of mobile internet users on an iPhone last year was only 15% (can't remember source I'm afraid - I think it was in a talk from Stuart Smith of 3sheep).

    Being a web developer doesn't mean you neglect lower end technologies, it means you should include all users and devices if possible. Target a lesser device (I was still using a Sony Ericsson C905 for internet until last month) and then enhance to iPhone and other cool browser technologies.

    The more people we get using the internet on their mobiles the better, and not just iPhones etc, so lets not exclude them!

  25. I also agree with the folks who are into scaling as opposed to the advice offered in #3... but I do agree with you as well, Keegan.

    I feel this article is directed at webkit based mobile only browsers. In which case restricting image scaling makes sense.

    But, in relation to #10, I do not feel we have to have separate desktop and mobile websites. I'm really into the idea of responsive web design, and using css3 media queries to provide alternate CSS rules to different device widths. This gives us the chance to deploy one site's code to several devices, making things much more efficient.

    This tactic is simply not possible without image scaling, so in that vein, I'd rather not follow the advice of #3, as I'd have to deliver separate images to devices.

  26. Hi,
    I'm Idel the owner of Apache Mobile Filter, it's a Apache Web Server Module included into Apache Module Registry (http://modules.apache.org/search.php?id=1787) and it's also a CPAN module.
    The main feature of this project is Device Detection and Image Rendering.

    For more info:
    http://www.idelfuschini.it/apache-mobile-filter-v2x.html
    http://www.apachemobilefilter.org

  27. Thanx for the great advices. Here I translate for my local users in Turkish.

    Mobil Web Sayfası Tasarımında 10 ipucu . http://www.barisoztekin.com/blog/?p=575

    thanx again in advance...

  28. By Stephen Garside

    Hi - excellent article for newbies! I am embarking on creating a mobile version of my website and this has geven me some excellent pointers. Do you have any advice on font-sizes? should I use px, em %?? Given that you are aiming for your website to 'scale to fit' i just wondered if there was a recommendation?

    thanks

  29. Wow excellent tips.

    Right now i am designing website for iphone and i needed some help when i get this article i got the solution with the help of this article.

    Thanks a lot to share it.

  30. Thanks for a great article & manu useful tips for our mobile website design development business. I already noticed a couple items I've neglected for clients. One addition, especially for 'app-style' mobile website is to include a 'splash' image for site loading after the user has bookmarked you on a homescreen. Up's the style & professionalism a notch for your clients!

    The META for "apple-mobile-web-app..." helps your html/css mobile site appear as an "app" on return visits from a user's homescreen!

    Enjoy!

    Example @ on my site here. Just + to homescreen, then revisit to see it action (like an app).

  31. 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 your site's design and functionality.

  32. Very useful article, thank you. Just sent it to our team to have a read through.

  33. The mobile site designer should keep in mind that not everybody has got a cutting edge cell phone and the fastest net connection. Backdated visitors and customers should be able to use the site smoothly as well. Thanks for the insight article on Mobile site designing......

  34. Great tips. Thanks! Have shared with my followers on Twitter via @woahsy

  35. Very cool I’ve bookmarked ya on Digg under "10 tips for designing mobile websites | These Days Labs". Thanks.

  36. Thanks for the great post and helpful tips. I know I'm late to the party on this one, but I've been trying to develop a website for iPhone, the designer has created the template to be 960px wide (it's going to be landscape only), at 72dpi. But if I create an image that's 960px wide, it's too big on the iPhone 4. If I resize the image to 480px, it fits just fine, but looks blurry. Getting so frustrated trying to wrap my head around what size images should be.

    It's not a fluid design, so it'll be a static 960x536, no zooming. Seems like not matter what I do with ratio, etc, the graphics are always too big until I resize them and lose that quality.

    Any tips would be appreciated. Thank you!

  37. Other useful screen sizes...

    Samsung Galaxy S II: 480 x 800
    LG G2x: 480 x 800
    Motorola Droid Bionic: 540 x 960
    HTC Sensation 4G: 540 x 960

    Don't forget to take into account that there will be status and address bars at the top of the page, and button bar at the bottom of the page. On iPhone the status bar is 20px high, address bar is 60px high, button bar is 44px high, leaving you with a visible area of 320 x 356.

  38. Amazing article ! Thanks a lot for the great job

  39. Any Chance of giving suggestions for Windows Phone 7?

  40. I would have added a link to desktop version since some of the new phones have really big screens.

  41. Greate Article, I didnt understand why should i pot 2 different icons for iphones, I've pot one for both, and looks greate.

  42. Great tips. I have been i web development business for long. Came across a project the requires a mobile site, like mainsite.com/mobile.

    These tips are really a good guide, because right now, i know where to start.

    Thanks

  43. Cheers Keegan, Number 3. the bit of code on Auto Scaling was just the ticket. Thanks again. Paul - 10 Fathoms

  44. very usefull. :)

  45. Mobile website design must focus on the purpose of the website and/or the need of the business.
    When you know what the visitors browsing your mobile web page are looking for at the first place, you understand what to show to them when they land on your landing page.
    Then, and depending of the target of the website, you can add features, pages, content...
    It's all about meeting the expectations of your visitors.

  46. We usually optimize our mobile websites for three resolutions... from my perspective it doesn't makes sense to optimise a website for a hundred different screens....

  47. I want know when we creating a mobile app site how to write css and html code.

  48. It’s a good solution but will not look quite right on the iPad because the iPad is a different resolution and also uses a slightly larger icon than the iPhone. Thanks for a great article & manu useful tips for our mobile website design development business

  49. This really answered my downside, thank you!

  50. Great tips on mobile website designing. the coming era is mobile era and majority of users are going to access the internet via mobile so this post really help the companies to build a great mobile website to sustain in their businesses.
    http://techtwitt.com/10-tips-for-user-friendly-mobile-website-design/

  51. Nice post for starting mobile web design.

    Also write article on creating responsive design.

    mobile website design

  52. A colleague linked me to this site. Thanks for the details.

  53. Thank for this post, it has really helped me.

  54. Excellent, I finally found the tuto that I was looking for. Thanks for the good article, by the precious advise. Now, I need to go back to work to realize my website from scratch. :(

  55. Great post on designing mobile websites. Designers must remember that mobile screens are not as powerful as a desktop monitor and can only display a limited range of colors. Mobile phone screens also have limited contrast and shallow color depth.

Leave a Reply