In the previous article we gave a general introduction to Responsive Design and why it’s important. In this article we’ll dive into some more specifics and discuss what it actually means to make a website responsive.
We’ll start by briefly recapping Responsive Design and the history the mobile web. Doing so will help you appreciate why Responsive Design is such a novel solution to the long-standing problem of making websites usable in a wide range of unknown environments.
From Device-Specific to Device-Agnostic
In a nutshell, Responsive Design aims to make websites compatible with the widest range of devices possible: desktops, tablets, smartphones, and maybe even watches and toasters someday. In the past websites were designed at specific physical dimensions (ex: pixels) based on the most popular monitor sizes.
This approach no longer works because of the massive range of devices and screen sizes people use to view your website. Designers can no longer optimize websites to fit one specific set of physical dimensions because we have no idea what kind of screen a user may have.
The solution is to make websites device-agnostic. Rather than design a website around one specific screen size, designers must assume nothing about the devices that may access the website. Put another way, websites should dynamically “respond” to the screen size on which it’s being viewed.
This might sound obvious in hindsight, but at the time this was a radical idea that violated the conventions of web design. Responsive design introduced an entirely new approach and set of techniques for building modern websites.
Responsive Design is NOT Mobile Specific
To adapt to the growing number of web-enabled smartphones, many companies built “mobile-friendly” versions of their website alongside the normal version. It’s important to clarify that a mobile-specific website is not an example of responsive design.
A mobile-specific design is subject to the same problems as a desktop-specific design: the website breaks when viewed from an unsupported or unexpected device.
Worse yet, mobile-specific design requires companies to develop and maintain an entirely separate (and essentially duplicated) version of their entire website. Most web-masters find one website difficult enough to manage
nevermind separate versions for iPhones, Blackberries, iPads, and so on. Not only are multiple websites incredibly costly to manage, they are confusing to users and can hurt SEO rankings.
Responsive design solves these problems, which is why it quickly emerged as the industry standard for creating websites that work universally, regardless of the user’s device.
Responsive Design is Device-Agnostic Design
Perhaps the biggest turning point was when Ethan Marcotte published the first and still most definitive book on the topic, Responsive Web Design. Marcotte outlined three pillars that define a responsive design: fluid grids, media queries, and flexible media.
We’ll cover these in more detail later on, but here’s the gist of each:
- Fluid Grids: rather than design a page around a grid of fixed pixels dimensions, grids should be defined by it’s mathematical proportions. So instead of having a 750px main column and a 250px sidebar, the columns should be defined as 75% and 25% respectively.
- Media Queries: media queries are a CSS feature that allow different visual styles to be conditionally applied based on criteria such as screen width and pixel-density (ex: retina vs. non-retina screens). They allow designers to define how the website should respond to different screen sizes with minimal code.
- Flexible Media: dimensions of images, video, and animations should be flexible and adapt to suit different screen sizes
similar to how grids should be fluid
The unifying theme of these techniques is that the website should automatically adapt itself to fit screens and devices of any type
including devices not yet invented! By breaking a website’s dependence on certain assumptions about the device on which it will be viewed, the website has become device-agnostic and future-proof.
So, how do you build responsive websites?
The intention of the last few articles is to give an idea of the context from which responsive design arose. Having this background knowledge is important because it gives you a deeper understanding of the problem Responsive Design attempts to solve, and more appreciation for it’s advantages.
In the next few article we’ll begin examining the specific processes & technologies involved in creating responsive websites, as well as some clever tools that can help give you a head start. Stay tuned, and remember to pass these links along to your web design team!