Cover image for HTML5 Mobile Development Cookbook

HTML5 Mobile Development Cookbook

Author Shi Chuan
Release Date: 2012/02/01
ISBN: 9781849691963
Topic:
0%
16
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Recipes for building fast, responsive HTML5 mobile websites for iPhone 5, Android, Windows Phone and Blackberry.

  • Solve your cross platform development issues by implementing device and content adaptation recipes.
  • Maximum action, minimum theory allowing you to dive straight into HTML5 mobile web development.
  • Incorporate HTML5-rich media and geo-location into your mobile websites.

In Detail

How do I create fast and responsive mobile websites that work across a range of platforms? For developers dealing with the proliferation of mobile devices each with unique screen sizes and performance limitations, it is an important question. This cookbook provides the answer. You will learn how to apply the latest HTML5 mobile web features effectively across a range of mobile devices.

HTML5 Mobile Development Cookbook will show you how to plan, build, debug and optimize mobile websites. Apply the latest HTML5 features that are best for mobile, while discovering emerging mobile web features to integrate in your mobile sites.

Build a rock-solid default mobile HTML template and understand mobile user interaction. Make your site fast and responsive, leveraging the uniqueness of location-based mobile features and mobile rich media. Make your mobile website perfect using debugging, performance optimization and server-side tuning. The book finishes with a sneak preview of future mobile web technologies.

