Clarissa Peterson - Learning Responsive Web Design: A Beginners Guide

Beijing Cambridge Farnham Kln Sebastopol Tokyo

If you purchased this ebook directly from oreilly.com, you have the following benefits:

If you purchased this ebook from another retailer, you can upgrade your ebook to take advantage of all these benefits for just $4.99. to access your ebook upgrade.

Please note that upgrade offers are not available from sample content.

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 wasnt that bad, but soon there were many phones of varying sizes, and then tablets, and smaller tablets, and eventually we realized we couldnt 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 dont 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 argueand some still dothat we needed to create separate websites for mobile phones. But with the proliferation of devices on the market today, its clear that we cant 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. Its 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 smartphonea phone with an operating system like iOS, Android, or Windows Phone that is feature-rich and allows the user full access to the Web.[] 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 thats 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 doesnt 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 its displayed on and for the capabilities of the device. So the feature phones the older phones with limited capabilitiesget 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 isnt just a matter of learning some new bits of code. Its 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 learnbut 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. Youll 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 cant have confidence that your site will work correctly and display properly across devices.

If you work on websiteswhether youre 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 websitesthis 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.