What is responsive design?

Responsive design is an approach to developing websites that enables their optimal display on various types of end devices. The term responsive design is only as old as the mobile web and gained widespread use around 2013.

Before the arrival of the mobile web, the landscape of internet-enabled end devices was relatively homogenous: There were laptops and desktop computers, which were very similar with respect to input and output media. Both types of devices had a keyboard, either a mouse or trackpad, and a screen with a width of 1,000-2,000 pixels.

Back then, it didn’t require any special effort to develop a website that would be properly displayed on any device. The simplest solution was to limit the width of a page to the smallest common denominator. A popular approach was to display pages as 800 pixels wide and centered or left-justified. On larger screens, there might be some extra white space, but the pages were easy to read on every device.

This changed with the arrival of mobile devices and the significant diversification of end devices. Smartphone and tablet screens differ from desktops in several respects. Pixel dimensions now play an important role, and physical resolution (pixels per inch or ppi) also came into focus with the arrival of retina screens. And these devices are of course navigated using one’s finger rather than a mouse. In addition to smartphones and tablets, large high-resolution monitors have also come on to the market, meaning that a modern website needs to work on screens with widths ranging from 320 pixels to over 4,000 pixels.

A responsive website adjusts itself to the available space on a screen. “Screen real estate” is often spoken of in this context. A website should look good on all devices and ensure optimal user experience (UX).

Responsive design covers a wide range of technologies and approaches that are combined to develop a fully responsive website. This includes:

• HTML5 elements such as picture and attributes such as srcset and sizes
• CSS media queries
• CSS units
• Using several assets from one resource
• The mobile first approach

Designing a responsive website offers several advantages. The main consideration here is user experience (UX). In theory, you can implement good UX without responsive design, but that would require your own mobile site or the use of JavaScript. All in all, that kind of approach will be significantly more complex than a CSS-based responsive design approach and will require more upkeep.

A website’s design plays a large role in how visitors perceive the information presented on the site. A good design reflects the identity of the organization behind the website and helps to connect the user to your brand. Visitors should have a positive experience when visiting your website. Let’s look at two examples for the importance of responsive design to user experience:

• Imagine that a heading fills the entire screen on a mobile device. However, in the desktop version, the same heading in the same font size doesn’t stand out at all. On the desktop, the heading should be displayed larger to catch the eye of the visitor.
• Imagine a website for a blog, in which there is a sidebar next to the articles. The sidebar contains links to other articles with small thumbnails. In the desktop version, the sidebar limits the width of the articles, making the page easier to read. On a mobile device, the sidebar would take up almost half of the screen. The layout thus needs to be different on mobile devices, with the sidebar appearing below the articles.

In general, a non-responsive website will be shown on the small screen of a mobile device exactly as it’s shown on a desktop, just smaller. This forces the user to zoom in on the individual parts of the page. It’s thus much better to provide an optimized version. A couple of examples:

• A button on a website is clicked on using a mouse in the desktop version. But mobile devices are navigated using a finger. The button thus needs to be larger on the mobile version and leave more space between elements.
• Imagine you have a form on your site. Normally, the text contained in the form is padded so that it can be easily read and does not touch the edges of the form. Padding of 20 pixels on the left and right is normal and looks good on large screens. But on mobile devices with screen widths of 320 pixels, you’ve just lost an eighth of your screen space. To avoid this, padding should be reduced on mobile devices.

More and more users browse the Internet on mobile devices. There are significant disadvantages to deciding against a responsive website. Some notable examples are:

• Bad conversion rates and high bounce rates, due to suboptimal design and bad user experience.
• Bad search engine ranking, as Google recognizes when, for example, website elements are located too close to one another.
• Bad performance, due to long loading times of resources that haven’t been optimized.

Responsive design includes various approaches and technologies. There are usually several solutions for different scenarios that might come up. Development is still in a state of flux.

Since the beginnings of the Internet, implementing complex layouts on websites has been a science. HTML has various types of elements that behave differently depending on the layout. Let’s look at the element types block, inline, and inline-block in particular. Block elements take up the entire available width and appear one on top of another. Inline elements only take up the amount of space they need for their contents and appear beside each other. This table should give you an overview of the relevant elements in responsive design:

Implementing a layout usually requires block elements to be placed next to each other. There are various ways of achieving this. Before the arrival of CSS, table-based layouts were the standard; the arrival of CSS brought with it float-based layouts. Today, CSS Flexbox is used for simple column- or row-based layouts and the CSS Grid for more complex layouts. Relative CSS dimensions are used in every case, to allow for variation in the number of elements displayed next to each other.

A good example: Imagine a page with four preview elements for blog posts. The preview elements each contain an image, a heading, a teaser, and a “read more” button. With Flexbox, the following responsive layout can easily be implemented:

