Book Image

HTML5 Mobile Development Cookbook

By : Shi Chuan
Book Image

HTML5 Mobile Development Cookbook

By: Shi Chuan

Overview of this book

<p>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. <br /><br />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.<br /><br />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.</p>
Table of Contents (16 chapters)
HTML5 Mobile Development Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface

Defining a content strategy


Target browser: all

With the data you gathered from the analytics tools, you can define a strategy towards what you want to build. This is particularly useful if you already have a desktop version of the website.

Getting ready

Make sure you already have JavaScript embedded on your site.

How to do it...

  1. 1. Go to your analytics tool and click on Visitors | Mobile under the left navigation:

  2. 2. Now if you click on Mobile Devices, you can see the most common devices that people use to surf your site:

How it works...

Google Analytics can help in finding out the most commonly used mobile devices accessing your site, and also find out the most popular sections of your website.

There's more...

You can also determine what are the most useful pages on your mobile site. People treat mobile surfing differently from desktop surfing. For instance, if you are running a local store selling products, most people on a tend to surf pages like Contact Us, Location, and Services mobile device. Conversely, on a desktop, people tend to search for Product Catalog, About, and Product Description. Google Analytics can help you find out which are the most visited sections/pages on your site. Apart from Google Analytics, you can also use PercentMobile, as we saw earlier.

Browser grade

Using an analytics service is one way to decide which devices you want to support. Another way is to use browser grade to know what category you should be targeting. jQuery Mobile has an awesome grid support chart at http://jquerymobile.com/gbs/. There is also a slide on jQuery Mobile that talks about the overall strategies regarding mobile browser web development at http://www.slideshare.net/jeresig/testing-mobile-javascript.

Mobile matrices

I have been collaborating with Jonathan Neal, and many others, on Smartphone frontend matrices. You can have a look at:

https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices

It contains information about most Smartphones in the market, their screen dimensions, DPI, and operating systems.