Background

The concept "responsive website" is fairly recent, first appearing in the famous article written by Ethan Marcotte in alistapart.com, in 2010. The writter of the book also entitled "Responsive Web Design", explains that web designers and developers should at last detach themselves from the way they're used to work up until now, which constitutes a resedue of the philosophy governing print communication and is based on the acceptance of the fact that we know a priori the size and format of the means that will host our design (eg the design of a printed newspaper). The nature of the web, however, as well as the range of devices and ways of accessing the internet, have ultimately overriden this concept. Ethan Marcotte, in his article, urged the web community to embrace this change and adopt a web designing approach that is versatile, dynamic and completely adapatable to circumstances. The approach he named "responsive design"

The term was quickly established and used as a "buzz word", even though the basic philosophy behind responsiveness was not new (having its foundations on adaptive design and the design schools promoting the so-called progressive enhancement). Since 2010, responsive web design is systematically referred to as one of the most dynamic web design trends for the next years, by international analysts and journalists of the field.

What is responsive design?

It essentially consists of a series of techniques allowing us to build websites that can automatically and "on-the-fly" adapt to any screen resolution and orientation. It is worth noting the following:

• The element that "dynamically adapts" is not just the width of content, as we knew before with fluid sites (sites that cover the whole width of the screen). In responsive design, we can totally transform the structure, layout, images, font size and, of course, the content of a page. It is, therefore, a page which really adapts to any size, adjusting even its fundamental elements, to provide users with the best appropriate version for the device they use.
• This adaptation happens in accordance with the screen resolution of the user. Therefore, when the site is displayed on a small mobile screen, the user will see the site's corresponding version; the same goes with a tablet, and so on. Please note that the responsive design technique does NOT trace the type of the user's device (as in a mobile site), but the resolution. This effectively means that the website adapts to larger screens as well - like the ones many PCs nowadays have. Respectively, if the user doesn't maximise his browser window, he will see the version of the site that is appropriate for the size of the window.
• Responsive design, apart of the resolution, also takes into account orientation. So when we're holding a mobile device horizontally (landscape orientation), we can see a different version of the page than when we're holding it vertically (portrait orientation).
• Finally, a responsive design website adapts dynamically, as I already stated. This means that the alteration takes place in the front end, on the user's browser. As a result, users can see this immediate change when, for example, switching the orientation of the screen from landscape to portrait. This is the element that allows responsive websites to dynamically change when users reduce the size of the browser window. Then, they will see the page on-the-fly transforming in front of their very eyes. You can try it too, at the websites of Mashable and British Vogue.

How do we achieve this? As I said before, it takes a series of techniques which include 3 basic elements:

• Fluid grids
• Flexible images
• Media queries

These are the three ingredients of responsive design, on which I don't intend to elaborate more, since this article has more commercial than technical character. For more technical details, you can check out the following:

Responsive Web Design: What is it and how to use it | Smashing Magazine

Responsive Web Design | A list apart

Beginner’s Guide to Responsive Web Design | Treehouse

What problems does it solve?

Responsive design solves the principal problem occuring from the fragmentation of devices and various resolutions. Today, more than ever, we have many ways of accessing the web. The means, devices and formats are so numerous, that advertisers and simple content sites find it difficult to decided what is the right mode of action. Mobile site? Mobile application? Android, iOS or both? Tablet-optimised site? Tablet application? And what about resolution in desktop PCs, laptops, netbooks etc? We keep designing for 1024px or we're heading to larger resolutions?

It is difficult to decide which trend (sites or apps) and technology (iOS, Android or Windows 8) to invest on. Constant progress makes it impossible to determine where the market is heading to. This challenge can be tackled by the responsive website, a fine solution that allows for an attractive and effective display, optimised for every device.

The pros

Why should anyone turn to responsive design, an admittedly more complicated and technically demanding solution for a website?

The principal reason why, is to provide a positive user experience, regardless of device and way of accessing our website!

Despite being more expensive than a traditional site, the solution of responsive design is cheaper than the process of creating seperate webpages and apps for each device.

A responsive website will adapt to any screen resolution and device - even the ones that are not yet available for us to see, because they do not exist!

Content upkeep, as well as technical maintenance are made easier, since we're talking about an inclusive website and not seperate webpages.

We offer users a uniform image; one brand, one design and one content, regardless of the device.

Responsive Design Examples

Foodsense (one of my personal favourites, even though not so popular a brand

Skroutz.gr

Time Magazine

Mashable

Starbucks

Ethan Marcotte

Even the Orthodox Church of America is responsive!

Here you can find a comprehensive catalogue of responsive sites, in a beautiful gallery. Feel free to laze about :-) Visit the websites and try resizing your browser. Watch how fundamental elements of the page change, the menu adapts and the layout changes.

Is it for everybody?

This is a hot question! Responsive design is a marvellous choice for the majority of websites. Nevertheless, it should not be considered a panacea and shouldn't replace all other activities in the mobile environment. Each company should plot its own digital & mobile strategy, according to its goals, needs, the nature of its field and the target audience. If, for example, a company has or expects a high response of mobile users and believes an effective ROI can be accomplished, then it would worth investing on mobile sites, so as to have the ability to design a seperate site, optimised solely for mobile. If the application the company wishes to build is based on the use of device-specific functionalities (eg compass, accelerometer, GPS, camera etc), then of course a mobile application is the best solution).

To implement responsive design properly, requires certain admission, which might constitute a restriction for some companies. For instance, the design of a responsive website should be light and minimal, lacking "heavy" graphics that will slow down the website and will render mobile user experience unpleasant (let's not forget that we're talking about a website that is served regardless of the type of device).

My personal opinion is that a website should be the base of the digital presence of every company in the web. Further individual activities or other specific applications required to accomplish business objectives, should be implemented based on the company's strategy. It could be assessed that the appropriate solution for a certain case needs the combination of a responsive site and other server-side solutions, so as to create a hybrid model that serves to users the information they need (such as the example of a mobile site) and not the same website in one of its adaptations (as the example of responsive design).

In any case, your needs should be analysed by a technically competent partner, who has the experience and expertise to suggest the appropriate solution for you.

Take a look at the presentation I addressed at the Publishing Conference:

And for further reading, you can find two interesting articles, by ATCOM's people:

"How Responsive Design can help travel sites", by Miltos Kritakis, Business Director at ATCOM.

"The new Skroutz.gr and the responsive design technology", by ATCOM's Creative Director, Grigoris Papadopoulos