Understanding the Elements of Responsive Web Design

Mar 14 2011 by Jason Gross | 30 Comments

Understanding the Elements of Responsive Web Design

Responsive web design is undoubtedly a hot topic in web design right now. To some degree, the popularity of the concept of responsive web design is well deserved because site users are increasingly diversifying their methods of accessing a website. iPad, iPhone, Android mobile devices, desktops, netbooks — we’re in a time where our web designs must function in a multitude number of ways.

Let us explore the meaning and principles behind responsive web design.

Key Features of a Responsive Web Design

In order for a web design to be considered "responsive," it needs to have three key features. Web designer/developer Ethan Marcotte — the author who conceptualized responsive web design — describes these features as:

  • The site must be built with a flexible grid foundation.
  • Images that are incorporated into the design must be flexible themselves.
  • Different views must be enabled in different contexts via media queries.

CSS-Tricks changes its web layout depending on the size of the browser’s viewport.

It is important to note that all three features need to be implemented in order for a truly responsive web design to take place.

Any design that lacks these features is simply not a responsive web design. It is that cut and dry.

Next, let’s dive deeper into these three features in order to better understand how they work together to bring us a completely responsive web design.

Flexible Grid

The term grid as it pertains to web design is getting murkier. Saying that your site must consist of a flexible grid does not mean that you are restricted to choosing from one of the dozen or so great grid systems out there.

Defining your own parameters for columns, spacing and containers is often the best solution for a web design and can be just as flexible as any existing system out there.

In fact, most existing grid systems restrictively use CSS classes to define size, space and alignment. Trying to superimpose these limits onto a responsive web design can be tricky and more time-consuming compared to coding your own grid.

Whether you’re using a premade grid system or creating a custom solution, the truly important aspect of a flexible grid system is in the mechanics of your layout sizes and spacing.

For web designers, this means abandoning our beloved pixels and replacing them with web layouts that use percentages and em’s, which are relative units of measurement.

Of course, this doesn’t mean we stop working with pixels in our image-editing software (i.e. Photoshop, Fireworks, etc.). Instead, an added step that involves a little bit of (totally basic) math becomes a part of the web design process as we convert our pixels into web layouts that use a relative unit of measurement.

St Paul's SchoolSt Paul’s School website is on a flexible grid that changes the layout depending on the size of the browser’s viewport. A change in the layout is indicated by slick, smooth animation.

Flexible Images

Images that move and scale with our flexible grid is another key feature of a responsive web design. Flexible images often give web designers a bit of a headache. Loading in huge, oversized images that we scale down using width and height HTML attributes when we want more space for text content on smaller browsing devices is not a good practice for faster web page load times.

Of course, how big of an issue this is also depends on how image-heavy your site is. As web design evolves, we are constantly seeing sites that incorporate fewer and fewer unnecessary images and stock photos. Perhaps this is a good time to evaluate whether your web design needs to be as image-heavy as it currently is.

An alternative to scaling images is cropping them with CSS. The CSS overflow property (e.g. overflow: hidden) gives us the ability to crop images dynamically as the containers around them shift to fit new display environments.

We can also have multiple versions of the image on the server, and then dynamically serve the appropriately sized version depending on the user agent using server-side or client-side feature detection in tandem with DOM manipulation.

Finally we have the option to hide images altogether if we really want to put focus on the non-image content, using media queries that serve a stylesheet which sets the display: none property for images (or a subset of images by assigning optional images a class like optional-img to allow for greater CSS selector specificity in your stylesheet).

Think VitaminImage elements on Think Vitamin are flexible; they scale depending on the browser viewport’s size.

Media Queries

Media queries are arguably the most exciting (and most intimidating to web designers unfamiliar with them) feature of a responsive web design.

Oftentimes, people get carried away with media queries, thinking of them as the core component of a responsive design and leaving flexible page components optional. The reality of the situation is that media queries are hardly useful without the existing implementation of a rock-solid HTML and CSS foundation that includes not only a flexible grid, but flexible images as well.

Media queries allow designers to build multiple layouts using the same HTML documents by selectively serving stylesheets based on the user agent’s features, such as the browser window’s size. Other parameters are orientation (landscape or portrait), screen resolution, color (i.e. how much color the screen can render), and so on.

Here is an example of media queries that serve a stylesheet depending on the width of the viewport:

<link rel="stylesheet" media="(max-device-width: 320px)" href="mobile.css" />
<link rel="stylesheet" media="(min-width: 1600px)" href="widescreen.css" />

Media queries are not specifically a mobile solution or a tablet solution (thought they’re often associated with them as such). Instead, media queries and responsive design allow us to think outside of the constraints of a screen size or resolution and start building websites that flexibly adapts to (theoretically) all the different mediums.

UX LondonUX London uses meta viewport to set the scale and layout width.

What Responsive Web Design Really Is

