Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

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.