Responsive Design Methods and How to Use Them

Contrasting the strategies of progressive enhancement and graceful degradation

The pervasion of mobile devices and the increasing amount of web traffic being served up on smaller screens has made responsive web design a requirement. Mobile users will readily abandon a site if it takes too long to load or, worse, renders a zoomed-out, wide screen version with indecipherably small text.

But what exactly does it mean to be responsive?

A responsive website is designed to respond to varying screen sizes. Content will shift and resize to best fit the available space to maintain a clear and legible layout. Responsive websites are also built to load fast. Wireless signals to mobile devices will never be as fast and reliable as wired desktop connections, so content and assets must be optimized to load quickly at slower internet speeds. Also, designing for mobile screens requires making buttons and links touch friendly. Tapping cannot match the accuracy of clicking with a mouse pointer, so interactive elements must be designed large enough to accomodate fingertips.

There are two basic methods to design a responsive website: graceful degradation and progressive enhancement. Both strategies accomplish the same task visually, but are implemented very differently.

Graceful Degradation

Icons from the Entypo set by Daniel Bruce

The first method involves taking a website designed for desktop sized screens and breaking it down to fit smaller devices. CSS for wide screens is coded first with media queries for mobile styling found farther down the cascade. Developers must pick certain breakpoints to place media queries based on where smushed content starts to break the layout and needs to be restructured.

/* Desktop styles */
...
/* Tablet styles */
@media screen and (max-width: 760px) {
...
}
/* Phone styles */
@media screen and (max-width: 360px) {
...
}

Graceful degradation is like playing a stressful game of Tetris on an ever dwindling screen. Pieces must be shrunk, broken down, or hidden entirely as they are crammed into a narrower space.

Thankfully, there is another option.

Progressive Enhancement

Instead of beginning with desktop styling, progressive enhancement uses mobile first CSS with media queries that restyle content for wider screens. Since content starts small it never gets squished as the screen size changes. Breakpoints for media queries are chosen based on popular screen sizes, not when the layout falls apart.

/* Phone styles */
...
/* Tablet styles */
@media screen and (min-width: 760px) {
...
}
/* Desktop styles */
@media screen and (min-width: 960px) {
...
}

Progressive enhancement is like water gradually flowing to fill a larger container. As the vessel widens, content expands and reorganizes to exploit the available area.

The most significant benefit of progressive enhancement is that using mobile first CSS allows websites to load faster on mobile devices. Instead of forcing the browser to parse through unecessary desktop styling, mobile CSS is read and rendered first, saving precious time and processing power.

A mobile first mindset also helps the designer identify the key elements of a website. Mobile screen sizes provide a limited canvas to work with, forcing the prioritization of content and establishing a clear hierarchy from the start. Visual basics such as fonts and colors are also solidified first before moving on to layout.

However, there may be instances where graceful degradation is easier to use. For existing websites it is simpler to append mobile specific media queries to stylesheets that need to be made responsive than converting them to mobile first. Graceful degradation is much quicker to implement than reworking CSS to be mobile first.


Between the two approaches, progressive enhancement preforms better, but graceful degradation can be simpler to implement. If you are building a new website from the ground up, use the former and benefit from a mobile first mindset. If you are updating an existing website and the CSS is too extensive or complicated to rework, it may be better to stick with the latter.

Whichever responsive design method you use, keep the CSS organized, commented, and dry.

Thanks for reading.