As we look over the three features of responsive web designs, there really should be very little to be excited about. The truth is that 90% of what makes up a responsive web design is simply good web design to begin with. Well-formed HTML and a flexible layout should be a part of the daily digest for the modern web designer. What Marcotte has done by advocating responsive web design is simply to show us a new way to implement the good design practices we should already be doing anyway. In a modern context, given that the need for flexible layouts is even more imperative now so that we can better accommodate the wider array of browsing situations currently in existence, we need designs that are fluid and flexible.

Responsive web design forces us to take the time to do things right, not just in how we code, but how we conceive new ideas and execute fresh designs.

8 Faces magazine8 Faces magazine has a flexible web layout.

We’re Not There Yet

Anyone who has put some time into working with flexible content and media queries will have realized that this is still not the end-all, be-all solution to building websites that cater to every single user agent. Users who browse to the web through different devices often have different wants and needs depending on the device they’re using.

A user on a mobile web browser will most likely be interested in accessing core information as quickly as possible. For restaurants, this could mean menus, phone numbers to make a reservation, physical address, and so forth. For situations like this, loading up an entire site and then hiding 90% of it clearly doesn’t present an ideal solution.

The Right Direction

What responsive web design becomes, then, is a step in the right direction. A lot of sites stand to gain a lot from a responsive design, and every designer should certainly be capable of executing this solution and searching for ways to optimize their designs.

While designers continue to make headway on solutions that allow our designs to be experienced as intended on every device and situation, the devices, in turn, should strive to display the Web in the most ideal and intuitive way possible.

As both sides steer toward each other, we will inevitably have more and more of an opportunity to build a Web that is more dynamic, more engaging, and more beautiful.

And that is something worth being excited about.

Related Content

About the Author

Jason Gross is a freelance web designer focused on creating clean and user friendly websites. Jason currently lives in Indiana and can be found on Twitter as @JasonAGross or on the web at his personal blog and portfolio.

30 Comments

Justin Marsan

March 14th, 2011

Hi,

First of all, nice article, responsive design probably is the future of the web and an article like that can’t hurt!

Second of all, I currently making my own responsive-content framework. Unlike responsive-design framework it allows to really change the content of the page, using clean JS techniques. It’s built with performances in mind to provide perfect experiences for all the users no matter the device they are using.

https://github.com/justinmarsan/MobileReadyFramework

Give it a try, it’s stable!

Nick Burd

March 14th, 2011

This was a very informative article. Thank you Jason.

Tom

March 14th, 2011

I need to get dig into this more. I can see how it can be beneficial.

Chris

March 14th, 2011

I just finished a website at http://www.css3files.com that makes heavy use of this technique and I am very excited what is possible. Especially in the days of smartphones every website should at least be a bit “responsive”.

Pictrix

March 14th, 2011

Does anybody know how to implement responsive jQuery slideshows? I have tried using overflow:hidden and percentages and ems for the height of the containing div in order to prevent all images being displayed vertically when loaded, so far without any success. I’ll appreciate any suggestions.

Jack

March 14th, 2011

Surprise you didn’t mention http://webdesignerwall.com as a responsive example.

pixeltunnelvision

March 14th, 2011

Kinda sounds like this could have been shortened to “Never used fixed sizes for stuff. Not even images. Enjoy your headache. The end.” Not hating, just sayin’. The use of px in design isn’t going away anytime soon, though.

Jason Gross

March 14th, 2011

@Jack

Good call, the new web designer wall design is a great example of responsive design. However, the new design wasn’t up when I wrote this article :p

John Penlington

March 14th, 2011

A very helpful article, thanks. I’m experimenting with a little online magazine <a href="http://www.bloogle.com.au/whistler&quot;.
It’s far from finished, but proved to me the potential value of RWD. There’s a danger that some people will assume RWD is being promoted as a one size fits all, but that wasn’t what Ethan Marcotte was claiming. It’s simply a very useful technique for some sites. Others may be best served by separate device specific sites.

Peter / Stockfresh

March 14th, 2011

@Jack: Thanks for the tip, the new WDW is awesome!

Hannah Hurst

March 15th, 2011

A really informative and well written article. I think responsive web design is definitely the future and I need to learn more about this.

This article was a good start. Thanks for sharing.

limelight

March 15th, 2011

Thanks for posting this! I’m looking for a medium that can help us to get a good amount of promotion for my websites which in return gave me a business too through websites and I must say this has definitely helped me in this process.

Matt P

March 15th, 2011

Excellent article, I’m dabbling in all this myself on some projects and appreciate all the thoughtful ideas people are sharing about this approach…

Howver, I’m curious about your assertion that if a responsive design doesn’t include all of your three features, it is “not a responsive web design. It is that cut and dry.” I didn’t really see that explained in the piece… and I’m not sure that’s true.

