If you're creating a website that will be viewed in a WebKit-powered mobile device, follow these rules. A few simple steps will make your pages fast and robust, however they're viewed.
- Use the HTML5 doctype.
<!DOCTYPE html> - Optimize the mobile viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - Use a fluid layout with a minimum width of 320 pixels.
#page-wrapper {
background: white;
min-width: 320px;
max-width: 1260px;
margin: 10px auto;
} - Make clickable buttons touch-friendly.
Apple recommends a size of at least 44 pixels x 44 pixels. - Set custom home screen icons.
For iPhone 4 with high-resolution Retina display:
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="img/h/apple-touch-icon.png">
For first-generation iPad:
<link rel="apple-touch-icon-precomposed" sizes="72x72"
href="img/m/apple-touch-icon.png">
For non-Retina iPhone, iPod Touch, and Android 2.1+ devices:
<link rel="apple-touch-icon-precomposed"
href="img/l/apple-touch-icon-precomposed.png">
For Nokia devices:
<link rel="shortcut icon" href="img/l/apple-touch-icon.png"> - Configure iOS Web app settings.
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style"
content="black-translucent">
<link rel="apple-touch-startup-image" href="img/l/splash.png"> - Optimize your images.
Use alternatives to bitmap graphics, such as CSS3 or SVG, whenever possible. - Don't use mouse-over effects.
If your site navigation depends on hovering over a menu to see the submenu, the site will be unusable on touch screens. - Minimize JavaScript with Closure (http://closure-compiler.appspot.com/home).
Turn this:
// ==ClosureCompiler==
// @compilation_level SIMPLE_OPTIMIZATIONS
// @output_file_name default.js
// ==/ClosureCompiler==
// ADD YOUR CODE HERE
function hello(name) {
alert('Hello, ' + name);
}
hello('New user');
Into this:
function hello(a){alert("Hello, "+a)}hello("New user"); - Use the application cache. Not only will it make your app usable in offline mode, it will also improve performance.
