Table Of Content

#4 NEW PERSPECTIVES ON WEB DESIGN Published 2013 by Smashing Magazine GmbH, Freiburg, Germany. Printed in the EU. ISBN: 978-3-944-54-060-3 Cover Design and Illustrations created by Anna Shuvalova. Proofreading: Owen Gregory, Iris Lješnjanin. Editing and Quality Control: Vitaly Friedman. eBook Production: Cosima Mielke. Layout: Markus Seyfferth. Typefaces used: Elena by Nicole Dotin (Process Foundry), Ideal Sans by Hoefler & Frere-Jones. The Smashing Book #4: New Perspectives on Web Design was written by Vitaly Friedman, Harry Roberts, Nicholas Zakas, Christian Heilmann, Tim Kadlec, Mat Marquis, Addy Osmani, Aaron Gustafson, Paul Tero, Marko Dugonjić, Corey Vilhauer, Rachel Andrew, Nishant Kothary and Christopher Murphy. The reviewers are: Sindre Sorhus, Addy Osmani, Brian Arnold, Sean Coates, Sergey Chikuyonok, Ben Dowling, Inayaili de León, Jonathan Snook, Andy Davies, Nicholas C. Zakas, Dan Ariely, Tim Brown, Kristen Bermann, Kalpita Kothary and Joshua Allen. Idea and concept: Vitaly Friedman, Sven Lennartz. All links featured in this book can be found at smashed.by/links. Smashing Book #4. Crafted by the Smashing Magazine’s team and well-respected members of the design community with care and love. http://smashed.by/sb4 Table of ConTenTS 7 Preface by Vitaly Friedman 9 Modern CSS Architecture and Front-End Development by Harry Roberts 49 Writing Maintainable, Future-Friendly Code by Nicholas Zakas 83 The Vanilla Web Diet by Christian Heilmann 113 Culture of Performance by Tim Kadlec 147 Robust, Responsible, Responsive Web Design by Mat Marquis 177 Finding and Fixing Mobile Web Rendering Issues by Addy Osmani 215 Designing Adaptive Interfaces by Aaron Gustafson Table of ConTenTS 249 How to Fix the Web: Obscure Back-End Techniques And Terminal Secrets by Paul Tero 305 The Next Steps for Web Typography by Marko Dugonjić 365 The Two Faces of Content Strategy: Balancing the Needs of Users and Editors by Corey Vilhauer 395 Supporting Your Product by Rachel Andrew 431 The Design of People by Nishant Kothary 465 On Creative Spirit by Christopher Murphy By Vitaly Friedman PREFACE by vitaly Friedman PRefaCe The beauty of the web lies in its longevity and flexibility. Time never stands still in Web development, and the more time you spend on the Web, the more frantic the pace seems to become. Some of you might have started developing websites a while back, others have jumped into Web design just recently; but all of you have probably seen techniques and practices coming and going, tools and libraries praised and neglected, trends appearing and falling over the cliff. The Web is dynamic and versatile—coding techniques aren’t black or white, and our decisions always emerge from those shady gray areas. There are no perfect solutions, and usually it’s a matter of reaching a sound compromise within given constraints. Web design today requires pragmatic, open-minded approaches. 7 PREFACE This book will not change everything you know about Web design and development. Neither will it revolutionize your workflow or your tools. But hopefully it will challenge you to think a bit differently about how you approach design problems and how to meaningfully solve them in real life. Smashing Book #4 is a practical book for professional designers and Web developers. It doesn’t discuss flat design or skeuomorphism, and it isn’t concerned with visual styles or trends. With New Perspectives on Web Design, we want to explore handy techniques and smart strategies derived from actual projects. Covering both technical and design aspects of Web design, this book provides insights into scalable front-end architecture, obscure back-end tricks, responsible responsive Web design and performance optimization, but also adaptive interfaces, Web typography, content strategy, customer support, the creative process, and the psychology of human behavior on the Web. We can’t foresee what is coming up next. But we can look closely at the state of the art today, and keep improving our workflow with small, gradual enhancements—learning from our colleagues and from our own experiences. And this is exactly why this book exists—to keep up with, enrich and improve the wonderful, flexible, unpredictable Web that has become an integral part of our lives over all these years. 8 Chapter 01 Modern CSS architecture and 8. CSS Architecture and Front-end Development for Today’s Web front-end Development Written by Harry Roberts CHAPTER 1 Modern CSS Architecture and Front-End Development 10