G. Avola - Smashing Mobile Web Development

Smashing Mobile Web Development

Going Mobile with HTML5, CSS3 and JavaScript

Greg Avola and Jon Raasch

This edition first published 2013

2013 Greg Avola

Registered office

John Wiley & Sons Ltd, the Atrium, Southern Gate, Chichester, West Sussex, PO19 8SQ, United Kingdom

For details of our global editorial offices, for customer services and for information about how to apply for permission to reuse the copyright material in this book please see our website at www.wiley.com.

The right of the author to be identified as the author of this work has been asserted in accordance with the Copyright, Designs and Patents Act 1988.

All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, except as permitted by the UK Copyright, Designs and Patents Act 1988, without the prior permission of the publisher.

Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books.

Designations used by companies to distinguish their products are often claimed as trademarks. All brand names and product names used in this book are trade names, service marks, trademarks or registered trademarks of their respective owners. The publisher is not associated with any product or vendor mentioned in this book. This publication is designed to provide accurate and authoritative information in regard to the subject matter covered. It is sold on the understanding that the publisher is not engaged in rendering professional services. If professional advice or other expert assistance is required, the services of a competent professional should be sought.

Trademarks: Wiley and the John Wiley & Sons, Ltd. logo are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates in the United States and/or other countries, and may not be used without written permission. All trademarks are the property of their respective owners. John Wiley & Sons, Ltd. is not associated with any product or vendor mentioned in the book.

iPhone, iPad and iPod are trademarks of Apple Computer, Inc. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in the book. This book is not endorsed by Apple Computer, Inc.

ISBN 978-1-118-34816-1 (paperback); ISBN 978-1-118-34815-4 (ebook); ISBN 978-1-118-34812-3 (ebook); ISBN 978-1-118-34813-0 (ebook)

A catalogue record for this book is available from the British Library.

Set in Minion Pro 10/12 by Wiley Indianapolis Composition Services

Printed in the United States by Command Web Missouri

Publishers Acknowledgments

Some of the people who helped bring this book to market include the following:

Editorial and Production

VP Consumer and Technology Publishing Director: Michelle Leete

Associate DirectorBook Content Management: Martin Tribe

Associate Publisher: Chris Webb

Executive Commissioning Editor: Craig Smith

Assistant Editor: Ellie Scott

Development Editor: Sydney Jones

Copy Editor: Debbye Butler

Technical Editors: Jon Raasch and Greg Avola

Editorial Manager: Jodi Jensen

Senior Project Editor: Sara Shlaer

Editorial Assistant: Leslie Saxman

Marketing

Associate Marketing Director: Louise Breinholt

Marketing Manager: Lorna Mein

Senior Marketing Executive: Kate Parrett

Composition Services

Compositor: Indianapolis Composition Services

Proofreader: Wordsmith Editorial

Indexer: Potomac Indexing, LLC

For my Grandparents, who have inspired me to always reach for excellence.
For my loving wife, who has given me strength and support to always follow my dreams.
For my parents, who laid the framework of my growth and are my role models.

About the Authors

Greg Avola is a co-founder and CTO for a social startup, Untappd, that helps users track, recommend, and discover new beers, breweries, and beer venues. The Untappd mobile app was built using the HTML5/CSS/JS technologies that are discussed throughout this book.

Jon Raasch is a front-end developer and designer who has been programming for the web for more than 15 years. Using modern programming techniques, he designs user interfaces that are dynamic and engaging and make full use of full engine spiderability. By integrating design, development, and branding, he makes websites that are as accessible to users as they are to Googlebot.

Part I: Introduction to HTML5/JS/CSS

Chapter 1: Introduction to Mobile Web Development

About 10 years ago, few people had a mobile phone, and if they did, the phone did not have a mobile web browser. Fast-forward to 2012. Almost 30 percent of the worlds population now has some mobile device that enables them to browse the Internet, chat, or send text messages (source: http://www.wired.com/gadgetlab/2011/11/smartphones-feature-phones/). Millions of people depend on their phones, not only as a device in which to hold conversations, but also to search, discover, and learn about new things while on the go.

With the total population of smartphones rising, businesses should be conscious about this opportunity to reach new customers. Once considered a luxury device, the smartphone is now readily available on most mobile networks at a reasonable price. In some areas, such as the United States, people use their cell phones as their main phone lines instead of the once common landlines.

More and more people are browsing the web from their mobile phones, and businesses need to find a way to reach new customers by making their websites, now commonly known as web apps, mobile friendly. Most companies develop websites for a desktop experience first; its hard for them to go back and rebuild the same experience for the mobile platform.

This chapter discusses relevant background information about devices and design patterns for your mobile web app. Its important to understand these concepts at the start so you dont have to backtrack and redevelop your application to make it conform to the design standards for each operating system.

You also learn some new techniques to conquer device orientation, viewports, and custom fonts within mobile web application. Understanding these topics is essential to creating a great experience for your users. In addition, this chapter explores other popular mobile applications to provide guidance on the best practices and inspirations for your mobile web app.

Most people commonly think that its very difficult to build a mobile website. The fact is that a mobile web browser has many tools and features that most people dont know exist. At the conclusion of this book, you will understand the concepts behind mobile web development and be able to design and develop your own web app using the latest technologies very easily.

Mobile Web Examples

You can learn and draw inspiration from a plethora of mobile websites. Sometimes its even hard to see the difference between mobile web apps and native applications. The following examples demonstrate what you can do with the mobile web.

Facebook: Facebooks user interface (UI) changed a lot over the last six to eight months, but its developers are committed to providing the best user experience no matter what device is being used. With a combination of CSS and HTML5 elements, Facebook developers were able to mask their native iPhone app to look similar to their web app. Facebook uses the geolocation element in HTML5 to grab your location and help you check into your favorite spots. To help the website load faster, the user uses caching on the browser HTML5. I touch on these features later in the book and explain how to use them in your own applications. The difference between the Facebook web app and native applications is so minimal that many users cant tell the difference. When this occurs, you know youve done your job right.