Stephen Hay - Responsive Design Workflow

Stephen Hay

RESPONSIVE DESIGN WORKFLOW
Stephen Hay

New Riders
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 Stephen Hay

Project Editor: Michael J. Nolan
Production Editor: Rebecca Winter
Development Editor: Margaret S. Anderson/Stellarvisions
Copyeditor: Gretchen Dykstra
Proofreader: Patricia Pane
Indexer: Jack Lewis
Cover & Interior Designer: Charlene Charles-Will
Compositor: Danielle Foster

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

9 8 7 6 5 4 3 2 1

Printed and bound in the United States of America

FOR MARJOLEIN, COLIN, CHRISTOPHER, SARAH, AND LEX.

Writing a book is hard (lets go shopping). And while this isnt a big book, Im amazed at how much workby so many peoplehas gone into it.

Id like to thank Michael Nolan, who saw writing potential in me nine years ago, and again last year when I finally had the mental space to jump into the deep end and try. A friendly man with impeccable taste in authors.

A huge thanks to Margaret Anderson, Secret Weapon of Authors, who was this books emergency power supply. Margaret is half psychologist, half development editor, half mental coach, and half project manager. But wait, you say. Thats four hayup. Indeed. Margaret made my first trek into book-writing territory as painless as it could be. It only hurts when I laugh.

Thanks also to copy editor Gretchen Dykstra, who spiced up all my boring black text by adding red. Lots and lots of red. Gretchen taught me lots about the English language, especially the fact that I dont know how to write it. I think it should become public knowledge that authors are only as good as their copy editors.

A huge thank you to Charlene Will for this books design. Also Rebecca Winter, Patricia Pane, Danielle Foster, Jack Lewis, and the rest of the Peachpit/New Riders team. An incredible amount of work done by a bunch of friendly and talented people.

But thats not all. Oh, no, thats not all. Many thanks to...

Jake Archibald, eerily talented developer, for agreeing to tech edit this book for me. I chose him because of his superior knowledge, friendly demeanor, and politically incorrect humor. He repaid me by telling me that my JavaScript should be more JavaScripty. What does that even mean? Hes an oracle.

Ana Nelson, author of Dexy, which now plays an important role in my work. Thanks to Ana for spending suspicious amounts of time with me on Skype answering all of my questions, and even adding stuff to Dexy so it could accommodate my bizarre use cases. She even taught me a little Python along the way. Im the first official Ana Nelson fanboy; group therapy awaits.

Ethan Marcotte, distinguished gentleman of web design, for his wonderful foreword. He has inspired me for years.

Tim Kadlec, who had just finished his book and was my big example and took all my questions gracefully. Bruce Lawson, for recommending the Secret Weapon. Aarron Walter, Mike Rohde, and Travis Holmes for their image contributions.

And all those who have inspired my workwhether they know it or notin person, online, during conversations, or through their great work. These include Stephanie and Bryan Rieger, Jeremy Keith, Scott Jehl, Christian Heilmann, Remy Sharp, Brad Frost, Lyza Danger Gardner, Karen McGrane, Jason Grigsby, Kristina Halvorson, Peter-Paul Koch, Krijn Hoetmer, Jennifer Robbins, Robert Jan Verkade, Marrije Schaake, Bert Bos, Luke Wroblewski, Vasilis van Gemert, and many, many others. Im privileged to call some of these people my friends.

My mother and my sister, of course, who are always encouraging, and to my father, who would have loved to see this book come to be.

My beautiful, wonderful kids, for having lost some free time with me and for having put up with some serious moodiness on my part.

And finally, Marjolein, my partner in crime. Her support, advice, love, and encouragement are ultimately the reason these words are in print.

I have to be blunt: this is a wonderful book youre about to read.

Theres a quote by Ludwig Wittgenstein that Ive always loved: The limits of my language are the limits of my world. Somethings always seemed magical about that image: the broader your vocabulary, the broader your horizons.

I think of it often, especially as I remember my first studio job. Because looking back, I realize my introduction to web design was, well, pretty narrow, framed as it was by four little words: discover, design, develop, and deploy. Those were, I was taught, the discrete, task-based phases into which each design project was segmented. Research preceded design, and then coding followed, leading to site launch. Simple. Straightforward. Linear.

That model of working felt a bit like a relay race: teams would have to finish their work before the next could begin, handing work down the line before a site could launch. Of course, the truth was often quite a bit messier. And as we began designing beyond the desktop, bringing our work to more and more screens, that old, linear workflow began to show its limitations. Teams need to collaborate more; research, design, and development are more closely related than we once thought, and that old waterfall method kept them siloed.

Thankfully, in these pages, Stephen shares his years of thinking about a more web-native, responsive design process. And as he leads us from design exercises, to a new mode of wireframing, to introducing clients to responsive design, one thing becomes clear: this is a better way to work.

If the limits of our world are set by our language, then Stephens book is a veritable dictionary: one full of concepts and techniques to reinvent the way you think about not only design, but the web in general.

This book is going to make your world so much wider. Enjoy.

Not everything is design. But design is about everything. So do yourself a favor: be ready for anything.