• Displayed on a large screen: All preview elements appear next to each other in a row. Each element takes up 25% of the available space.
• Displayed on a medium-sized screen: The elements appear next to each other in two rows each containing two elements. Each element takes up 50% of the available space.
• Displayed on a small screen: All elements appear one below the other in a line. Each element takes up 100% of the available space.

Here’s an example implementation with classes from the responsive CSS framework Tachyons. For each preview container we define the classes “w-100 w-50-m w-25-l”. All four preview containers are in a container labelled “flex flex-wrap”.

Sometimes it makes sense to only show an element on screens of a certain size. For example, tabular data are displayed as a table in HTML using the tag <table>. However, depending on the size of the table, it can be difficult to properly adapt it for a small screen. That’s where a simple trick comes in: Instruct the user to rotate their device in order to create enough space for the table be displayed. This text of course should only appear on small-screen devices when the device is being held vertically.

Elements can easily be hidden using the CSS property display: none. With a special CSS media query, we can query both the screen width and the orientation of the device. The extra text should appear only if the width of the screen is less than 640 pixels when displayed vertically. Otherwise, the element should be hidden:

When combined with the following HTML code, the feature is complete:

For optimal user experience, the font size of text elements should be adapted for the screen being used. There are various techniques in responsive design for implementing this.

The basic ingredient is the CSS element rem (“root element”), which binds the font size of an element proportionally to the HTML “root” element. To consistently scale the text, you can simply adapt the font size of the “root” element using CSS breakpoints.

Let’s take a look at an example. First, in accordance with the mobile-first approach, we’ll set the font sizes for small screens:

Next, we’ll adjust the font size of the HTML element for larger screens. Since the size of H1 headings is defined via rem, it will be automatically scaled:

Another popular approach is to use the CSS units vh and vw to fluidly adapt the font size to the screen height or width. In theory, this approach doesn’t require breakpoints, but sometimes it might lead to text appearing tiny on small screens. In this case, you can implement selective breakpoints or use the CSS calc feature to set a minimum font size.

To optimize headings that fill the entire screen on small devices, there’s an approach that doesn’t use CSS. Headings are supposed to draw the eye to them. That makes it easier for the user to quickly make sense of a page’s content. However, this can sometimes lead to display problems, especially when it comes to longer words. With the HTML entities “non-breaking space” (&nbsp;) and “soft hyphen” (&shy;), you can define where a word should be split.

In addition to layout and typography, responsive images are an important part of responsive design. It obviously wouldn’t make sense to load an image with a length of 1,920 pixels on a screen that’s only 400 pixels wide. For one, the large image would have to be scaled down in the browser, using a fair amount of computing power. And on top of that, the file size of the image increases quadratically with the size of its longest side.

An image with dimensions of 1,920x1,080 pixels will take up four times as much space as one with 960x540 pixels. It will then also take that much longer for the image to load on a mobile device. Putting all this together, it’s clear that non-responsive images have a significantly negative effect on the performance and usability of a website.

The introduction of HTML5 brought with it two new attributes for the <img> tag. The attributes srcset and sizes are used to define several files for an image, also referred to as “assets”. Each individual file is attached to the query of a CSS media feature. That way the browser can load an image from the list of available assets that is optimal for the device at hand.

Let’s take a look at a short example. The following HTML code defines an image for which there are two assets that have been defined with srcset - one with a length of 480 pixels and one with a length of 800 pixels. It’s also been determined using sizes that the 480-pixel image should be used on screens with a width of up to 600 pixels. Otherwise, the browser should load the 800-pixel image.

Traditionally, screens had a larger width than height. Nowadays, smartphone screens are higher than they are wide. Images in landscape format appear relatively small on smartphone screens or any other screens in portrait format. For a better result, you should use a square or portrait image that you’ve cropped yourself. Choosing the various cuts of an image is called “art direction”. This can be implemented with the HTML5 element <picture>. The <picture> element enables you to define several equivalent images for various use cases.

Let’s look at an example. The following HTML code defines a <picture> element that sets various assets for landscape and portrait format. In both cases, there are different versions optimized for various screen sizes:

Traditionally, a site’s navigation is shown at the top of the page, usually as a horizontal list of menus with sub-menus that open via mouseover. This kind of navigation is clearly not suitable for mobile devices - there isn’t enough space and there’s no mouse.

There are various approaches to tackling navigation on mobile devices. They are all space-saving and don’t require a mouse. The user’s attention is often directed to the navigation with an animation. The most popular approaches to responsive navigation include:

• The “hamburger menu” icon (three parallel horizontal lines): This element is tapped on to activate the menu.
• “Off canvas” navigation: The menu slides in from the edge of the screen and pushes the current screen content to the side.