Kristofer Layon - Mobilizing Web Sites: Strategies for Mobile Web Implementation

Develop and Design

Mobilizing Web Sites: Develop and Design

Kristofer Layon

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 Kristofer Layon

Project Editor: Michael J. Nolan
Development Editor: Jeff Riley/Box Twelve Communications
Production Editor: Myrna Vladic
Copyeditor: Deborah Burns
Technical Editors: Zachary Johnson and Mike Resman
Proofreader: Jan Seymour
Interior Design: Mimi Heft
Cover Designer: Aren Howell Straiger
Cover Production: Jaime Brenner
Compositor: David Van Ness
Indexer: Valerie Haynes-Perry

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 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-79381-2
ISBN 10: 0-321-79381-1

9 8 7 6 5 4 3 2 1

Printed and bound in the United States of America

For Katie.

Ive written two books,
but I still cant put into words
how much I love you.

The goal of this book is twofold: to ease your entry into mobile design and development with examples and case studies, and to encourage and inspire you to start doing mobile work today, iteratively and in baby steps, by mobilizing web sites that you already work on.

So this book is not on the bleeding edge of mobile design approaches and techniques. Rather, it was inspired by many other designers, writers, and speakers who have informed my approaches to mobile design, content strategy, usability, and product management over the past several years. To document and pay homage to these sources of inspiration and best practices, Im grateful that a number of them were willing to coordinate and contribute ideas and interviews about their work in mobile design and development: Ethan Marcotte, Colleen Jones, Luke Wroblewski, and the following people at Happy CogRawle Anders, Stephen Caver, Greg Hoy, Mark Huot, Jenn Lukas, Yesenia Perez-Cruz, Greg Storey, Russ Unger, and Jeffrey Zeldman.

Im also grateful for the contributions of Zachary Johnson, who was my main technical editor again after having that role for my first book. His corrections and suggestions for the HTML, CSS, and JavaScript examples in this book did much to improve and clarify my work. And I am grateful for the additional technical work of Mike Resman, my brilliant intern at the University of Minnesota who collaborated on the development of the first mobile web project I ever worked on. Its his technical skill that made that first project succeed, and its also his work that made of this book possible, as he was either the writer or editor of all of the PHP code that is featured there.

And thanks to Michael Nolan at Peachpit who had enough faith to have me write a second book. I think Michael and I were made for each other, as he feels that signing a project isnt necessarily about finding the right expert for a given topic. Rather, its about finding the right person, at the right time, who has the right idea, and who can execute that idea clearly and on time. I will certainly agree that I am not a mobile expert, but I was excited to propose a book that sought to bring mobile design within reach of the everyday web designer and developer. I firmly believe that acceptable mobile design does not require an expert nor a ton of time and moneyit just requires the decision to give it a try, and a commitment to keep improving on what you learn. Thats what I am doing, and if this book inspires other people to get into mobile design and development, I will consider it to be a success.

Thanks also to my development editor Jeff Riley and the editorial and design staff at Peachpit, whose work led to this book looking as good as it does. And thanks to my supervisor at Capella Education Company, Jason Scherschligt, who was willing to hire me last spring as Capellas new Mobile Product Manager. I have the best mobile job imaginable and work with some of the brightest mobile designers and developers there are.

Finally and most importantly, I thank my family: Katie, Sarah, Grace, Emma, and Anne. You tolerated me leaving for work an hour earlier every day for several months to write this book. It wouldnt have happened without your support and encouragement.

Baby steps.

The phrase gets bandied about so much these days that we often lose sight of its significance.

A babys first steps arent just a few simple motions that get them started. Theyre a profound transformation from seeing the world move around us to taking part. Baby steps change our entire perspective and open up countless new opportunities to not only walk but run, skip, and dance. Theyre our entry into a whole new way of living.

The book in your hands (or on your screen) is also an entry into something new. Something so transformational its fundamentally changing how we interact with our knowledge, our places, and with each other. That something is how we experience the Internet on mobile devices.

Always with us, always connected, fast and powerful mobile devices are taking over and redefining how we find answers, make purchases, share with others, and get things done. According to Jeremy Weinstein (http://goo.gl/Noq9L), in 2009, 50% of all new Internet connections worldwide came from mobiles. Gartner reports that by 2013, mobiles will overtake PCs as the most common web access devices worldwide (http://goo.gl/J64Zn).

If youve got an existing web site, chances are youre already noticing the transition and seeing your mobile traffic rising fast. But if do have an existing web site, do you need to start over to be relevant in the mobile age? How can you and your site adapt to such rapid change?

Baby steps.

Kriss book is filled with themlittle but powerful things you can do today to adapt your current site to the changing web and the growing importance of mobile devices. These techniques will get you started without having to completely rebuild and redesign your current web site. But like real baby steps, theyll also open your eyes to new opportunities and ways of seeing the web. From there, who knows how far youll go.