Tim Kadlec - Implementing Responsive Design: Building sites for an anywhere, everywhere web

Building sites for an anywhere, everywhere web

Tim Kadlec

VOICES THAT MATTER

IMPLEMENTING RESPONSIVE DESIGN: BUILDING SITES FOR AN ANYWHERE, EVERYWHERE WEB

Tim Kadlec

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

Find us on the Web at: www.newriders.com
To report errors, please send a note to

New Riders is an imprint of Peachpit, a division of Pearson Education.

Copyright 2013 by Tim Kadlec

Project Editor: Michael J. Nolan
Development Editor: Margaret S. Anderson/Stellarvisions
Technical Editor: Jason Grigsby
Production Editor: Rebecca Winter
Copyeditor: Gretchen Dykstra
Indexer: Joy Dean Lee
Proofreader: Rose Weisburd
Cover Designer: Aren Straiger
Interior Designer: Mimi Heft
Compositor: Danielle Foster

Find code and examples available at the companion website, www.implementingresponsivedesign.com.

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-82168-3
ISBN 10: 0-321-82168-8

9 8 7 6 5 4 3 2 1

Printed and bound in the United States of America

For my wife and our
beautiful daughters.

It is frequently said that writing a book is a lonely, solitary act. Perhaps that is true in some cases, but it certainly wasnt the case with this book. If this book is any good, its because of all the hard work, patience and feedback provided by everyone who helped along the way.

I owe a huge thank you to...

Michael Nolan, who invited me to write a book in the first place. Thanks for being willing to gamble on me.

Margaret Anderson and Gretchen Dykstra for overlooking my horrible misuse of punctuation and for generally making it sound like I know how to write much better than I do.

Danielle Foster for making the book look so fantastic, and putting up with a few last minute adjustments. Also, to Rose Weisburd, Joy Dean Lee, Aren Straiger, Mimi Heft, Rebecca Winter, Glenn Bisignani and the rest of the team at New Riders for helping make this book come to life.

Ed Merritt, Brad Frost, Guy Podjarny, Henny Swan, Luke Wroblewski, Tom Maslen and Erik Runyon for their incredible contributions. By being willing to share their expertise and experiences, theyve made this a much richer book than it would have otherwise been.

Jason Grigsby for making sure I wasnt making things up along the way and for providing valuable (and frequently hilarious) feedback and encouragement throughout. Not only is Jason one of the smartest people I know, but hes also one of the most helpful. Im thankful to be able to call him a friend.

Aaron Gustafson for writing such a great foreword. Ive been learning from Aaron since I first started working on the webto say Im humbled and honored that he agreed to write the foreword is an understatement.

Stephen Hay, Stephanie Rieger, Bryan Rieger, Brad Frost, Derek Pennycuff, Ethan Marcotte, Chris Robinson, Paul Thompson, Erik Wiedeman, Sara Wachter-Boettcher, Lyza Danger Gardner, Kristofer Layon, Zoe Gillenwater, Jeff Bruss, Bill Zoelle, James King, Michael Lehman, Mat Marquis, Nishant Kothary, Andy Clarke, Ronan Cremin, Denise Jacobs and Cennydd Bowles for the insights, feedback and encouragement they provided along the way. This book owes a great deal to their collective awesomeness.

To everyone whose conversations, both in person and online, inspired the discussion that takes place in this book. This is an awesome community we have going and Im proud to be a part of it.

My mom and dad for their love and words of encouragement throughout.

My lovely daughters for reminding me it was ok to take a break every once in awhile to play and for filling each day with laughs, kisses and hugs.

And my incredible wife, Kate. This book, and anything else I do that is any good, is a direct result of her loving support and encouragement. There are no words powerful enough to express how thankful I am for her.

A few years back, photography legend Chase Jarvis smartly observed that the best camera is the one thats with you. It was a mildly shocking assertion at the time, but it rings true: the perfect shot is rarely planned. Rather, it sneaks up on you.

Perhaps the light is perfectly accentuating the fall foliage on your late afternoon stroll. Or perhaps your infant daughter just pulled herself up on two legs for the first time. In moments like these, it doesnt matter that your Leica is sitting on a shelf in the other room or that you left your Rebel in the carwhat matters is that you have a camera, however crude, in your pocket and can capture this serendipitous and ephemeral moment.

Riffing on Jarviss idea, Stephanie Rieger has made the case that the best browser is the one you have with you. After all, life is unpredictable. Opportunities are fleeting. Inspiration strikes fast and hard.

Imagine yourself as a cancer researcher. Youve been poring over a mountain of research for months, looking for a way to increase interferon-gamma production in an effort to boost the bodys natural ability to inhibit the development of tumors. Your gut tells you that youre close to an answer, but its just out of reach. Then one morning, while washing the exhaustion off in a nice hot shower, it hits you. Eureka! You think youve got ityou just need to refer back to that paper you read last week.

Dripping, you leap from the tub and land on the bath mat. Without even grabbing a towel, you pluck your mobile off the counter and head to the journals site, only to find yourself re-routed to a lite version of the website that shows you only general information about the publication and prompts you to subscribe.

Your fingers leave wet streaks across the screen as you frantically scroll down the page to find the inevitable link to View Full Site and click it. As the screen loads, you find yourself hovering 30,000 feet above a patchwork quilt of a homepage that could only have been designed by committee.