Kris Hadlock - jQuery Mobile: Develop and Design

Develop and Design

Kris Hadlock

jQuery Mobile: Develop and Design
Kris Hadlock

Peachpit Press

1249 Eighth Street
Berkeley, CA 94710
510/524-2178
510/524-2221 (fax)

Find us on the Web at: www.peachpit.com
To report errors, please send a note to:
Peachpit Press is a division of Pearson Education.
Copyright 2012 by Kris Hadlock

Acquisitions Editor: Michael Nolan
Project Editor: Rebecca Gulick
Development Editor: Robyn G. Thomas
Contributing Writer: Jay Blanchard
Technical Reviewer: Jay Blanchard
Production Coordinator: Myrna Vladic
Compositor: David Van Ness
Copyeditor: Gretchen Dykstra
Proofreader: Patricia Pane
Indexer: Valerie Haynes-Perry
Cover Design: Aren Howell Straiger
Interior Design: Mimi Heft

Notice of Rights
All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For information on getting permission for reprints and excerpts, contact .

Notice of Liability
The information in this book is distributed on an As Is basis, without warranty. While every precaution has been taken in the preparation of the book, neither the author nor Peachpit Press shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by the computer software and hardware products described in it.

Trademarks
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark. All other product names and services identified throughout this book are used in editorial fashion only and for the benefit of such companies with no intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with this book.

ISBN-13: 978-0-321-82041-9
ISBN-10: 0-321-82041-X

9 8 7 6 5 4 3 2 1

Printed and bound in the United States of America

To my wife, Lisa, who carried our first child while I wrote this book.
Only true love can withstand the amount of time that it
takes to write a book while having a new baby.
And to my son, Lucas, words cannot
express the love I feel for you.

There are many people I would like to thank for the opportunity and help they gave before, during, and after this book was being written: Neil Salkind, for helping me navigate the world of publishing and for his support while I was writing. Robyn Thomas for her patience. Jay Blanchard for stepping in when needed and providing excellent technical reviews. Rebecca Gulick for helping to move things along. Michael Nolan for working out the details. All my customers, for understanding how busy Ive been. And, of course, Peachpit for giving me the opportunity to write for you.

Kris Hadlock has been a web developer and designer since 1996, working on projects for companies such as SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, Canon, and Phoenix Childrens Hospital, to name a few. Kris is a featured columnist and writer for numerous websites and design magazines, including Peachpit.com, InformIT.com, IBM developerWorks (www.ibm.com/developerworks), and Practical Web Design magazine. His other books include Ajax for Web Application Developers and The ActionScript 3.0 Migration Guide. He is the founder and lead developer-designer of Studio Sedition (www.studiosedition.com), specializing in the fusion of form and function.

Smartphone, tablet, and e-reader statistics are showing an unprecedented adoption rate, making the mobile web a very hot topic and requiring a new set of skills from web developers and designers. Mobile device usage is skyrocketing; according to Nielsens third-quarter 2011 Mobile Media Report, 44 percent of U.S. mobile subscribers now own a smartphone device, compared to 18 percent just two years ago. Thats more than double in two years, and the number of smartphone subscribers using the mobile Internet has grown 45 percent since 2010. As for tablets, in June 2011 AMI-Partners (Access Markets International) forecasted that tablet adoption among businesses with between 1 and 1,000 employees will grow by 1,000 percent by 2015.

Lets not forget e-readers, which are becoming very affordable and are more advanced then ever, increasing in shipment volume, as year-over-year growth was 167% according to International Data Corporation (IDC). With the introduction of the latest Kindle, mobile Internet access is now becoming a normal experience.

With these increases in adoption rate, there will no doubt be high demand for web developers who can create rich mobile web experiences. The jQuery Mobile framework gives web developers a quick and easy way to create mobile web experiences, making the mobile web space hard to ignore.

As a web developer, you dont have to use the jQuery Mobile framework to create a mobile web experience. So why use it? For starters, the framework is built on the highly respected and widely used jQuery core and jQuery user interface (UI) foundation. Its currently sponsored by companies such as Mozilla, Palm, Adobe, Nokia, BlackBerry, and more. Plus, it works seamlessly across all popular mobile device platforms. The jQuery Mobile team is actively and regularly offering new releases, blogging about new features, and keeping their comprehensive online documentation up to date.

Most web developers and designers agree that browser and cross-platform testing is something they would rather not spend their time on. Imagine all of the devices that could potentially be accessing your mobile website. Then imagine having to test all of those platforms each and every time you build a mobile websitethis would be painstaking and incredibly time-consuming. jQuery Mobile gives you this support from the start, as the team prides the framework on its approach to supporting a wide variety of mobile platforms. The framework is built on clean, semantic HTML, which ensures compatibility with a majority of web-enabled devices.

The framework also includes accessibility features, such as WAI-ARIA (Web Accessibility Initiative-Accessible Rich Internet Applications), a technical specification published by the World Wide Web Consortium regarding the increase of accessibility of webpages, which are integrated into the framework to support screen readers, such as VoiceOver on Apple iOS and other assistive technologies. Simply including the jQuery Mobile framework in your website unobtrusively transforms your code from semantic HTML into a rich, interactive, and accessible mobile experience using jQuery and CSS. As youll see throughout this book, the jQuery Mobile approach makes mobile web development incredibly easy, quick, and efficient, leaving the platform and browser testing up to the jQuery Mobile team.

jQuery Mobile isnt exclusively for web developers; web designers have access to the jQuery UI, which provides complete design control over mobile web applications. Built-in UI widgets, such as list views, dialogs, toolbars, search mechanisms, and a full set of form elements, are all customizable via the theme framework. Later in the book, youll also learn about ThemeRoller, which lets you create up to 26 theme swatches using a simple, web-based interface. User experience (UX) designers also get some love, with access to stencils for OmniGraffle and Visio. And, of course, if you want to get geeky with it, the application programming interface (API) is available to web developers. As a web developer, you can configure defaults, handle many different events, and work with several exposed methods and properties.