Table of Contents

  1. HTML5 Mobile Development Cookbook
  2. Credits
  3. About the Author
  4. About the Reviewers
  5. www.PacktPub.com
    1. Support files, eBooks, discount offers and more
      1. Why Subscribe?
      2. Free Access for Packt account holders
  6. Preface
    1. What this book covers
    2. What you need for this book
    3. Who this book is for
    4. Conventions
    5. Reader feedback
    6. Customer support
    7. Downloading the example code for this book
      1. Errata
      2. Piracy
      3. Questions
  7. 1. HTML5 and the Mobile Web
    1. Introduction
      1. Identifying your target mobile devices
        1. Which platforms and browsers are most commonly used by visitors on my website?
        2. How many people access my website from a mobile device that is capable of supporting modern scripting?
      2. Alternatives to Google Analytics
        1. Accuracy of Google Analytics
        2. Server loading speed concern
    2. Setting up mobile development tools
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
        1. Device simulator/emulator download lookup table
        2. Browser simulator/emulator download lookup table
        3. Remote testing
    3. BlackBerry simulator
      1. Getting ready
      2. How to do it...
    4. Setting up the mobile development environment
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
        1. Testing on a Safari desktop
        2. List of community-based collection of emulators/simulators
        3. List of emulators/simulators collection by Firtman
    5. Using HTML5 on the mobile web
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
        1. HTML5 and version number
        2. Mobile doctypes
        3. Free resources to learn HTML5
    6. Rendering HTML5 across different browsers
      1. Getting ready
      2. How to do it...
        1. How it works...
        2. There's more...
          1. HTML5 CSS reset
          2. Enable block-level HTML5 elements in older IE
          3. Modernizr
    7. Designing for mobile
      1. Getting ready
      2. How to do it...
        1. How it works...
        2. There's more...
          1. Desktop-first site
          2. Mobile-first site
          3. One web approach
    8. Defining a content strategy
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
        1. Browser grade
        2. Mobile matrices
  8. 2. Mobile Setup and Optimization
    1. Introduction
    2. Adding a home screen button icon
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
        1. Everything you always wanted to know about touch icons
        2. Official documentation about Apple touch icons
          1. Apple Custom Icon and Image Creation Guidelines
          2. See also
    3. Preventing text resize
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
        1. Windows Mobile
        2. Making it future proof
        3. px em, which is better?
    4. Optimizing viewport width
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
        1. IE for Windows Phone viewport blog post
        2. Safari documentation
        3. Blackberry documentation
    5. Fixing Mobile Safari screen re-flow scale
      1. Getting ready
      2. How to do it...
      3. How it works...
        1. There's more...
          1. A slightly improved version
          2. An even better version
          3. A word for jQuery Mobile
    6. Launching phone-specific programs from the browser
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
        1. Mobile Safari URL scheme
        2. Blackberry URL scheme
        3. Sony Ericsson developers' guidelines
    7. Enabling iPhone start screen in full screen mode
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
        1. Full screen issue with iOS 4.3
        2. Safari documentation about web applications
        3. Safari splash image and touch icon guidelines
    8. Prevent iOS from zooming onfocus
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    9. Disabling or limiting WebKit features
      1. Getting ready
      2. How to do it...
        1. How it works...
        2. There's more...
          1. Changing the tap color
          2. Making text area content editable
          3. Ellipsis for the narrow screen
          4. 3. Interactive Media with Mobile Events
            1. Introduction
            2. Moving an element with touch events
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. jQuery mobile events
                2. Zepto
                3. Safari's guide on mobile event handling
              5. See also
            3. Detecting and handling orientation event
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. Safari's native support
                2. Web versus native
              5. See also
            4. Rotating an HTML element with gesture events
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. Safari event handling
                2. CSS3 transforms
                3. Drawbacks of the scale bug fix
              5. See also
            5. Making a carousel with swipe events
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. Zepto framework and swipe events
                2. YUI and gesture events
                3. Dive into the source
              5. See also
            6. Zooming an image with gesture events
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. Official iOS Safari guide on GestureEvent
                2. YUI gesture events
                3. Google Maps and gesture events
              5. See also
          5. 4. Building Fast and Responsive Websites
            1. Introduction
            2. Building pages using HTML5 semantics
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. RDFa
                2. Microdata
                3. Microformats
              5. See also
            3. Using CSS3 features for progressive enhancement
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. Understanding CSS3 gradients
                2. CSS3, please!
              5. See also
            4. Applying responsive design
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
            5. Optimizing polyfills script loading
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. yepnope
              5. See also
            6. Applying user agent detection
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. Methods of mobile browser detection
            7. Adding mobile bookmark bubble to the home page
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. See also
            8. Building Contact page with textarea and autogrow forms
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
              5. See also
            9. Making buttons with instant response
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
              5. See also
            10. Hiding WebKit chrome
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. See also
            11. Building a mobile sitemap
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. Google and mobile-friendly site building
                2. Google and mobile site indexing
          6. 5. Mobile Device Access
            1. Introduction
            2. Getting your location
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
            3. Handling cross-browser geolocation
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. YQL Geo Library
            4. Displaying a map based on your geolocation
              1. Getting ready
              2. How to do it...
              3. How it works...
                1. There's more...
                  1. HTML5 geolocation tutorial
            5. Displaying location in realtime
              1. Getting ready
              2. How to do it...
              3. How it works...
            6. Using the DeviceOrientation event
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. DeviceOrientation event specification
                2. Offical guide on the Safari site
            7. Using geolocation with foursquare
              1. Getting ready
              2. How to do it...
              3. How it works...
                1. There's more..
          7. 6. Mobile Rich Media
            1. Introduction
            2. Playing audio on mobile
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. W3C Audio Working Group
            3. Streaming video on your mobile
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
            4. Using offline caching
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. Appcache facts
                2. WHATWG's official description
            5. Using Web Storage on mobile
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. Web Storage portability layer
                2. HTML5 storage wars
            6. Using web workers
              1. Getting ready
              2. How to do it...
              3. How it works...
            7. Creating Flash-like navigation with session and history API
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. Place Kitten
          8. 7. Mobile Debugging
            1. Introduction
            2. Remote debugging with Opera Dragonfly
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. See also
            3. Remote debugging with weinre
              1. Getting ready
              2. How to do it...
              3. How it works...
            4. Using Firebug on mobile
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. Debug channel
                2. Beta channel
                3. Developer channel
            5. Remote JavaScript debugging with JS Console
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. JS Console iOS app
                2. Simple iOS simulator example
                3. Remote debugging JavaScript on any device
            6. Setting up Mobile Safari debugging
              1. Getting ready
              2. How to do it...
              3. How it works...
          9. 8. Server-Side Tuning
            1. Introduction
            2. Preventing mobile transcoding
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. Microsoft Internet Information Server (IIS)
                2. Responsible reformatting
                3. MBP — Mobile Boilerplate
            3. Adding mobile MIME types
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
            4. Making cache manifest display properly
              1. Getting ready
              2. How to do it...
              3. How it works...
                1. MBP Mobile Boilerplate
            5. Setting far future expire headers
              1. Getting ready
              2. How to do it...
              3. How it works...
                1. There's more...
                  1. Add an Expires or a Cache-Control header
                  2. Rules in MBP Mobile Boilerplate
            6. Compressing files using Gzip
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. Pushing Beyond Gzipping
            7. Removing ETags
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. Synchronizing ETag values on an IIS server
                2. High performance websites
                3. David Walsh blog
                4. MBP — Mobile Boilerplate
          10. 9. Mobile Performance Testing
            1. Introduction
            2. Speed testing your device with Blaze
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. Blaze blog
                2. Web performance optimization best practices
            3. Analyzing mobile page speed online
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. The need for speed
                2. When seconds count
            4. Analyzing mobile performance with PCAP Web Performance Analyzer
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. HAR viewer
                2. Using Page Speed to optimize your website for mobile
                3. pcap2har
            5. Using HTTP Archive Mobile
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. How accurate is the data?
                2. Limitation of the testing methodology
            6. Storing performance data with Jdrop
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
          11. 10. Emerging Mobile Web Features
            1. Introduction
            2. window.onerror
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. Browser Object Model
            3. Using ECMAScript 5 methods
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. Documentation on MDN
            4. New HTML5 input types
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
            5. Inline SVG in text/HTML
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. SVG in HTML
            6. position:fixed
              1. Getting ready
              2. How to do it...
              3. How it works...
            7. overflow:scroll
              1. Getting ready
              2. How to do it...
              3. How it works...
              4. There's more...
                1. Browser fragmentation