The Responsive Web (2015)
Preface
In May 2010 I read an article on the A List Apart website. If you picked up this book, it’s likely that you know the article I’m talking about. You’ve 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 Marcotte’s article, “Responsive Web Design,”[1] 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.
1 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. Ethan’s article came as a revelation—and 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, I’d 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 you’ve ever spent more than a few minutes in my company you’ve 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.
About this Book
Responsive web design is a technique of designing websites that scale for various browsers, including mobile, tablet, and desktop. It’s made possible through CSS3 Media queries and offers developers the opportunity to design a site once for multiple devices. While the technique is seemingly simple, the practice itself involves several challenges.
In this book we’ll discuss topics related to the practice of responsive web design that will not only give developers the opportunity to sharpen their technical skills, but will also teach designers how to design for this technique. The goal of this book is to not just present the technical challenges, but to elaborate on the design and collaborative challenges that a team faces when embracing responsive web design.
This book is not simply a manual full of step-by-step “how-to” examples. It includes insights for designers and developers into the reasoning behind the practical components of responsive web design, as well as associated tips. Each chapter is not only followed with a summary, but also includes discussion points for internal reflection or conversation starters between designer and developer. My hope is that this book is read among a team and sparks your imagination and strengthens your conversation around responsive web design. Web design is a team sport and hopefully this book will serve as a coach for your team as you delve into this new practice.
Roadmap
This book has nine chapters divided into three parts, and two appendixes, one of which is available online only.
· Chapter 1 gives an overview of how to work on a responsive website as a team. It introduces some core concepts and history of the practice.
· Chapter 2 focuses on designing for mobile screens and some of the challenges facing designers creating for smaller device screens.
· Chapter 3 introduces style tiles, a mood-board-like deliverable for articulating design style without providing layout.
· Chapter 4 gives an outline of responsive design patterns. It introduces the concept of a design pattern and gives a few examples of solving common design and layout problems in responsive design.
· Chapter 5 covers responsive layouts, focusing on grid systems and adapting page layouts through screen size changes.
· Chapter 6 starts the discussion of the challenges of responsive content. In this chapter you’ll find information about how content can adapt to changing screens.
· Chapter 7 offers some insights into CSS3, specifically around adding visual graphics and style to a responsive page. It covers responsive images and video, as well as some tips and tricks about creating pages that take full advantage of CSS to scale a sites design.
· Chapter 8 introduces Modernizr, a fundamental tool for cross-browser compatibility and mobile asset optimization. You’ll learn how to use Modernizr to improve site performance and effectively ensure cross-browser and cross-device compatibility.
· Chapter 9 teaches some tips for responsive testing and gives an explanation of web inspector tools so you can effectively optimize your websites.
· Appendix A “Context-aware design” is included in the book. Appendix B “Foundations” is available online at www.manning.com/ The ResponsiveWeb.
Who should read this book?
The Responsive Web is a book for both sides of the front-end development coin. It’s intent is to satisfy the questions posed by both designer and developer, while inspiring curiosity about the future of the web and confidence in the reader’s ability. Anyone involved in a web design project can benefit from reading this book: designer, developer, or even manager.
A basic understanding of HTML and CSS will help during the development portions of this book. Ideally the reader of this book would have basic understanding of the core concepts and processes involved in web design and development. Being a coder isn’t required and much of the book covers nontechnical strategy and advice, but some familiarity with basic HTML will provide a richer experience for all readers.
If you have any degree of interest in building, designing, or collaborating with teams that build responsive websites, this book is absolutely for you. It will provide substantial background to all areas of responsive web development.