Responsive Web Design, how to get started?

Web designers have always been faced with portability issues concerning how different browser interpret their work based on the recommendations of the World Wide Web Consortium (W3C). Designing the same site for Internet Explorer then for Firefox was once considered an unavoidable practice. The emergence of new generations of mobile devices and new usages only add to this issue. In 2015, worldwide mobile phone internet user penetration was 52.7 percent. In 2017, figures suggest that more than 63.4 percent of mobile phone users will access online content through their devices. Therefore it is no longer possible to create a version of the site for each destination(1). This is why new solutions have emerged, among them responsive web design.

What is RWD?

RWD is an acronym for Responsive Web Design. From the end user’s perspective, this combination of methods and techniques, allows the interface of an Internet site or an online application to automatically adapt to the user’s web browser whether it be on a smartphone, tablet, laptop, desktop, etc. This is why we also speak about an adaptive experience.

The three technical components that make (nearly) the consensus
The responsive grid: RWD pages are designed from a structure which adapts to characteristics of Internet web browsers
Media queries: these CSS rules verify flexible to the grid on which the structure of the site is based
Responsive Media: to achieve complete responsiveness, media should adapt (images and videos) to the viewing conditions of each browser.

Will there be a war between frameworks?
To facilitate the work of front-end developers, frameworks have emerged. Bootstrap, the solution developed by the teams at Twitter, is certainly the most famous RWD framework and the initiator of a new generation of solutions which have convinced well-known companies such as Vogue, Newsweek, Spotify, MongoDB and NASA.

Today, there are too many RWD frameworks available to count. Among the alternatives to the most popular Bootstrap include Foundation, Skeleton, Boilerplate, HTML Kickstart, Sproutcore, and Zebra to name a few.

Breakpoints case study.

Why graceful degradation must end?

First of all, between 2000 and 2005, websites design methods were shaken by the combination of three major factors.
The concept of the separation between base (HTML content) and layout (the placement on the page with the aid of style sheets called CSS) has made way for the development of content management solutions (known as a Content Management System or simply CMS) which make it possible for nearly anyone to update a website.

In part to this development and equally to the growth surrounding the blogoshphere, the amount of editorial content found on the web has exploded. An increase in the number of Internet browsers and the emergence of smartphones has made this method of creating versions of a site for each browser obsolete.

Faced with these new challenges, new approaches are appearing, beginning with graceful degradation. This method is a natural choice for websites which were originally designed with a multiplatform approach in mind and want to become responsive in the future.

An increase in the number of Internet browsers and the emergence of smartphones has made this method of creating versions of a site for each browser obsolete.

Graceful degradation is without a doubt one of the first adaptive web experiences – and deserves to be saluted in this regard. Its use is still prevalent today although it is out of step with current users’ expectations and is often the preferred “corrective” method of creative teams that are not comfortable with changes resulting from new uses.

Today more than one in two visitors is a mobile user and this trend is growing worldwide. When it comes to e-commerce, 30% to 35% of customers are mobile users. In light of these figures, it is just not possible to envision creating a site for desktop computer and then attempt to adapt it for numerous devices.

This approach is all the more absurd as it requires many resources to deconstruct the site and adapt it to each device.

Progressive improvement

Progressive improvement is a second school of thought which has revolutionized the methods for creating for the adaptive web. In this case, the design of a website or online application comes to be thought of as a strict combination of content and structural components:

1. Primitive information (2)
2. Architecture of page templates
3. Navigation

Unlike graceful degradation, mobile first templates are designed from the three elements above. Next, the interface is progressively enriched with additional elements (and/or modifying them) in order to take advantage of the features of screens with higher resolutions.

Beyond using any additional space available, this approach also takes advantage of mobile devices’ sensors. For example, in the field of cartography, it is preferred to have geographical points of interest displayed directly within an application rather than displaying them on a map on a webpage.

This method is destabilizing when trying to implement it for the first time. However, when rigorously applied, it allows to focus on the quality of user experience by concentrating on the relevance of the information provided, architecture and navigation.

From this point of view, making gradual improvements has more points in common with an editorial approach (if not documentary) than a strictly technical process.

How to design a (good) RWD website?

The definition of the lowest common denominator
Very often when a site is designed hastily, it is not unusual that it leads to dead-ends. The home page of a site that you frequent is perfectly RWD, then you click on a link and unfortunately the next page is not adapted for mobile.

There is a very simple method to remedy this type of pitfall. It is even taught in primary school! This is the principal of the lowest common denominator.

Before committing to the use of site templates, first a suitable hierarchy tree is designed (3) in the form of a mind map.

If well structured, this representation makes it possible to easily distinguish families of templates and the associated navigation.

Test, test and retest!
With the surge in RWD, major web browsers have incorporated features to meet the needs of front-end developers and offer tools which allow them to test their work on several platforms (4).

For example, Firefox’s adaptive view, available among the imbedded developer tools, makes it possible to view an HTML page on 8 different screens. Landscape and portrait modes can also be tested, as well as simulating touch events.

On the surface, these features provide a number of services and offer a quick overview of HTML/CSS integration. However be careful because even if emulators are progressing, there is yet anything that replaces the battery of tests conducted on the major smartphones, phablets and tablets on the market.

The future of adaptability and the inevitable dead-end of mobile-first

To think RWD means to ensure a pleasant user experience regardless of device that a website or online application is being accessed with.

From our experience, we find that this technocentric vision gives way to a much more complex approach that is more user-oriented. A user’s device is ultimately only a small unknown component of the very complex adaptive equation.

To be successful, the latter relies on many other elements. Today for the most part, people tend to surf the web using several devices in a single day. It is not uncommon for someone to consult a site on a smartphone, then finish reading on a tablet, sitting comfortably on their couch.

The future of adaptability inevitably requires even more precise targeting of users and the data that they produce. Mobile-first thinking is therefore not an end in itself. One just needs to take a look at the growth in the popularity of connected watches or IoT in general to be convinced of the dead-end that mobile-first is rushing towards.

(1) Statistics and facts on mobile internet usage
(2) Primitive information consists of editorial content and online services.
(3) Freeplane is a flexible open source solution used for mind mapping and analyzing the information contained in mind maps.
(4) In the present case a platform is the combination of an operating system, a web browser, a screen configuration and a device.