How to create a responsive web design that adjusts to different screen sizes

Responsive web designs adjust the size and position of images, columns, and other elements based on the size of the browser window.

Many web designers are calling 2013 The Year of Responsive Design.

Responsive web design is increasingly popular because the biggest challenge of web design today is that your pages are as likely to be projected on a giant computer monitor as on a tiny cell phone screen. With responsive design, you create one web page that automatically adjusts to fit the size of a browser window, whether its a browser on an iPhone, and iPad, a 70-inch television screen, or any other device that may ever be used to view your web pages.

Responsive design in action

The best way to understand how responsive design works is to visit a website designed with this approach. Responsive designs respond to differences in the width of a browser window by fluidly adjusting the placement of elements on a web page to fit the available space.

Thus, as you drag the side of a browser to make it larger or smaller, you’ll see the design change in real time. Visit the Antonio Gaudi website, which I designed to demonstrate how responsive design works, and drag the side of the browser window to make it smaller and larger and you’ll see how responsive design works. As you change the size of the browser, you’ll see the page layout change – columns get smaller, navigation links change position and size, and elements shift from side by site to one of top of another.

Visit the same site on an iPhone, iPad, or other device with a small screen, and you will see just the design that is targeted to fit that size device, as you see in the image at the top of this page.

How responsive design works

Responsive designs are created by combining one well-crafted HTML page with multiple sets of CSS styles, and then using media queries to target each set of styles. Media queries are CSS rules that inform a web browser about which set of styles should be applied to the page when the browser window is within a specified size. Essentially, media queries cause the styles applied to a page to change based on the width of the browser window. In most cases, when designers create a responsive design, they create three sets of styles and corresponding media queries, but it is possible to create as many different sets of styles and media queries as you would like:

• Mobile layout: Targets CSS rules that apply when the browser window is 480 pixels and below.
• Tablet layout: Targets CSS rules that apply when the browser window is 481 to 768 pixels. This layout inherits all styles from the mobile layout and adds styles that to apply to the page only when the browser window is in the tablet size range.
• Desktop layout: Targets CSS rules that apply when the browser window is 769 to 1232 pixels.  This layout inherits all styles from the mobile and tablet layouts and adds styles that apply to the page only when the browser window is in the desktop size range.

The two figures below represent a responsive website as it appears in a browser at each of these sizes, and the basic structure of the page that you see if you look at the code ‘behind the scenes’. Notice that the same HTML code is used to create the same number of links and articles and that the order of the elements remains the same. That’s because it’s just one HTML page that makes up the boxes in this design.

These boxes represent the HTML code. The variations of the position and size of the boxes is controlled by CSS.

Below you see how the design look with the images and text in place.

As you create layouts using responsive design, remember that you are not creating three completely different web pages. Instead, you’re creating one HTML file that can respond and adjust to fit each of the target screen sizes defined in the media queries.

That means you need to position all <div> tags and other elements in your HTML document in a way that they can be reduced, enlarged, and rearranged to work in all three of the layouts you create. As a result, one of the biggest complexities as you develop responsive designs is coming up with a basic page structure that lends itself to working on all three screen sizes.

What programs can you use to create responsive web designs?

You can create responsive web designs using almost any program you can use to design websites. If you use WordPress, one of the most popular tools for creating websites and blogs, make sure you use a theme that is responsive. If you search for responsive WordPress themes, you’ll find a growing list of options, and you can always test any new theme by clicking and dragging your browser window to see the design adjust. To learn how to create a WordPress site with a responsive design, watch Janine’s new creativeLIVE course, “Creating Website the Easy Way with WordPress.” If you use a web design program, such as Adobe Dreamweaver, you can design the HTML and set up the CSS media queries yourself, or you can use the new fluid grid layout features include in Dreamweaver CS6. Order Janine’s Dreamweaver CS6 video to learn that approach.

Learn more about Responsive / Adaptive Web Design

• Explore the differences between adaptive and responsive web design.
• Creating a Responsive Design with the Fluid Grid Layout features in Dreamweaver CS6
• Get up to speed quickly with responsive design in Dreamweaver with Janine’s latest Dreamweaver video
• Learn how to create a WordPress site with a responsive design, watch Janine’s new creativeLIVE course, “Creating Website the Easy Way with WordPress.“