Maximizing WebKit Mobile
Part of the WebKit For Dummies Cheat Sheet
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.
<html manifest="myapp.appcache">
Web Design & Development Glossary
