Responsive Web Design

Responsive Web Design (short RWD) was first coined by Ethan Marcotte in 2010 in his famous A List Apart article. Since then we come across this term very often.
But what does it mean?
A common misconception is that RWD is a technology that knows it all and we need it! In contrary. It is a set of techniques, it is a way of thinking when designing websites and it might be possible that you don’t need it, or at least not like you think you do.

So what does responsive design entail? Actually, let’s look at what problem it solves.
We live in a world of connected screens with different widths, heights and resolutions that are running web browsers. This changing landscape redefined how we browse the web. Of course the websites we wrote prior to the mobile screens were designed for large desktop and laptop screens. The need for a separate mobile version of the websites was required and everyone was doing it. They might have displayed the same data, but a totally different markup was required, different styling which brought us to maintenance hell. In short this was the problem.
So now that we have a better idea what we need to tackle let’s take a look at what we can do to address these issues.

Media Queries

Media Queries to the rescue! They’ve been present in CSS 2.1 and were compatible with HTML4 for the purpose of distinguishing between certain media types that the content is rendered on. For instance we might want to increase the font-size or strip out the images when we’re printing a web page vs having then when consuming on a screen.
Media queries have some welcome additions since then. See and follow the status of the W3C Media Queries specs.

Media Features

Besides the media types like print, screen, tv, handheld … media features are what we are filtering for in our expressions.
To date we can test for the following:

color – Indicates the number of bits per color component of the output device. If the device is not a color device, this value is zero.
color-index – Indicates the number of entries in the color look-up table for the output device.
aspect-ratio – Describes the aspect ratio of the targeted display area of the output device. This value consists of two positive integers separated by a slash (“/”) character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).
device-aspect-ratio – Describes the aspect ratio of the output device. This value consists of two positive integers separated by a slash (“/”) character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).
device-height – Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).
device-width – Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).
grid – Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1. Otherwise it is zero.
height – The height media feature describes the height of the output device’s rendering surface (such as the height of the viewport or of the page box on a printer).
monochrome – Indicates the number of bits per pixel on a monochrome (greyscale) device. If the device isn’t monochrome, the device’s value is 0.
orientation – Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.
resolution – Indicates the resolution (pixel density) of the output device. The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).
scan – Describes the scanning process of television output devices.
width – The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).

Besides these there are the browser specific media features. See the Mozilla-specific media-features.

Most media features accept optional ‘min-‘ or ‘max-‘ prefixes to express “greater or equal to” and “less or equal to” constraints.

Examples:

This media query specifies the style sheet that should be used for devices with viewport widths between 300 and 600 pixels.

@media screen and (min-width: 300px) and (max-width: 600px) { 
 
   /* your style sheet */
 
 }

Logical operators

When constructing your media queries you can use logical operators like and, not and only. You can also add multiple rules separated by commas for complex queries.

Fluid Grids

Fluid Grids are one of the most important pillars of RWD. We used to be designing with fixed layout in mind which is not enough anymore. The key idea behind it is to work with grids that adapt to different screens and resize their widths in relation to on another.
What changed? We used to design with fixed grids in the 960px system, now we are using percentages. We define a maximum layout size for the design, then the grid is divided into a specific number of columns. We design each element with proportional sizes instead of fixed pixel based dimensions making the elements resize themselves based on their parent containers.
When translating a 300px container from a 960px grid system we’d end up with a 31.25% width in fluid terms (if the 960px is the 100%).

Mobiscroll Blog | Design, UI and UX for Successful Products

Building products and services for mobile and web? We're writing about how to stand out and make products that help people.