More phones and devices followed in every size imaginable, but we soon realized that having the internet in our pockets isn’t quite so simple. Websites designed for desktop-sized screens appear tiny, forcing users to zoom in and out to view content. Separate mobile sites soon started popping up, but the greater the number of devices that became available, the more we realized that it’s impossible to create a separate website (with a separate set of HTML & CSS) for every possible screen size.
Responsive web design was the solution to this problem, a way to make a website that displays appropriately on every screen size, but by using only one set of code.
In a responsive design, the website responds to the size of the browser window, whether it is a couple inches wide on a mobile phone, or 30 inches wide or more for a maximized browser window on a widescreen monitor—along with any size in between.
The two main qualities of a responsive design is that it is adjustable and flexible.
Adjustable
Adjustable means that the layout or other qualities of the design are able to change based on the width of the display. This is most commonly used by developers to change the number of columns in a layout. A desktop monitor might be wide enough to display three columns, while a small screen may stack all of that content into one column. This is done in the CSS via media queries.
Essentially, media queries allow you to ask a question, and then provide changes to the website’s styles based on the answer to that question. For example, you might start with CSS that displays the website content in one column, for narrow-width screens. You then could include a media query that asks, “Is the browser window wider than 600 pixels?” If the answer is yes, you could provide additional styles that will make the content display in two columns instead of one. So, the website would display in two columns only if the browser window is wider than 600 pixels.
Other adjustments can be made to a website’s design using media queries. For example, a narrow screen might show the site navigation in a dropdown menu, while a wide screen may have enough space to display all the navigation items in a horizontal bar.
As an example, visit the United Pixelworkers website and resize your browser window from full screen to narrow, watching as the layout changes the number of columns, as well as other parts of the layout like the navigation at the top of the page.
Flexible
The second quality, flexibility, just means that elements on the page can expand to fill available space. You’ve probably seen fixed-width websites that show lots of empty white space on either side of the design when it’s viewed on larger monitors. By giving page elements widths in percentages rather than a fixed number of pixels, and by allowing images to scale down in size so they always fit inside these flexible columns and other page elements, a website design can make use of the entire browser window no matter what size the screen is.
As an example, visit the TIME website and resize your browser window from full screen to narrow, noting how as the columns get narrower, the text wraps and the photos get smaller so they continue to fit inside the column, regardless of width.
Responsive websites have designs that are both adjustable and flexible, and will work at any screen width.
Websites That Work Anywhere
As mobile devices, tablets, and monitors become available in more and more sizes, and as the use of mobile devices becomes even more prevalent, we need to make sure that websites are designed to display properly on all screen sizes.
Responsive design will allow you to make sure that everyone is able to access your website, no matter what type and size of device they are using.
Additional Resources
Responsive Web Design: What It Is and How To Use It
A Primer on Responsive Design: From Content to Development
How to Approach a Responsive Design
Interested in hearing more about Responsive Web Design?
Check out Clarissa’s talk “Responsive Design in the Real World” at Snow*Mobile Conf in Madison, WI. Two days under one roof sharing everything mobile. Thats right, meaningful discussion about Mobile Development (iOS, Android, Window Phone, Mobile Web) in Madison. Additionally, there are four restaurants, a bowling alley, a rock climbing wall, ice cream shop, and Live Music both nights of the event.