What is Responsive Web Design?

Responsive Web Design is all about developing websites that display optimally on all devices. The term “Responsive Design” is as old as the mobile web and began to be used somewhere around 2013.

Responsive Design in a few words

Before the advent of the mobile web, the landscape of internet-enabled devices was very homogeneous: there were desktops or laptops, which were quite similar in terms of input and output media. Both types of devices had a keyboard and mouse or trackpad, as well as a screen 1,000 to 2,000 pixels wide.

At the time, there was no need to put in a lot of effort to develop a website that would display correctly on the majority of devices used. The simplest solution was to limit the width of the pages to the lowest common denominator. For this, developers made sure their pages were centered or aligned to the left, with a width of 800 pixels. On larger screens, these pages had more white spaces than needed, but the pages were easily readable on all devices.

With the advent of mobile devices, the situation has changed and there has been a profound diversification of media.

The screens of smartphones and tablets differ in many ways: the size of the pixels plays an important role, as well as the resolution (“pixels per inch” or ppi) appeared Retina displays. In addition, these devices are not controlled with a mouse, but with the finger.

Today, there are equally larger, high-resolution screens. So, a modern website must be able to adapt to screen widths ranging from 320 pixels to more than 4,000 pixels.

A Responsive Web Design adapts to the available space on each screen. The website should be pleasing to the eye regardless of which devices is used and offer an optimal user experience (UX).

Responsive Web Design encompasses a variety of techniques and approaches that make it possible to develop a fully responsive website.

We will look at some examples:

• HTML5 elements like images and attributes like src and width
• CSS media queries
• CSS units
• The mobile-first approach

Why opt for a Responsive Design?

A Responsive Web Design offers several advantages. In principle, you don’t need responsive design for a good user experience. But this will require a mobile site or the use of JavaScript. This approach is therefore much more complex than the solution offered by Responsive Web Design based on CSS and requires much more efforts.

Responsive Web Design for optimal design

The design of a website is a decisive factor: it influences the way a visitor perceives the information presented on a site. Good design reflects the identity of the person or organization behind the website and helps connect the visitor to the brand.

With the right design, your website visitors will feel comfortable on the site and have a positive experience. Let’s see how responsive web design helps optimize the user experience using two examples:

• Let’s imagine that a title fills the entire screen on a smartphone. On the other hand, the title is barely visible on the desktop version with the same font size. In such a caser, the title should be made large enough on the desktop to grab the visitor’s attention.
• Another example: imagine a blog where a sidebar is displayed to the right of the article. The sidebar contains links to other articles with small thumbnails. In the desktop version, the sidebar enables you to limit the width of the article, thus contributing to readability. However, on a mobile device, the sidebar would cover almost half the screen. So, the layout must be changed on mobile devices so that the sidebar content appears below the article.

Responsive Web Design for an optimal user experience (UX)

In principle, a non-responsive website will display on the small screen of a mobile device the same as on a desktop computer, but smaller. This forces the user to zoom in on individual sections of the page. It is therefore preferable to offer an optimized version. Here are some examples:

• On a website, a button is clicked with a mouse on the desktop version and with the thumb on the mobile version. Therefore, the button should be larger and away from the other elements in the mobile version.
• Also, imagine a form on one page. Normally, padding is created via CSS so that the text it contains is easy to read and does not touch the edges of the form. A padding of 20 pixels left and right is normal and perfect for large screens. But on a mobile device whose screen width is only 320 pixels, we lose 40 pixels from 320. If the form also has a margin, say an additional 20 pixels per page, 25% of the available space is already lost on the mobile device. To avoid this, it is necessary to reduce the margins on the mobile version.

Are there any dangers in not making a website responsive?

A majority of users today access content on the Internet via mobile devices.

Not having a Responsive Web Design will have serious disadvantages such as:

• Poor conversion rates and high bounce rates caused by unsuitable design and poor user experience.
• Poor ranking in search engines, because Google favors Responsive Design sites
• Poor performance due to loading of non-optimized resources, especially on mobile devices

What aspects of web development are concerned by Responsive Design?

Responsive Design includes different approaches and technologies. In general, there are several solutions depending on the context. Things are constantly evolving.

Responsive layout

Creating complex layouts on websites has been a science in itself since the early days of the World Wide Web. HTML includes different types of elements that behave differently depending on their layout. These include block, inline, and inline-block.

Block-level elements occupy the entire available width and are stacked on top of each other. Inline-level elements are only as wide as their content and are placed side by side. Here’s an overview of the most important types of elements for responsive design:

When laying out, block elements usually need to be placed next to each other. There are several ways to do this. Before the advent of CSS, table-based layouts were the norm. With CSS, floating positioning has been added to this. Today, CSS Flexbox is used for simple layouts based on rows or columns, and the CSS grid layout for complex layouts. In all cases, relative CSS dimensions are used to vary the number of elements displayed side by side.

As an example: Imagine a page with four preview elements for blog posts. They each contain a thumbnail, a title, a teaser, and a “Learn more” button. Flexbox makes it easy to create the responsive layout:

• Large-screen display: All preview items are next to each other. Each of the elements takes up 25% of the available space.
• Medium screen display: Two preview items next to each other on two lines. Each of the elements takes up 50% of the available space.
• Small screen display: The four preview items are located one below the other on the same vertical line. Each of the elements takes up 100% of the available space.

The following is an example of an implementation using classes from the responsive CSS framework Tachyons. We define the classes ‘w-100 w-50-m w-25-l’ for each preview container. The four preview containers are placed in a container marked ‘flex flex-wrap’:

