Maximizing WebKit Mobile

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">


dummies

Source:http://www.dummies.com/how-to/content/maximizing-webkit-mobile.html
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)