Tutorial: designing responsive websites.

Definition.

A responsive interface adapts to the screen size while remaining comfortable to use. Nowadays, given the number of internet users with phones, it is absolutely essential to design websites that can be accessed from any device, whether a desktop PC or a mobile phone, and with a similar ease of use.

The viewport.

Mobile devices have the ability to simulate a screen larger than their actual display. A page that is 1200 pixels wide can be viewed on a phone, but only part of it will be visible. You will need to scroll horizontally to read the full lines. This is not convenient.

Another option is to reduce the display scale until the entire page fits on the phone screen. But the characters may then be too small, hard to read, or even illegible. The user will have to zoom in to read the page properly. This is also not convenient.

This ability of portable devices to handle screens larger than they can display was necessary at a time when websites were not adapted: it was the solution for being able to surf the internet with a phone.

Now that all websites have a roughly responsive design, this behavior is problematic because the browser thinks it has a comfortable screen available and builds its layout as it would on a desktop screen. Therefore, you need to fix the virtual screen of the portable device to the size of its physical screen so that the browser constructs the layout based on the actual screen size. This is the role of the viewport declaration, which you must include in ALL your HTML pages, in the head section.

This is not a CSS syntax but an HTML tag, and here is its most common syntax. It is defined here that the width of the virtual screen must be the same as that of the device, that is, the physical screen, and that the zoom should be 1 (although the user can still zoom in or out if they wish).

To see the importance of the viewport declaration, you can load the following pages on a mobile device. Warning! On a desktop screen, the viewport declaration has no effect.

Load the page on a mobile device without a viewport declaration.

The browser tries to display the entire page at once, which forces it to scale down significantly. As a result, even the title is hard to read, even though it is written in 24-point type.

Load the same page WITH a viewport declaration.

The page is displayed at full scale: reading is possible. The title and text wrap to the next line, and you can see them entirely without having to scroll down the page (which is already better). But you still need to scroll horizontally to see the full colored bars. This is because this page is not responsive.

Load the responsive page.

The page is displayed at a 1:1 scale: reading is comfortable without zooming or scrolling horizontally. Moreover, the colored bars are fully visible.

Relative units.

The next step to make your pages responsive is to set the dimensions in relative units. Refer to the page on CSS dimension units for a complete list of these units.

For margins, element dimensions, etc., the most commonly used unit is the percentage. This way, all your dimensions are proportional to the screen size.

However, it is necessary to set limits: if an element becomes too small when displayed on a mobile device, its content will no longer have enough space. Similarly, on a desktop screen, we need to prevent elements from growing excessively. Four properties allow us to set these limits: min-width, max-width, min-height, and max-height. Unlike other dimensions, these values will be defined in absolute units (for example, in pixels).

The width of the frame below is proportional to that of its parent (the frame with a blue border) within certain limits. Change the width of the blue frame and observe the changes in the inner frame #demo1.

Flexible elements and grids.

Flex-box and grids, these new properties introduced in CSS3, make responsive design much easier.
We invite you to read the tutorials on flex-box and on grids.

The media-queries.

It is certain that percentages do not solve everything. For example, when all elements have reached their minimum width defined by min-width, they can no longer shrink. At that point, they need to be arranged differently: placing elements that are side by side one below the other, no longer displaying non-essential elements, and so on.

Media queries are there for that. They are actually an extension of the @media directive, which has existed for a long time in CSS syntax, but initially this at-rule was only used to associate styles with a particular device: screen, printer, etc. Media queries now allow, while still being on a device like a screen, to filter styles based on the size of that screen.

This is what a stylesheet using media queries looks like:

We invite you to visit the page at @media for a complete description of this at-rule.

"Mobile-first" design.

This term refers to the design method that involves first defining the pages for small-screen mobile devices (smartphones), then the layouts for tablets, and finally the layout for desktop screens.

In conclusion.

The design of an adaptive interface involves the following steps:

• Design your layout taking into account the constraints of a smartphone screen.
• Set up viewport directives in the header of all pages.
• Set all horizontal dimensions (widths, right and left margins...) in relative units, such as percentages.
• Set minimum and possibly maximum limits.
• Set up a media query directive by arranging the elements optimally for a larger screen, such as a tablet.
• Define another media query directive to arrange the elements for a desktop screen.

In principle, managing three ranges of devices is sufficient: smartphone, tablet, and desktop screen, but you can create more media queries if necessary.