Responsive web design is a group of techniques to create websites adaptable to the user screen size, screen format and input device. The concept was made popular by an article published by Ethan Marcotte in the blog A List Apart in May 2005 . He proposed the use of CSS to adapt webpages to devices instead of building device-specific sites.

Sites have work in many devices and screen sizes

Just a few years ago, everybody was accessing the internet using a computer and a mouse. Designing websites was easier because common screen sizes didn’t change as much as today. Almost everybody had a 13” or 15” monitor with a resolution of 800 x 600 pixels and 1024×768. A few users had large 17” hi-res screens, with resolutions up to 1600×1200 pixels.

Today a user may be visiting a website using a 320 x 480 pixels mobile phone, a tablet, a desktop computer with a trackpad and 27 inch monitor and 2560 x 1440 pixels or a notebook.  Screens have different aspect ratios (normal or wide/s), orientations (horizontal or vertical) and many users don’t have a cursor on their screens. They can touch the screen instead of using a mouse, and the number of browsers and operating systems currently used are bigger than ever.

Webdesigners must create websites that work well in all machines that can access them, but the diversity of the viewing environment has increased tremendously.

Why device-specific websites aren’t the best solution for everybody

When web access trough mobile phones has become common, webdesigners tried to solve the problem by building a separate mobile website and in some cases a mobile app. Today both mobile-specific sites and mobile apps have inconveniences that makes them less suitable to replace a “Desktop” site.

Apps for mobile phones are very device-specific, and the mobile phone market is very fragmented. To satisfy most users, an app has to be developed for at least  2 or 3 platforms, with added device-specific problems in some of this platforms. Add that to the cost maintaining the app and the risks inherent to the approval process in app-stores. For campaigning an app is an expensive solution with uncertain returns.

Mobile-specific websites can be less device-specific than apps, but they aren’t usable by tablets, as tablets have a larger screen. Tablets are  also not ideal to browse a desktop site either: they don’t have a cursor and most tablets can’t read the flash files used by many desktop sites.

Most content producers can’t afford to format content for at least three device-specific websites: one for tablets,one for mobile phones and another to desktop computers. Maintaining specific software and servers can be costly too.

But it’s not just the hardware/platform that changes from user to user: Your content may not be directly consumed in the browser. Many users will access your content trough RSS feeds, embed in other websites (like social networks) or trough apps like Instapaper that saves pages to read later. Some users may also use screen readers.

One web

If you are running a social-good campaign, you want to deliver content to a wider audience, independently of their hardware and software. You want to avoid creating barriers to this devices as much as possible. Responsive design tries to create one website that can be used by desktop computers, notebooks, tablets and mobile phones. Responsive design tries to deliver the best experience for each device, acknowledging it’s limitations and strengths.

Responsive design pages delver content for all devices on the same URL. There’s no m.website.com pages and the user doesn’t need to download and install an app to access the the content. That means that URL’s can be shared in social networks without worries about the devices used to read the pages.

How to start?

If you are an online producer, web editor, web designer or front-end developer you may be interested in my next article about how to implement responsive design.