ptg8274462 ptg8274462 Tim Kadlec implementing responsive design Building sites for an anywhere, everywhere web ptg8274462 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 r ep ort e r ro r s , pl ea s e s e n d a n o t e t o errata@peachpit.com 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 Te c h ni ca l E di t o r : Jason Grigsby Production Editor: Rebecca Winter Copyeditor: Gretchen Dykstra Indexer: Joy Dean Lee Proofreader: Rose Weisburd Cover Designer: Aren Straiger Interior Designer: Mimi He 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 transmied in any form by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior writ- ten permission of the publisher. For information on geing permission for reprints and excerpts, contact permissions@peachpit.com. NOTICE OF LIABILITY e 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 soware 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 identied throughout this book are used in editorial fashion only and for the benet 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 aliation 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 ptg8274462 For my wife and our beautifuldaughters. ptg8274462 Acknowledgements It is frequently said that writing a book is a lonely, solitary act. Perhaps that is true in some cases, but it certainly wasn’t the case with this book. If this book is any good, it’s 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 rst place. anks for being willing to gamble on me. Margaret Anderson and Gretchen Dykstra for overlooking my horrible mis- use of punctuation and for generally making it sound like I know how to write much beer than I do. Danielle Foster for making the book look so fantastic, and puing up with a few last minute adjustments. Also, to Rose Weisburd, Joy Dean Lee, Aren Straiger, Mimi He, Rebecca Winter, Glenn Bisignani and the rest of the team at New Riders for helping make this book come to life. Ed Merri, 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, they’ve made this a much richer book than it would have otherwise been. Jason Grigsby for making sure I wasn’t 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 he’s also one of the most helpful. I’m thankful to be able to call him a friend. Aaron Gustafson for writing such a great foreword. I’ve been learning from Aaron since I rst started working on the web—to say I’m humbled and hon- ored that he agreed to write the foreword is an understatement. Stephen Hay, Stephanie Rieger, Bryan Rieger, Brad Frost, Derek Pennycu, Ethan Marcoe, Chris Robinson, Paul ompson, Erik Wiedeman, Sara Wachter-Boecher, Ly za Danger Gardner, Kristofer Layon, Zoe Gillenwater, Je 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. is book owes a great deal to their collective awesomeness. IMPLEMENTING RESPONSIVE DESIGNiv ptg8274462 To ever yo ne w hose con ver sations, both i n p erson and onlin e , insp ired the discussion that takes place in this book. is is an awesome community we have going and I’m 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 lling each day with laughs, kisses and hugs. And my incredible wife, Kate. is book, and anything else I do that is any good, is a direct result of her loving support and encouragement. ere are no words powerful enough to express how thankful I am for her. vACKNOWLEDGEMENTS ptg8274462 Foreword By Aaron Gustafson A few years back, photography legend Chase Jarvis smartly observed that “thebest camera is the one that’s 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 aernoon stroll. Or perhaps your infant daughter just pulled herself up on two legs for the rst time. In moments like these, it doesn’t maer that your Leica is siing on a shelf in the other room or that you le your Rebel in the car—what maers is that you have a camera, however crude, in your pocket and can capture this serendipitous and ephemeral moment. Ring on Jarvis’s idea, Stephanie Rieger has made the case that the best browser is the one you have with you.Aer all, life is unpredictable. Opportunities are eeting. Inspiration strikes fast and hard. Imagine yourself as a cancer researcher. You’ve been poring over a mountain ofresearch for months, looking for a way to increase interferon-gamma production in an eort to boost the body’s natural ability to inhibit the development of tumors. Your gut tells you that you’re close to an answer, but it’s just out of reach. en one morning, while washing the exhaustion o in a nice hot shower, it hits you. Eureka! You think you’ve got it—you 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 grab- bing a towel, you pluck your mobile o the counter and head to the journal’s site, only to nd yourself re-routed to a “lite” version of the website that shows you only general information about the publication and prompts you to subscribe. Yo u r  n g e r s le a v e w e t s t r e a k s a c r o s s th e s cr e e n a s y o u fr a n t i c a ll y s c r o ll d o wn the page to nd the inevitable link to “View Full Site” and click it. As the screen loads, you nd yourself hovering 30,000 feet above a patchwork quilt of a homepage that could only have been designed by commiee. IMPLEMENTING RESPONSIVE DESIGNvi ptg8274462 Several minutes of pinching, zooming, and typing later, you nally nd the article, only to discover it’s aPDFand nearly impossible to read on your tiny screen. Dejected, you put down the phone and sulk back into the shower, hoping it will wash away your disappointment. Sadly, browsing the web on mobile is all too oen a frustrating (and occasion- ally dehumanizing) endeavor. But it doesn’t have to be. In the pages of this very book, my friend Tim clearly outlines the steps you can (and indeed should) take to ensure that the sites you help create oer each user a fantastic experience, tailored to the capabilities of her device and respectful of her time, patience, and data limits. Don’t let his small town charm fool you: Timknows this stu inside and out. I learned a ton from this book and I know you will too. Aaron Gustafson is the author Adaptive Web Design: Craing Rich Experiences with Progressive Enhancement (Easy Readers, 2011) FOREWORD vii ptg8274462 This page intentionally left blank ptg8274462 Contributions e discussion around responsive design moves fast. Very fast. is book is intended to be a synthesis of the incredible discussion that is taking place in our community about this topic. To that end, I asked several people if they would be willing to contribute short pieces based on their recent projects and research. Here are the contributions you’ll nd, in order of their appearance in the book: • Ve r t ic a l Me d ia Qu e r ie s, by Ed Mer r i  , p age 7 0 • Performance Implications of Responsive Design, by Guy Podjarny, page102 • Small Phone, Big Expectations, by Tom Maslen, page 136 • Responsive Design and Accessibility, by Henny Swan, page 141 • Selling Responsive Design, by Brad Frost, page 159 • RESS in the Wild, by Erik Runyon, page 210 • Beyond Layout, by Luke Wroblewski, page 242 Each of the seven contributors featured are experimenting with the cuing edge of responsive design. ey’re implementing the techniques discussed in this book, and pushing the discussion forward. I’m incredibly honored to be able to include their contributions—contributions based on hard-earned experience—in this book. CONTRIBUTIONS ix [...]... blank Chapter 1 The Anywhere, everywhere web Only an arrogant man would believe he could plan a city; only an unimaginative man would want to —JOhn Kay 2 ImplementIng respOnsIve DesIgn The Web is an incredibly unstable environment New operating systems emerge daily Browsers are iterating faster than ever On any given day we encounter larger devices, smaller devices, devices with incredibly powerful web. .. responsively built site could serve multiple resolutions from a single codebase Chapter 1 • the anywhere, everywhere web 13 In the article, he urged designers to take advantage of the Web s unique characteristics: This is our way forward Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience We can design for. .. discusses the steps necessary for successfully planning a responsive site • Design Workflow This chapter examines how responsive design affects the design process Specifically, it looks at the deliverables and steps in the responsive design process, and some of the changes we need to make • Responsive Content This chapter discusses how to plan for, create, and display content in a responsive layout • RESS... Web can adapt to any screen and any context It is inherently flexible and malleable This chapter will discuss: • The rapidly increasing diversity of connected devices • Factors such as display size, network speeds, standards support, input methods and context • The impulse to create a separate experience for each situation (a losing battle) • The need for responsive design and what it means to be responsive. .. of the Web becoming responsive In May 2010, Ethan Marcotte wrote an article for A List Apart titled Responsive Web Design. ” The approach he described was both simple and revolutionary He used three existing tools (media queries, fluid grids, and scalable images) to create a site that displayed beautifully at multiple resolutions (Figure 1.4) 11 12 ImplementIng respOnsIve DesIgn Figure 1.4 Ethan Marcotte’s... speaking or writing about responsive design, I try to underline something with great, big, Sharpie-esque strokes: responsive design is not about “designing for mobile.” But it’s not about “designing for the desktop,” either Rather, it’s about adopting a more flexible, device-agnostic approach to designing for the web. 8 This device-agnostic concept is incredibly important We can’t know what devices people... Data An ecosystem of devices demands to be interoperable, and robust data exchange is the easiest way to get going Be responsive to existing and emerging opportunities by defining your data in a way that: enables multiple (flexible) forms of access and notifications; uses standards to be interoperable; focuses on long-term integrity; includes meaningful and permanent references to all content; and supports... 2011) 15 16 ImplementIng respOnsIve DesIgn Figure 1.5 The three layers of a peanut M&M work as a nice analogy for progressive enhancement The content is the peanut, the presentation is the chocolate and the interactivity is the shell.11 Responsive design uses the same kind of thinking to provide appropriate content and layout to a variety of devices You start by creating a baseline experience and, with... than it once was Standards support Thanks to the increased number of platforms, browsers, and devices, competition is at an all-time high New standards and features are being implemented at a faster rate than ever before This increased pace of evolution unfortunately causes as much chaos as it does stability The word “support” is used very loosely It’s not a Boolean property— there are degrees Many... adapt to fit the needs of the user who is this book for? This book is intended for designers and developers who want to start creating sites that display and function well on a myriad of devices You don’t need any experience with responsive design the first few chapters will get you up to speed You should, however, be comfortable with HTML and CSS and at least familiar with JavaScript Chapter 8, “RESS,” . ptg8274462 ptg8274462 Tim Kadlec implementing responsive design Building sites for an anywhere, everywhere web ptg8274462 IMPLEMENTING RESPONSIVE DESIGN: BUILDING SITES FOR AN ANYWHERE, EVERYWHERE WEB Tim Kadlec NEW. blank ptg8274462 CHAPTER 1 THE ANYWHERE, EVERYWHERE WEB Only an arrogant man would believe he could plan a city; only an unimaginative man would want to. —JOHN KAY ptg8274462 e Web is an. Weisburd Cover Designer: Aren Straiger Interior Designer: Mimi He Compositor: Danielle Foster Find code and examples available at the companion website, www.implementingresponsivedesign.com. NOTICE