What is Re­spon­sive Design?

Re­spon­sive design is an approach to de­vel­op­ing websites that enables their optimal display on various types of end devices. The term re­spon­sive design is only as old as the mobile web and gained wide­spread use around 2013.

Before the arrival of the mobile web, the landscape of internet-enabled end devices was rel­a­tive­ly ho­moge­nous: 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 de­nom­i­na­tor. 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 sig­nif­i­cant di­ver­si­fi­ca­tion of end devices. Smart­phone and tablet screens differ from desktops in several respects. Pixel di­men­sions now play an important role, and physical res­o­lu­tion (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 smart­phones and tablets, large high-res­o­lu­tion 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 re­spon­sive 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 ex­pe­ri­ence (UX).

Re­spon­sive design covers a wide range of tech­nolo­gies and ap­proach­es that are combined to develop a fully re­spon­sive website. This includes:

• HTML5 elements such as picture and at­trib­ut­es such as srcset and sizes
• CSS media queries
• CSS units
• Using several assets from one resource
• The mobile first approach

Designing a re­spon­sive website offers several ad­van­tages. The main con­sid­er­a­tion here is user ex­pe­ri­ence (UX). In theory, you can implement good UX without re­spon­sive design, but that would require your own mobile site or the use of JavaScript. All in all, that kind of approach will be sig­nif­i­cant­ly more complex than a CSS-based re­spon­sive design approach and will require more upkeep.

A website’s design plays a large role in how visitors perceive the in­for­ma­tion presented on the site. A good design reflects the identity of the or­ga­ni­za­tion behind the website and helps to connect the user to your brand. Visitors should have a positive ex­pe­ri­ence when visiting your website. Let’s look at two examples for the im­por­tance of re­spon­sive design to user ex­pe­ri­ence:

• 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 thumb­nails. 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-re­spon­sive 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 in­di­vid­ual 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 sig­nif­i­cant dis­ad­van­tages to deciding against a re­spon­sive website. Some notable examples are:

• Bad con­ver­sion rates and high bounce rates, due to sub­op­ti­mal design and bad user ex­pe­ri­ence.
• Bad search engine ranking, as Google rec­og­nizes when, for example, website elements are located too close to one another.
• Bad per­for­mance, due to long loading times of resources that haven’t been optimized.

Re­spon­sive design includes various ap­proach­es and tech­nolo­gies. There are usually several solutions for different scenarios that might come up. De­vel­op­ment is still in a state of flux.

Since the be­gin­nings of the Internet, im­ple­ment­ing complex layouts on websites has been a science. HTML has various types of elements that behave dif­fer­ent­ly depending on the layout. Let’s look at the element types block, inline, and inline-block in par­tic­u­lar. 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 re­spon­sive design:

Im­ple­ment­ing 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 di­men­sions 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 re­spon­sive layout can easily be im­ple­ment­ed:

• 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 con­tain­ing 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 im­ple­men­ta­tion with classes from the re­spon­sive CSS framework Tachyons. For each preview container we define the classes “w-100 w-50-m w-25-l”. All four preview con­tain­ers 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 ver­ti­cal­ly.

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 ori­en­ta­tion of the device. The extra text should appear only if the width of the screen is less than 640 pixels when displayed ver­ti­cal­ly. Otherwise, the element should be hidden:

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

For optimal user ex­pe­ri­ence, the font size of text elements should be adapted for the screen being used. There are various tech­niques in re­spon­sive design for im­ple­ment­ing this.

The basic in­gre­di­ent is the CSS element rem (“root element”), which binds the font size of an element pro­por­tion­al­ly to the HTML “root” element. To con­sis­tent­ly scale the text, you can simply adapt the font size of the “root” element using CSS break­points.

Let’s take a look at an example. First, in ac­cor­dance 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 au­to­mat­i­cal­ly 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 break­points, but sometimes it might lead to text appearing tiny on small screens. In this case, you can implement selective break­points 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, es­pe­cial­ly 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 ty­pog­ra­phy, re­spon­sive images are an important part of re­spon­sive 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 qua­drat­i­cal­ly with the size of its longest side.

An image with di­men­sions 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-re­spon­sive images have a sig­nif­i­cant­ly negative effect on the per­for­mance and usability of a website.

The in­tro­duc­tion of HTML5 brought with it two new at­trib­ut­es for the <img> tag. The at­trib­ut­es srcset and sizes are used to define several files for an image, also referred to as “assets”. Each in­di­vid­ual 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 de­ter­mined 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.

Tra­di­tion­al­ly, screens had a larger width than height. Nowadays, smart­phone screens are higher than they are wide. Images in landscape format appear rel­a­tive­ly small on smart­phone 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 im­ple­ment­ed with the HTML5 element <picture>. The <picture> element enables you to define several equiv­a­lent 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:

Tra­di­tion­al­ly, a site’s nav­i­ga­tion is shown at the top of the page, usually as a hor­i­zon­tal list of menus with sub-menus that open via mouseover. This kind of nav­i­ga­tion is clearly not suitable for mobile devices - there isn’t enough space and there’s no mouse.

There are various ap­proach­es to tackling nav­i­ga­tion on mobile devices. They are all space-saving and don’t require a mouse. The user’s attention is often directed to the nav­i­ga­tion with an animation. The most popular ap­proach­es to re­spon­sive nav­i­ga­tion include:

• The “hamburger menu” icon (three parallel hor­i­zon­tal lines): This element is tapped on to activate the menu.
• “Off canvas” nav­i­ga­tion: The menu slides in from the edge of the screen and pushes the current screen content to the side.