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