Matthew Carver - The Responsive Web: The Web - Past, Present, Future

For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact

Special Sales DepartmentManning Publications Co.20 Baldwin RoadPO Box 261Shelter Island, NY 11964Email: orders@manning.com

2015 by Manning Publications Co. All rights reserved.

No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps.

Recognizing the importance of preserving what has been written, it is Mannings policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without elemental chlorine.

Manning Publications Co.20 Baldwin RoadPO Box 261Shelter Island, NY 11964

Development editor: Cynthia KaneTechnical development editor: Roberto AlarconTechnical proofreader: Valentin CrettazCopyeditor: Andy CarrollProofreader: Melody DolabTypesetter: Marija TudorCover designer: Leslie Haimes

ISBN: 9781617291241

Printed in the United States of America

1 2 3 4 5 6 7 8 9 10 MAL 19 18 17 16 15 14

In May 2010 I read an article on the A List Apart website. If you picked up this book, its likely that you know the article Im talking about. Youve probably read it and heard it quoted, picked apart, debated, and discussed. Now, nearly four years later, that article is the basis of one of the biggest movements on the web since the web standards movement of the late 90s.

When Ethan Marcottes article, Responsive Web Design,[] was published, I was still new to web development, having just started a job at my first web production agency. It had been a few months since I had bought my first iPhone and I had just started coding sites for mobile and including mobile stylesheets in my projects. I was struggling to find a good solution to mobile web development, like many developers at the time.

http://alistapart.com/article/responsive-web-design.

The iPhone changed everything and was quickly becoming my favorite way of browsing the web, but websites looked like garbage on it. Ethans article came as a revelationand a relief. It provided a clear path to solving a huge and immediate problem in my development workflow, and by June 2010 I started including media queries in all of my work. Responsive web design gave me something new and exciting to add to my projects and thoroughly solved the problem of mobile web design.

Beyond the technological challenges, responsive web design introduced me to a new way of working. Responsive design needs a collaborative workflow that requires equal input from both visual designer and developer. This is what excited me. Having been on both the design and development sides of the web, Id always felt that harmony between both sides is the key to creating incredible digital experiences. This became the part of responsive design that stuck with me: the need for creativity in code and for design to be translated into front-end development early on.

I have this habit: whenever I find something interesting, I want to tell everyone about it. If youve ever spent more than a few minutes in my company youve probably heard me rant about any number of nerdy topics. Just try to bring up comic books, baseball, or whiskey and buckle up for some opinionated rambling. Responsive web design was no different. I told everyone I could about it and eventually had the privilege of talking about the subject at web conferences.

With this book I get to completely indulge my nerdy habit. The book represents an unboxing of my passion for what I see as a huge step in the maturity of the web. I believe the web to be one of the most important inventions in human history. The sharing of information among people is important for both inventiveness and creativity, and the web facilitates this sharing of ideas and information better than any medium in human history.

Hopefully this book will help you gain a new understanding of responsive web design. My goal was that the book would not only encourage you to start implementing responsive design, but also give you tools and language to facilitate collaboration between designers and developers. This book should facilitate the understanding you need to be part of building a new, device-agnostic web.

This book has been the combined work of a team of extraordinary collaborators. Thanks to these people Ive been able to do something I never thought myself capable of. I want to take this opportunity to thank these people from the absolute bottom of my heart. First, Id like to thank Brandon Satrom and the team who made the HTML5.tx conference possible. Without that first opportunity to share my passion on a public platform, this book would have never been possible. Id like to thank John Tornow and Randy Bradshaw, who provided me the mentorship and encouragement I needed early in my career to foster my ambition and lead me to this. I would also like to thank Chris Williams, Brooks Oakley, Justin Tabor, James Henningson, Brian Linder, and Cory Hudson for their support, encouragement, advice, and genius.

The work of writing this book hasnt been easy, especially for my collaborators at Manning. The team at Manning has been an absolute joy to work with. During the writing of this book, my life has been an adventure and through it all, the team at Manning has been fundamental in making this book possible. First, I have to thank my development editor Cynthia Kane for her guidance, patience, direction, and counsel. Cynthia went above and beyond the call of duty, time and time again, to help transform my work into something special and I will never forget the hard work she put in to help me do something I never could have imagined. Id like to thank Roberto Alarcon for his contribution to my writing, and Andy Carroll for his copyediting and for catching a near-embarrassing level of grammatical errors and typos. I would like to thank Valentin Crettaz for his thorough work as technical proofreader; his advice and commentary were invaluable. And I would like to thank Kevin Sullivan for his work on making all the images in this book look their absolute best.

Special thanks to the following reviewers who read the manuscript at various stages of its development and who provided feedback that resulted in a much better book: Adam Murray, Benot Benedetti, Brian Bush, Bruno Sonnino, Christopher Weiss, Daniele Midi, David Landau, Dr. Martin Beer, Gary Kirrene, Gregor Zurowski, James Bisiar, Jeff Smith, Joel Kotarski, John D. Lewis, Mike Donahue, Nikolaos Kaintantzis, Sebastian Felling, and Sergio Arbeo.

Finally, I would like to thank my wife, Alex. Shes been the backbone of my life and my pillar of strength for the last six years. Without her love and support I dont know where I would be today. She encouraged me when I was starting out as a lowly freelance web designer, building sites at night and waiting tables in the day to make ends meet. She gave me the confidence to pursue my first serious job as a web developer and was there for me when times got tough. She listened to me ramble about web design for hundreds of hours and helped me consolidate my thoughts so I could write this book. She even helped edit my first few blog posts on responsive web design. Im the luckiest man in the world to know her. Alex, youre the love of my life.