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">
blog comments powered by Disqus

SERIES
WebKit For Dummies Cheat Sheet

Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.