Responsive Web Design: How to Make Websites That Look Great on Any Screen

Responsive Web Design: How to Make Websites That Look Great on Any Screen
The web has always been a work in progress, but never so much as in the last few years. The introduction of the iPhone in 2007 opened a vast new world where we were able to view the real internet—not a stripped-down mobile web—from a tiny computer we could carry in our pockets.

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.

Screen Shot 2013-02-11 at 4.33.39 PM

Screen Shot 2013-02-11 at 4.33.54 PM

Screen Shot 2013-02-11 at 4.34.07 PM

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

Responsive Resources

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. That’s 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.

More Guides You Will Love

The 5-Step Process for Finding the Best Designer and Developer for Your Business Building a website for your small business is a lot like breathing.  It’s an essential.  If you read my last post, you heard about my unpleasant experience with building my own site.  My experience was an extreme one.  Still,...
A Beginner’s Guide: The 5 Steps to Great Design for Your Startup Before embarking on a ship with some of the most innovative entrepreneurs for Unreasonable at Sea, an accelerator circumnavigating the globe designed to solve the world’s most urgent social problems, I figured that the compan...
Great Design Can Make or Break a Startup I’m a firm believer that design can be a game changer for businesses. This is especially true for startups. Great strategic design can be the difference between a startup's success and failure in the early days of hitting the...
The Basic Elements of Visual Design This past week in our The Starter League UX class, we dove right into the basic elements of visual design. The purpose of the class wasn't to go in depth on visual design, but rather, to become familiar with basic terminol...
Building a Website? Make Sure You Choose Design Patterns and Build Wireframes First. It’s Week #6 of the UX Design class I’m taking at The Starter League! By the way, they are still accepting some late applications for the spring quarter, but spots are really limited–so make sure you sign up very soon if you'...
UX Design: What Features Should You Include When Building Your Product? It’s Week #5 of the UX Design class I’m taking at The Starter League. Last week, we talked about tools you can use to build your best product. This week, we're diving right into the nitty gritty of product usability analysis,...
UX Tools You Can Use to Build Your Best Product It’s Week #4 of the UX Design class I’m taking at The Starter League. Last week, we covered techniques to help you define your user base and position your product. And what better way to start this week off than by talking ab...
Starter League UX Design: How to Define Your User Base & Position Your Product It’s Week #3 of the UX Design class I’m taking at The Starter League. After covering top visual design techniques and research methods last week, we dove right into affinity diagramming, user modeling, and product vision. It'...
The Starter League UX Design: Top Visual Design Techniques and Research Methods It's Week #2 of the UX Design class I'm taking at The Starter League. After covering UX design heuristics last week, we dove right into these three topics: Visual Design Principles Conducting Surveys Conducting Field ...
The Starter League: An Intro to UX Design "Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it's really how it works." - Steve Jobs I just took my first Starter League class: User Experience (UX) Design. If yo...