Learning Responsive Web Design

Preface

When the iPhone was introduced in 2007, it was a turning point for web design. All of a sudden web designers lost control of the canvas on which we designed websites. Previously, websites only had to work on monitor screens, which varied in size, but not all that much. How were we supposed to make our websites work on these tiny little screens?

For a while we made mobile websites, optimized for the size of an iPhone screen, that were separate from our “regular” websites. Two sites to maintain wasn’t that bad, but soon there were many phones of varying sizes, and then tablets, and smaller tablets, and eventually we realized we couldn’t make separate sites for each of the possible screens that our websites could be viewed on.

We needed a solution that would work on all screen sizes, a way to design websites that could adapt to the screens they were being displayed on.

It took a while, and a lot of different ideas, before one stuck. Responsive web design is a method of designing websites that are flexible, that don’t rely on a fixed screen size, and that are also able to detect the size of the screen and adjust the design to provide an optimal viewing experience for that device. Ethan Marcotte first wrote about responsive web design (http://alistapart.com/article/responsive-web-design) in A List Apart in 2010.

Like any other new technique, responsive web design had a rocky start. Many people continued to argue—and some still do—that we needed to create separate websites for mobile phones. But with the proliferation of devices on the market today, it’s clear that we can’t rely on one model of mobile phone to be our design target; we have to be able to accommodate all of these devices, with screens at pretty much every measurement you can imagine.

And responsive design has grown, too. It’s no longer just about adapting to screen sizes, but also adapting to the capabilities of different devices, such as touchscreens, retina displays, and slow connections.

As of 2014, 58% of American adults own a smartphone—a phone with an operating system like iOS, Android, or Windows Phone that is feature-rich and allows the user full access to the Web.^[1] And 35% of American adults own a tablet.^[2] We have amazing devices, and responsive design helps us take full advantage of the Web.

However, although the majority of American adults have smartphones, 32% of those polled have a mobile phone that’s not a smartphone. Many of those people use their phones to access the Web using browsers with limited capabilities that may not be able to display all websites as intended. Responsive web design is a solution for that too.

A responsive website starts with a simple, content-focused design that doesn’t rely on advanced Cascading Style Sheets (CSS) or JavaScript and can be displayed on essentially any web-connected device. Using progressive enhancement, the responsive website builds on that, creating a design that is optimized for the size of the screen it’s displayed on and for the capabilities of the device. So the feature phones—the older phones with limited capabilities—get only what they can use, while newer devices get a rich design and interface that fits nicely on the screen and that takes advantage of the features of these devices.

Responsive web design allows us to present the best website possible to all users, regardless of the devices they use. The Web needs to be available to everybody, and responsive design is how we can do that.

Creating a responsive website isn’t just a matter of learning some new bits of code. It’s about reexamining the way we think about websites, focusing on the experience of the user, and making sure that the content and functionality are not afterthoughts to the design.

We also have to change the way we work on websites, moving to a more collaborative process involving designers, developers, and other team members.

There are some new bits of code to learn—but responsive design is not a new programming language. Creating a responsive website requires only HTML, CSS, and sometimes a little bit of JavaScript. If you already know how to make websites, much of what you read in this book will be familiar to you. You’ll need to keep in mind that when creating a responsive website, 90% of what you do is the same as what you do when creating a nonresponsive website. But besides adding on a few new techniques, you need to get the basics right, using properly structured, standards-compliant markup (HTML and CSS). Without that strong foundation, you can’t have confidence that your site will work correctly and display properly across devices.

If you work on websites—whether you’re a web designer, developer, content strategist, UX designer, website manager, IT director, or any of the other myriad of jobs that are involved in creating and maintaining websites—this book will show you how responsive design works, how you can adapt your work processes for responsive design, and how to create responsive websites that will provide an optimal design and user experience for any device.

How This Book Is Organized

The book is divided into four parts.

We start with Part I, which explains what responsive design is and how it differs from other approaches to web design. We’ll also look at creating flexible content that will work well on responsive sites.

Then Part II, outlines the basics of putting together a responsive site. We’ll look at a few parts of HTML and CSS that are essential to making your site work correctly. Then we’ll dive into media queries, the heart of responsive design, and finally we’ll take a look at how to handle images on responsive websites.

Next, Part III, looks at responsive workflow, the step-by-step process for creating a responsive site, starting from the project kickoff meeting and continuing all the way to the site launch. We’ll then go into a little more depth and look at responsive design from a user experience perspective, examining how to make sure your site works with various input methods, such as touch, and how to make sure it functions well for all users, including those using assistive technology.

Finally, Part IV, delves into some of the design elements that need special consideration for responsive websites. We’ll start with typography, which is key to making sure your content is readable across screen sizes. Then we’ll look at how to code responsive navigation and page headers. Finally, we’ll talk about performance, a big issue with responsive design, as we try to make sites with reasonable load times even for users on slow connections.

Who Should Read This Book

This book is for anyone who works with websites. The material is presented in a way that is accessible to everyone, regardless of experience level.

If you’re a developer who is already very familiar with HTML and CSS, some of this material will already be familiar to you—remember that much of responsive design is the same as nonresponsive web design. But there are also things that are different in responsive design. If you don’t have any experience with this approach, this book will get you started with the basics, and also give you an overview of the design aspects of responsive design.

If you’ve never worked with HTML and CSS, you’ll get to see all of the code necessary for putting together a responsive site, and an explanation of how it works. However, this book is not meant to be an introduction to HTML or CSS, so each concept is covered fairly quickly without a lot of detail. If you want to learn HTML and CSS, you should refer to other books and resources that cover them in more depth. But if you don’t actually write code for your job and just want to understand how responsive design works, this book will tell you what you need to know.

If you’re somewhere in the middle, the book will remind you of everything that goes together to make a website, and show you what’s different in responsive design. You’ll see not only the code, but also the design considerations and the theory behind how responsive design works.

How to Contact Us

Please address comments and questions concerning this book to the publisher:

O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
800-998-9938 (in the United States or Canada)
707-829-0515 (international or local)
707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at:

http://oreil.ly/learn-rwd

There is also a companion website to this book (http://www.learningrwd.com) where you can download all of the code samples used.

To comment or ask technical questions about this book, send email to:

[e-mail]

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia

Acknowledgments

A ton of thanks to Scott Berkun. His talk at An Event Apart Seattle in 2012 inspired me to quit my cubicle job so I could move on to better things. Reading Scott’s book Confessions of a Public Speaker (O’Reilly) got me started giving talks on responsive design, which opened up a lot of opportunities for me. And Scott also got me going down the book-writing path by offering encouragement and advice, and then by introducing me to his editor at O’Reilly, who became my editor for this book. Without Scott, I would almost certainly still be unhappily sitting in a cubicle somewhere, and you would not be reading this book.

Thanks to Mary Treseler and everybody else at O’Reilly who was involved along the way.

While I was writing this book, I got married and also moved to a new country. My husband, A.J. Kandy, has been incredibly patient with me as I muddled through trying to write a book in the middle of these major life changes. I am so lucky to have married the most wonderful man in the world.

Of course a huge thank you to Ethan Marcotte, without whom there would not be responsive design for me to write a book about.

Thanks to Matt Bradley for teaching me HTML a long time ago.

A few people went out of their way to help get me moving in the right direction in my career, and I’m extremely grateful for their help: Dan Brown, Jeffrey Zeldman, Vera Rhoads, and Cory Lebson.

And thanks to the many other people who helped me out with encouragement and/or advice along the way: Theresa Amato, Melissa Ballowe, Chuck Borowicz, Erica Ciesielski Chaikin, Glennette Clark, Sibyl Edwards, Veronica Erb, Brad Frost, Robert Hoekman, Jr., Tim Kadlec, Dave Mankoff, Karen McGrane, Jeff Popovich, Chris Schmitt, Jared Spool, Anna Storkson, Sandy Tetreault, Estelle Weyl, and of course, my parents.

Thanks to all the Meetups and other groups that let me come talk to them about responsive design. I had a great time driving around the Northeast and Midwest and meeting so many wonderful people. Hopefully there will be many more trips in my future, as I have a lot more people to meet.

---

^[1] For the full report, see Susannah Fox and Lee Rainie, “The Web at 25 in the U.S.,” Pew Research Internet Project, February 27, 2014 (http://www.pewinternet.org/2014/02/27/the-web-at-25-in-the-u-s/).

^[2] For more information, see Lee Rainie and Aaron Smith, “Tablet and E-reader Ownership Update,” Pew Research Internet Project, October 18, 2013 (http://www.pewinternet.org/2013/10/18/tablet-and-e-reader-ownership-update/).