For example, suppose I use media queries and flexible images, but I don’t use a fully flexible grid, perhaps because a client doesn’t quite like the feel of that. Why isn’t that still better, or at least MORE responsive than a one-size-fits-all fixed layout? If I use two of the three responsive web features to create a mobile version of a design that renders much better for small phone-sized screens, why isn’t that still responsive web design?

Hannah

March 15th, 2011

@openbox9

This is a very helpful article as it breaks down designing for multiple platforms into easy to understand concepts and achievable steps. Thanks for putting this together.

Gerrid Smith

March 15th, 2011

Nice article Jason. Definitely good tips on building more usable web designs.

Thanks,
Gerrid

Bob Dye

March 15th, 2011

“For web designers, this means abandoning our beloved pixels and replacing them with web layouts that use percentages and em’s, which are relative units of measurement.”

Not true. There is nothing about Responsive Web Design that prevents having fixed-width grid columns. You simply use media queries to move them around when needed.

For example, the menu and sidebar at http://webdesignerwall.com are fixed-width.

Avangelist

March 15th, 2011

Sorry, I didn’t get past the first section.
Utter twaddle, you can tell Ethan that from me.

Responsive:

–adjective
1. responding especially readily and sympathetically to appeals, efforts, influences, etc.: a responsive government.
2. Physiology . acting in response, as to some stimulus.
3. characterized by the use of responses: responsive worship.

* The site must be built with a flexible grid foundation. (says who????? how is that relevant)
* Images that are incorporated into the design must be flexible themselves. (again)
* Different views must be enabled in different contexts via media queries. (why via media queries?)

Honestly, this whole concept has got my back up since the first post on it. It is complete hockum I have never seen a ‘trend’ emerging that is such crock

Jason Gross

March 15th, 2011

@Matt P

Matt, I think you explained my answer to your question within your own comment:

“If I use two of the three responsive web features to create a mobile version of a design that renders much better for small phone-sized screens, why isn’t that still responsive web design?”

What you are describing here is creating a specific mobile solution for your website. Sure, this is one of many options you have at your disposal for creating a mobile web site but just because your site renders well on a computer screen and on a phone does not make it responsive.

RWD is meant to allow your site to bend to any number of different devices, resolutions, or digital interfaces. This is why you need all 3 aspects. The combination of the 3 put your site in better position to render well not only on those interfaces that you have taken into account but also those that you don’t know about or have yet to be invented!

@Avangelist

I was going to respond to your comment but I only read the first 2 lines and decided it was a bad comment.

Jocelyna

March 16th, 2011

Nicely covered article by Jason. Very helpful elements for web design. Thanks for sharing… :)

Pete

March 16th, 2011

Really – ‘responsive web design” not another ridiculous buzzword that means nothing.

ferruh lermi

March 17th, 2011

Thank you very much . Ferruh Lermi

Matthew Wehrly

March 18th, 2011

Jason,
Thanks for the great info. Keep them coming!

Best,
Matthew Wehrly

Anthony

March 18th, 2011

Flexible layouts make a bad problem worse. You lose control over the ratio of pic to text space, period. Not to mention degradation in image quality (could be viewed on something bigger than you anticipated). We need a better CSS framework to handle the plethora of viewing devices we face. We need to progressively enhance our sites and cater for “families” of devices via style sheets. This is a tall enough order with having to deal with the issues of “flexibility”. That said, I think we are part of two different schools of thought on this issue, and I just wanted to give an honest opinion.

Rgds,
Anthony :)

Paul Mist

May 4th, 2011

There seems to be much debate on what Matt P discusses here. Ethan Marcotte (@beep) said “Responsive isn’t flipping between fixed layouts. It’s liquid.” I can understand what he’s saying, but I don’t necessarily agree. Fluid grids will make your site responsive to a greater degree of browser window sizes, however, if your site consists of several fixed layouts that give a good and appropriate viewing experience across several devices then it is no less valid, and rensponsive. Jeff Croft (@jcroft) reponded “May not be RWD™, but are multiple fixed layouts actually any worse?”

Bromide

May 25th, 2011

I can’t get this site to respond to my browser window being resized.

Robert Tobys

July 20th, 2011

Excellent article. Thanks for sharing.

KC Painter

July 27th, 2011

Thanks you very much for this article. I am a student in College for Web Design and love the concept of Responsive Web Design. The idea of a fluid grid layout is amazing and I can’t wait to start working with it.

Daquan Wright

August 23rd, 2011

My next redesign will utilize this. :)

Rhys Tague

September 29th, 2011

Web design is great for content and layout, but when it comes to social media actions, which are more then just the like button, this doesn’t work. How do you make a responsive user interface of a collaborative tool which uses behaviour to adapt to the person? The complexity is mind boggling! I think it is a bit more then this approach. Web Design = Content, User Interface Design = action which creates content.

Leave a Comment

Subscribe to the comments on this article.