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.
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:
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!
Mobile phones will also adjust text size when the screen orientation changes unless you include a special CSS parameter:
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.
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!
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.
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.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.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: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!
No comments:
Post a Comment