<div class="flex flex-wrap"></div>
  <div class="w-100 w-50-m w-25-l"></div>
    <div class="blog--preview">…</div>
  
  <div class="w-100 w-50-m w-25-l"></div>
    <div class="blog--preview">…</div>
  
  <div class="w-100 w-50-m w-25-l"></div>
    <div class="blog--preview">…</div>
  
  <div class="w-100 w-50-m w-25-l"></div>
    <div class="blog--preview">…</div>

Sometimes it’s a good idea to display only one item on a certain screen size. Let’s look at a practical example: tabular data is displayed as a table in HTML using the <table> tag. However, depending on the size of the table, it can be difficult to adapt the display to very small screens. All you have to do is show ingenuity by signaling the user to tilt their device horizontally in order to have enough room to display the table. However, this signal should only be displayed on a device with a small screen and portrait orientation.

Hiding an element can be easily achieved with the display: none; CSS property.

With a special CSS media query, we can condition not only the width of the screen, but also the orientation of the device. The condition will be respected if the screen width in portrait orientation is less than 640 pixels. Otherwise, we hide the item:

@media screen and (min-width: 640px) and (orientation: landscape) {
  .dn-landscape-ns { display: none; }
}

In combination with the following HTML code, the function is complete:

<p class="dn-landscape-ns">
  Tilt your device in order to have an optimal view of the table.
</p>

<table>
  <!-- Large table -->
</table>

Typography and responsive text

For an optimal user experience, the font size of text elements on a website should be adapted to the available screen space. To do this, we use several typographies in our Responsive Web Design.

As a basic measure, the CSS rem unit (“root em”) is used to link the font size of an element in proportion to the HTML element ‘root’. Then, simply adjust the font size of the ‘root’ element through the CSS style break points to scale all fonts consistently.

Let’s take an example. Here, following the “mobile first” approach, we first defined the font sizes for small screens:

/* mobile-first */
html {
  font-size: 16px;
}

h1 {
  /* corresponds to 3 * 16px = 48px */
  font-size: 3rem;
}

Next, we adjust the font size of the HTML element for larger screens. Because the font size of H1 topics is set by rem, it automatically adjusts:

/* ‘not-small’ Breakpoint */
@media screen and (min-width: 30em) {
  html {
    font-size: 18px;
    /* H1 now has a size of 3 * 18px = 54px */
  }
}

Another common approach is to use the vh and vw CSS units for smooth adjustment of font size to screen height or width. In principle, this approach works without breaking points, but the font can then be displayed in lower case on small screens. In this case, one can use point breakpoints or the CSS calc() function to define a minimum size.

In order to optimize full-screen headlines on small-screen devices, a CSS-free approach is used. Titles must grab the viewer’s attention. However, words can become very long, which can lead to display problems. This is where the HTML entities “non-breaking space” (&nbsp😉 and “Conditional hyphen” (&shy;) come in handy. They make it possible to specify precisely where the words in a topic can be separated.

Responsive images

In addition to layout and typography, optimizing the display of images is at the heart of Responsive Design. Obviously, it doesn’t make much sense to load an image with edges that are 1,920 pixels long onto a mobile phone with a 400-pixel widescreen.

On one hand, the image, which is much too large, must then be reduced in the browser, requiring intensive calculations. On the other hand, the file size of an image increases proportionally with the size of the longest side.

An image of 1,920 x 1,080 pixels requires about four times more memory than an image of 960 x 540 pixels. Downloading such an image to a mobile device will therefore take longer. All of these factors have a negative effect on a website’s performance and functionality if images are not optimized.

With the introduction of HTML5, two new attributes were introduced for the tag. The srcset and sizes attributes specify multiple graphics files for an image; They are also called “assets”. Each individual file is linked to a CSS media query request. This allows the browser to load, from the list of available assets, an optimal asset for the device in question.

Here’s a quick example. The following HTML defines an image for which there are two attributes defined by srcset: one with a length of 480 pixels and one with a length of 800 pixels. It also specifies, via sizes, that the 480-pixel image must be used up to a screen width of 600 pixels. Otherwise, the browser must load the image with 800 pixels:

<img srcset="bild-480w.jpg 480w,
             bild-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="bild-800w.jpg">

In the past, most screens were wide and displayed images in landscape format. Nowadays, mobile phone screens are in portrait format. An image in landscape format on a device that displays them in portrait format appears very small. For best results, use a square image or a custom-cropped portrait.

Cropping of the images with HTML is called “artistic direction”. It can be implemented with the HTML5 <picture> element. The <picture> element enables the complex definition of multiple equivalent images for different use cases.

Let’s take an example. The HTML code below defines an element < image> which specifies different assets for the landscape and portrait format. In both cases, there are several versions optimized for different screen sizes:

<picture>
    <source
        media="(orientation: landscape)"
        srcset="image-petite-transversale.png 320w,
                image-grande-transversale.png 1200w"
        sizes="(min-width: 60rem) 80vw,
               (min-width: 40rem) 90vw,
               100vw">
    <source
        media="(orientation: portrait)"
        srcset="image-petite-hauteur.png 160w,
                image-grande-hauteur.png 600w"
        sizes="(min-width: 60rem) 80vw,
               (min-width: 40rem) 90vw,
               100vw">
    <img src="image-petite.png" alt="Description de l’image">
</picture>

Responsive navigation

Traditionally, navigation is displayed at the top of the page. This is often a horizontal list of menu items, with submenus that appear when you hover over them. This layout is not possible on mobile devices: there is not enough room for the menu on small screens and no mouse pointers.

There are different approaches to displaying navigation menus on mobile devices. They are all space-saving and do not require a mouse. Enabling navigation is often accompanied by an animation to grab the user’s attention. Some of the most commonly used approaches in responsive navigation include:

• The “hamburger” menu or drawer menu (three horizontal lines): the icon serves as a central control element for activating the menu
• The “Off Canvas” design: the menu appears on the screen only when the user decides it via a hidden pane.