Responsive Web Design, where to begin?

Web designers have always been faced with the issue of how their websites are displayed in different browsers, each of which interpret the standards of the World Wide Web Consortium (W3C) in their own way. It used to be widely believed that you had to design one website for Internet Explorer and another one for Firefox. A new generation of mobile devices combined with the growth of mobile internet usage has only added to the problem. In fact, according to Gartner "By 2018, more than 50 percent of users will use a tablet or smartphone first for all online activities"(1). It is therefore no longer possible to create a different version of a website for each device. This is why new solutions have come to light and Responsive Web Design is at the forefront.

What is RWD?

RWD stands for Responsive Web Design. This combination of methods and techniques means that, from the desktop or mobile user's perspective, a website's or online application's interface automatically adapts to the device's browser (smartphone, tablet, laptop, desktop, etc.). This is why we also talk about adaptative experience.

The three technical components which are more or less agreed upon
Flexible grids: these grids create a flexible foundation which allows RWD pages to adapt to the browser characteristics
Media queries: these CSS rules are what gives flexibility to the grids which dictate the layout of the site
Flexible media: to make sure the website is completely flexible, the images and videos must also adjust to each browser

Will there be a war between different frameworks?
To make the jobs of front-end developers easier, integration frameworks have emerged.
Bootstrap, the solution developed by Twitter, is certainly the most popular RWD framework and it sparked a new generation of solutions which have convinced well-known companies such as Vogue, Newsweek, Spotify, MongoDB and even NASA.

Today, there are too many RWD frameworks to mention. The most popular alternatives to Bootstrap include Foundation, Skeleton, Boilerplate, HTML Kickstart, Sproutcore and Zebra.

Breakpoints study

Why graceful degradation must end?

First of all, between 2000 and 2005, website design methods were shaken up by the combination of three major factors. The idea of the separation between content (HTML) and style (The page layout using cascading style sheets - CSS) gave rise to content management solutions (known as Content Management Systems or CMS) and meant that anyone could update a website.

This along with the rise of the Blogosphere has led to an explosion of editorial content on the Web. The increase in the number of Internet browsers and finally the emergence of smartphones was the nail in the coffin of the old method of creating a different version of a website for each browser.

Faced with these new challenges, new approaches have come to the forefront including graceful degradation. This method was a natural choice for websites which were not originally designed with a multiplatform approach in mind and need to become responsive in the future.

The increase in the number of Internet browsers and the emergence of smartphones has made graceful degradation obsolete.

Graceful degradation is undoubtedly one of the first examples of adaptive web experience - and it should be acknowledged as such. However it is still widely used today even though it is out of step with current users' expectations. In reality it is often used as the prefered "corrective" method by creative teams who are not completely comfortable with the changes brought about by new browsing habits.

In reality, today more than one in two visitors are mobile internet browsers, and this trend is growing worldwide. When it comes to ecommerce, 30 to 35% of customers use a mobile to browse. In light of these figures, it is simply no longer feasible to envisage creating a website for a desktop computer and then trying to adapt it for other devices. This approach is all the more absurd as it requires many resources to deconstruct the site and adapt it to each device.

Progressive enhancement

The creation of a website, whether it is responsive or not, is necessarily the result of a preliminary design process. It is in this area that RWD undoubtedly has the most to contribute.

Progressive enhancement is a second school of thought which has revolutionised design methods. Going above and beyond today's adaptive web. In this method, website design is purely seen as the combination of content and strucural 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 enhanced with additional elements and/or in-depth modifications in order to take advantage 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 interactive mapping, displaying geographical points of interest within the application is prioritised above displaying a map on a webpage.

This method is confusing when trying to implement it for the first time. However when rigorously applied, this approach allows you to focus on the user experience by concentrating on your website design, navigation and the relevence of content.

From this perspective, progressive enhancement has more factors in common with an editorial, if not documentary approach than a strictly technical process.

How to build a (good) RWD site?

The definition of the lowest common denominator
Very often when a site is designed hastily, it can lead to dead-ends. It might be that the home page of a site that you visit is perfectly responsive, 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 using 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 groups 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 embedded developer tools, makes it possible to view an HTML page on 8 different screens. Landscape and portrait modes can also be tested and touch events can be simulated.

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 tech-centred 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 sofa.

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.

Notes:
(1) Gartner Says By 2018, More Than 50 Percent of Users Will Use a Tablet or Smartphone First for All Online Activities
(2) Primitive information consists of editorial content and online services.
(3) Freeplane is a flexible open source solution used for mind mapping and analysing the information contained in mind maps.
(4) Here platform means the combination of an operating system, a web browser, a screen configuration and a device..