Responsive Webdesign

Responsive web design is the standard. This article gives you a comprehensive overview of the technical and design requirements and challenges associated with a flexible website.

It’s hard to imagine today: pixel-perfect designs.

And it was not so long ago that this was common.

Designs created in graphics programs with pixel-perfect accuracy in long coordination processes with the customer were then (often laboriously) implemented in all browsers with pixel-perfect accuracy.

And the customer then checked the new page in every system and browser and if one pixel was not correct – the beautiful cross-platform impression was gone …

Those days are over.

The seemingly endless and confusing mass of devices alone no longer allows pixel-precise alignment – and it doesn’t have to be. Websites don’t have to be pixel-perfect, they „just“ have to look good and be easy to use on any device. Which is sometimes even harder than the above-mentioned pixel-precise alignment.

In this article you will learn why it can be difficult and what has to be considered for such a responsive website:

Table of Contents [Show]

Responsive Web Design – The Comprehensive Guide to a Responsive Website 1

What is responsive web design?

Since its invention in 1991, the World Wide Web has been a desktop-only application. The first gamechanger was the introduction of the iPhone in 2007, which pushed websites optimised for display on large desktop monitors to their limits. The onset of the smartphone boom demanded new approaches.

At first, two websites were often created: a „normal“ and a mobile version, which of course meant considerable additional work.

For web development, the article Responsive Web Design by Ethan Marcotte in 2010 was the new reference. Marcotte introduced for the first time to a larger audience a new technique, the media queries, with the help of which websites can be flexibly adapted to different screen sizes.

Responsive Web Design – The Comprehensive Guide to a Responsive Website 2

Almost antiquarian today: the iPhone 1

Depending on the screen size, resolution and orientation (portrait, landscape), different display properties can be set via CSS. The result is absolutely flexible websites that can adapt to any possible display.

This change, which was first a change in mindset, was of course irritating at the beginning. Not only the technology now had to be thought of in a new or at least different way. The design and even the content had to become flexible.

And to this day, flexible content adaptation is one of the biggest challenges of Responsive Web Design.

The technology can be learned, the design is of course created flexibly today, but the information architecture sometimes requires completely different scenarios. The use of a website can differ significantly from desktop to smartphone and thus the content and the content and navigation structure should adapt.

Different viewports

And the development went even further:

For a few years now, users have been surfing more via mobile devices than via the classic PC. The consequence would therefore be to no longer think of websites from the desktop and then adapt them for other (mostly smaller) screens. The logical consequence would be to think mobile first, i.e. to create websites for smartphones first and then see how they should be adapted for larger output devices.

Either way, it has become standard today and no longer needs to be explicitly mentioned in web enquiries and offers, for example:

Every new website should be responsive!

Responsive web design is actually so much more than a few front-end technologies.

Interesting facts about the behaviour of Internet users

The time spent on the Internet in Germany is 200 minutes per day.

The highest usage time, with an average of over 350 minutes per day, is in the 14-29 age group.

The proportion of Germans who use the mobile internet is over 75 percent.

40 million people in Germany communicate via WhatsApp every week.

40 percent more time is spent by men on the internet.

According to one estimate, there were around 4.9 billion internet users worldwide in 2021.

Around 60 percent of senior citizens in Germany say they use the internet.

You can find even more internet statistics at Statista.com, especially on internet use in Germany.

Responsive workflow

In the past, the process of creating a website was quite clear:

Conception, content, design and technical implementation could be done separately, one after the other. One development step after the other, so to speak.

In the responsive workflow, however, this process is and must be broken up. Content, design and technology are no longer separate disciplines, but must be thought about and implemented together. This makes for a better website in the sense that it adapts flexibly to different user requirements, usage situations and end devices and allows the best possible presentation.

At the same time, this interplay of disciplines makes creation more challenging. Conceptionists, designers and developers should work out the website together with the client. Ideally, the whole should be greater than the sum of its parts. In the worst case, the friction losses are greater and many (smallest) compromises and unused opportunities arise.

Responsive web design workflow

Concept, design and technology work „hand in hand“ to develop prototypes that are tested regularly.

And anyone who creates websites independently or in a small team must now be able to cover and combine several disciplines or think along with them and advise the client accordingly. And this is precisely where there is a great need for current and future web designers:

Today, any simple template offers a technically flawless responsive website. But adapting content, information architecture and content design in such a way that they lead to an effective website is difficult(er).

The following project procedure has therefore proved its worth in the creation of responsive websites:

Clarify project framework conditions

Enquiry, briefing, offer – here the most important key data such as scope, process, time and cost framework are clarified. The first design specifications or desired functionalities may also be discussed.

Conception – developing a content strategy

According to the motto „content first“, the content (if available) is first collected, evaluated and structured. In other words, a kind of content inventory is made. Here it becomes clear which content can remain, which needs to be adapted or which needs to be newly created.

A navigation structure can then be developed from this: Main pages and sub-pages can be structured. And the content for the individual pages can also be determined.

Wireframes – the content choreography

Once the content of the individual pages has been determined, so-called wireframes can be created. Here the content structure of individual pages is created, completely without design, it is purely about the arrangement of the content. And wireframes can be created for exemplary screens or device sizes.

You can find out more about creating wireframes in the article Wireframes in web design – A guide on how to use wireframes in the website process.

Responsive Web Design – The comprehensive guide to a responsive website 3

Wireframes can be used to test and preset the arrangement of content.

Technical implementation – creating a prototype

One motto of the responsive workflow is to start as early as possible in the browser. It is no longer necessary to wait for a (pixel-perfect) design once the (rough) content structure and desired functions have been determined.

The earlier the technical implementation is started, the sooner the need for correction is recognised and the sooner the website can be tested and optimised on different systems.

Responsive Web Design – The Comprehensive Guide to a Responsive Website 4

With the first website prototypes, you can test functions and usability on different devices at an early stage.

Design – Developing the look and feel

The design can begin in parallel with the technical development. Mood boards or stylescapes can be a helpful method to approach the design and avoid the embarrassment of having to create large, extensive screen designs in some graphics programme.

With mood boards and stylescapes, the visual direction can be worked out quite quickly and is thus the guideline for the implementation or can be gradually transferred to the prototype and expanded and refined there accordingly.

Responsive Web Design – The Comprehensive Guide to a Responsive Website 5

With a mood board or stylescape, the design direction can be agreed at an early stage.

Test and discuss

The prototype is gradually worked out and becomes a complete website. Technology, content and design can therefore be supplemented, tested and optimised „on the living object“.

This is a great advantage for the client: he no longer has to accept „one big page“ at the end, but can view, test and evaluate intermediate states again and again. This so-called iterative process prevents development from going (too) long in the wrong direction. It is therefore more efficient, but the coordination and communication among each other becomes even more a decisive factor for the success of the project.

You can find a detailed workflow guide in the article:

The Workflow in Responsive Web Design.

Different types of Responsive Web Design

A responsive website can generally be divided into two types:

An adaptive layout and a responsive layout.

An adaptive layout is closer to the old web design workflow. The page is optimised for different sizes. For example, a variant for desktop, tablet and smartphone screens. This results in rather rigid design grids as with earlier websites.

You could say that the focus here is on the output devices and not on the content or the content presentation.

The responsive website of the bahn.

The Deutsche Bahn website in two usage scenarios: Once the desktop offer and the mobile view.

With a responsive website, on the other hand, the page adapts continuously to the output device and is thus much more flexible. However, the presentation of the content is somewhat more „unclear“ because it is not exactly defined.

While responsive layouts can therefore react continuously to any change in the size of the browser, adaptive layouts are not as flexible and only react at certain points (the so-called breakpoints).

Procedure for implementing a Responsive Web Design

When creating a responsive website, there are basically two ways:

From large to small or vice versa.

Graceful Degradation – Desktop first

Starting from a large screen, the website is created with full functionality. It is then gradually optimised for smaller resolutions and, if necessary, „slimmed down“ in terms of content and functionality.

This procedure corresponds to the familiar approach and is easier to follow.

Graceful DegradationA schematic representation of Graceful Degradation.

First developed for large screens and modern browsers.

Progressive Enhancement – Mobile first

Progressive enhancement takes the opposite approach. Here, we start with the smallest possible resolution and a „weak“ system (small screen area, slower data transfer and potentially more distracted users in the foreground).

Step by step, the website is then expanded for larger resolutions and „stronger“ systems. More complex technologies and layout features can then be used.

This approach is more challenging, but actually more contemporary, because here the content is in the foreground right from the start (content first).

Progressive EnhancementA schematic representation of progressive enhancement.

From mobile first, the site is gradually enhanced for larger and more modern devices.

Technical components of a responsive web design

A responsive website should be able to adapt flexibly to the circumstances of the end user.

Three building blocks are needed so that content and design can adapt:

Flexible layout

Media queries & breakpoints

Flexible media/images

One could also add flexible typography, because in the end it is mostly about texts and their readability.

Let’s take a closer look at the building blocks in detail:

Flexible layout

A flexible layout is the basis and prerequisite of a responsive website. The layout is usually based on a grid with several columns.

Working with grids has been common in print design since time immemorial in order to align elements or to simplify the placement of content.

Responsive Web Design – The Comprehensive Guide to a Responsive Website 6

A typical column grid in print design.

Web design has long used static grids with pixel values, such as the famous 960 grid system:

Responsive web design – The comprehensive guide to a responsive website 7

For many years, the 960 grid system with its pixel values was the standard.

In responsive web design, however, the columns must no longer be static, but flexible.

A well-known and popular grid system is bootstrap. This frontend framework contains many (prefabricated) elements, especially a responsive grid system with columns.

The content is divided into up to 12 individual columns. The number 12 sounds like a lot, but it allows for many variations. Columns can be combined to create, for example, three sections, each of which extends over four individual columns:

Responsive Web Design – The Comprehensive Guide to a Responsive Website 8.

This makes a column arrangement possible for virtually every conceivable use case. Many other grid systems also use the 12 columns as a starting point.

Overview of responsive grid systems:

Many grid systems are contained within a larger CSS framework. There are even pure grid systems whose code is then much leaner. Here is a list of the most interesting responsive grid systems:

Bootstrap

Foundation

Responsive Grid System

Skeleton

Flexbox Toolkit & Grid

Flexbox Grid

Basscss

However, the layout does not become flexible through different column variations alone. Only by specifying the column widths as percentages does the layout become fluid. Depending on the width of the content area or alternatively of the browser window, the columns adapt dynamically.

And depending on the output size, the columns can be given different widths and thus wrap around. For example, at very small resolutions, a three-column spread may no longer be next to each other, but below each other.

Layout types

There are several ways to arrange the columns using CSS.

Float layouts

Responsive Web Design – The Comprehensive Guide to a Responsive Website 9

For a long time, the usual implementation was by CSS float statement. An HTML element, e.g. a div container as a container for the column content, no longer automatically extends over the full width, but is taken out of its natural element flow and virtually shifted to the left. Other div containers are also moved and gradually arrange themselves to the right of it. In this way, elements can be arranged flexibly and in a variety of ways.

More information about float layouts can be found here:

All About Floats

The Mystery Of The CSS Float Property

For many years, floats were the preferred choice when implementing a website layout. For a few years now, the two newer CSS layout variants Flexbox and CSS Grid have been preferable due to their greater variability.

CSS Flexbox

The „Flexible Box Layout Module“ was invented especially for the creation of flexible and responsive layouts.

Flexbox works in a „parent-child“ relationship, i.e. display: flex is applied to the parent elements (flex-containers), using appropriate declarations to control the behaviour of the child elements (flex-items):

</div>

Responsive web design – the comprehensive guide to a responsive website 10

A flex-item can double as a flex-container to create further hierarchy and subdivision of the flex layout, often in a vertical direction.

Properties such as justify-content and align-items can be used to distribute content elements along the flex axes. The direction of the main flex axis can be adjusted with flex-direction to allow content to flow past specific breakpoints when needed. And so on… This makes the flexbox more flexible than float layouts.

Learn more about flexbox here:

A Complete Guide to Flexbox

CSS Grid

CSS Grid layouts go one step further and are particularly suitable for complex layouts.

CSS Flexbox – and floats anyway – are rather meant for linear (presentation) structures. CSS Grid, on the other hand, allows for „real“ design grids that are not just one-dimensional.

Responsive Web Design – The Comprehensive Guide to a Responsive Website 11

CSS Grid aligns elements in columns and rows, so the elements are placed within cells defined by the grid:

With properties such as grid-column & grid-row for row-based arrangements and grid-template-areas, grid-template-columns & grid-area for row- and column-based arrangements, among others, complex layouts can be realised.

Further information on CSS Grid can be found here:

A Complete Guide to Grid

The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment

Grid by Example

Flexbox is more suitable for linear arrangements and CSS Grids for complex nested layouts. It is not uncommon for a combination of the two techniques to be useful.

Responsive Web Design – The Comprehensive Guide to a Responsive Website 12

CSS Grid and Flexbox in quick comparison – CSS Grid is better for two-dimensional alignments.

CSS Media Queries – Screen output depends on resolution

For a responsive layout, flexible columns alone are not enough. For an optimal display on different devices such as tablets or smartphones, the column arrangement should (be able to) change.

With the help of CSS media queries, so-called breakpoints are defined at which the website layout breaks.

It works like an „if-then“ function: it checks whether the display width of the browser is wide enough or too wide before the corresponding code is executed:

@media screen and (min-width: 780px) {

/* New code */

}

Only when the display width is at least 780 pixels, then the code is executed. And the other way round, the code would read as follows:

@media screen and (max-width: 780px) {

/* New code */

}

Only if the display width is 780 pixels maximum, the code will be executed.

In this way, separate codes can be output for different browser widths and, for example, different column arrangements can be created. This makes the grid and the content flexible.

Layout approaches – mobile or desktop first

Depending on the approach, the layout is first designed for the smallest possible screens – or for the largest possible screens.

From small to large – media queries for mobile first

First, the view and the CSS code are optimised for small screen sizes and then gradually for larger screen resolutions. This could look like this, for example:

/* code for small screens */

@media only screen and (min-width: 720px) {

/* Optimised code for slightly larger screens like tablets */

}

@media only screen and (min-width: 1024px) {

/* Optimised code for large (desktop) screens */

}

Responsive web design – The comprehensive guide to a responsive website 13

From large to small – Media Queries for Desktop First

The reverse approach starts from large screens first, then outputs code for smaller and smaller viewports:

/* code for large screens */

@media only screen and (max-width: 1024px) {

/* Optimised code for medium screens */

}

@media only screen and (max -width: 720px) {

/* Optimised code for small screens */

}

For guidance, use the following general breakpoints:

Below 786 pixels – Smartphone Portrait

From 786 pixels – Smartphone Landscape / Tablet Portrait

From 1,024 pixels – tablet landscape, notebook, desktop monitors

From 1,200 pixels – large screens

However, orientation towards specific devices is only useful in rare cases. Predefined breakpoints are usually rather unfavourable. It is better to define the breakpoints individually for the project or the current layout.

This is done by checking within which width a layout „works“, i.e. looks good. The appropriate breakpoints can be found by testing. As soon as the presentation no longer fits, i.e. „looks nice“ or is easy to use, a breakpoint should be defined.

A deeper introduction to media queries can be found here:

The complete guide to CSS media queries

Viewport – the display area

For mobile devices, there is another special feature to consider, which dates back to the times when many websites were not optimised for smaller devices. In this case, the entire page was automatically scaled down to be completely visible on the screen (at least in width). The user then had to zoom in to read exactly what was on the page. A rather tedious undertaking.

Users are used to scrolling websites vertically on both desktop and mobile devices – but not horizontally. So if the user is forced to scroll or zoom horizontally to see the entire web page, it leads to a poor user experience.

In addition, nowadays the pixel resolutions of smartphones and tablets are extremely large: websites would be able to be displayed in full width and high resolution, but the content and texts would then appear quite small and difficult to read. Therefore, the device pixels do not necessarily correspond to the CSS pixels.

The following information should therefore be included in the HTML-head area in any case:

This defines the display width so that it adapts to the width of the screen of the respective device (width=device-width), the so-called viewport. The initial-scale specification stands for the initial zoom factor and signals that the page should be displayed in a ratio of 1:1 on the screen of the mobile device.

More on this complex topic in the article:

Using the viewport meta tag to control layout on mobile browsers.

Responsive Images – Flexible Media & Images

Images – and other media – should of course be able to adapt as flexibly as possible on a responsive website. The biggest problem here, however, is the ratio that results from the definition of the width and height of the element itself.

If the viewport becomes larger, the contained image becomes wider, which means that it must also become taller.

You can now set the element width to 100%, but not implement the same for the element height, because otherwise the image would become as high as the parent element and not depending on the width.

A first simple solution would be to set the height to „automatic“. In the CSS it would look like this:

img{

width: 100%;

height: auto;

}

The images thus already flexibly adapt to the width (of the parent element). But one big problem remains:

Large images remain large even on small devices/resolutions, at least as far as the amount of data is concerned.

For example, a large background image that is supposed to cover the full width of the browser on a desktop screen is completely oversized on a smartphone.

Especially since images – thanks to retina displays – are often saved with double the size (pixel dimensions) in order to look razor-sharp. On low-resolution devices, however, high-resolution graphics are also loaded in this way.

In HTML, this can be solved with the srcset attribute:

<img srcset=“large-img.jpg 1024w,

middle-img.jpg 640w,

small-img.jpg 320w“

src=“small-img.jpg“

Depending on the viewport width, other images with different sizes are output. For viewports smaller than or equal to 320 pixels wide, the graphic small-img.jpg is loaded. As soon as the viewport is larger than 320 pixels, middle-img.jpg is loaded and so on.

Ideally, however, the image element is supplemented by a sizes attribute. This considers not only the width of the viewport, but the actual display size of the image in the layout.

<img src=“https://www.mediaevent.de/html/img/needles-1440.jpg“

srcset=“https://www.mediaevent.de/html/img/needles-780.jpg 780w,

https://www.mediaevent.de/html/img/needles-1024.jpg 1024w,

https://www.mediaevent.de/html/img/needles-1440.jpg 1440w,

https://www.mediaevent.de/html/img/needles-2400.jpg 2400w“

sizes = „(min-width: 1600px) 1200px, // ViewPort at least 1600 px, take image with 1200px width.

(min-width: 1400px) 1100px, // ViewPort at least 1400 px, take image with 1100px width

(min-width:1000px) 900px, // ViewPort at least 1000 px, take image with 900px width

100vw“ // smaller ViewPort: full width of the ViewPort (100vw)

width=“780″ height=“521″

alt=“HTML img srcset – load images according to the width of the ViewPort“>

</div>

For a more detailed look and lots of code, see the article:

img srcset and sizes – Alternative image sizes.

Art Direction – Changing the Motif

Sometimes you don’t just want to define the same image (motif) in a smaller or larger size. Sometimes you want to change the image motif or the image section. For example, a very landscape-format picture on large screens should become a portrait-format picture on smartphones.

This can be done with the HTML-picture element:

</picture>

With a media query, the viewport width is queried and an image source is specified accordingly. If none of the queries apply, the last image is loaded.

More about responsive images can be found in the article Responsive Images in CSS.

Images via CSS

Images/graphics that are not quite as relevant to the content can be used as background images via CSS, e.g. in a div container:

background-image: url(images/background-photo.jpg);

With the help of media queries, this statement can be redefined for an element again and again or overwritten with new image paths. And with properties like background-size, the background image can be scaled and transformed.

Read more: Designing flexible CSS backgrounds with background-size.

SVG

The challenge with images and the options mentioned above is that images are pixel-based and therefore the required dimensions should be as flexible as possible.

For graphics such as illustrations, icons, logos, etc., it is therefore worthwhile to use the SVG file format. These are vector graphics that can be scaled as desired – without loss of quality. In addition, their memory requirements are low.

They can be defined in HTML like other image formats:

<img src=“grafik.svg“ width=“800″ height=“400″ alt=“SVG in an image tag“>.

You can find more SVG options here: SVG for responsive websites.

Responsive Navigation

One of the most challenging aspects of responsive web design is navigation.

The navigation is probably the most important element of a website. It gives the user a quick overview of the main points of the website. It allows the user to access all contents quickly and intuitively. It is, so to speak, the central control element.

This important element of a website, which can be used to reach the individual sub-pages, disappears on small screens behind a symbol with three horizontal lines, the so-called hamburger icon.

On small screens, the user has little overview anyway – he „only“ sees the logo, the first teaser, one or two headlines, one or two pictures and one or two blocks of text – at most. That is very little to give him a good feeling of being on the right page (the power) and to give him an overview of what to expect on the page. So in this situation, navigation as an „overview element“ is still out for the time being.

Responsive Web Design – The Comprehensive Guide to a Responsive Website 14The icon for responsive navigation:

The hamburger icon

By now, the user has learned the meaning and operation of the hamburger icon. Nevertheless, he must first be curious enough to click on the icon in order to see which menu items are hidden behind it. The quick intuitive overview as with desktop navigation is not available here. In other words: the user does not know whether the click is „worthwhile“ for him. And often they have to click several times. Because at first only the main points open, whoever wants to look at sub-points has to click again, and so on.

So it requires a so-called cognitive effort on the part of the user, and the challenge for the website creator and operator is to make this as easy as possible for the user.

For mobile navigation, the points that already apply to „normal“ navigation therefore apply even more stringently:

Clear page structure.

Clear, comprehensible naming of navigation points.

If possible, navigation structures should not be too deeply nested.

Always think from the user’s point of view.

Appropriate page links from the content.

Offer further navigation options, e.g. in the sidebar or in the footer.

The user must know, or at least be able to guess, what content is hidden behind each navigation point. Even better: the navigation points should show them the way to the content they are looking for.

But this was only one important aspect, namely the conceptual content of responsive navigation. The other is the technical-functional one – because not all mobile navigation is the same. There are countless techniques for responsive navigation and touch screen operation.

The choice of the right technical implementation depends on the content and the scope of the navigation. Roughly speaking, there are mobile navigations in which the menu items open downwards and further sub-items are displayed one below the other. And then there are navigations that virtually „fly in“ from the left. Further sub-levels are inserted further to the left and right like presentation slides. These navigations then have names like toggle navigation or off-canvas navigation.

More about the technical solutions of responsive navigation can be found here:

Adventures in Responsive Navigation

Navigation in Responsive Web Design

Content choreography

Not only the navigation changes on mobile devices, the content itself is adapted in its presentation and arrangement.

For example, content that used to be arranged in columns is now arranged one below the other on small screens. The website thus becomes the typical mobile „tube“, which can be scrolled for a correspondingly long time.

Sometimes content should then be swapped in the order or even shown and hidden. This is because mobile use may result in other user needs and requirements.

For example, the contact options may be much more interesting for a mobile user than for a desktop user. So instead of presenting the contact details „only“ in the footer, the sidebar or on the contact page, it can be helpful to show them right at the beginning of the page.

Responsive web design – the comprehensive guide to a responsive website 15

The content and its arrangement adapt to the output medium.

Sometimes it can be advisable to hide content on small devices and only show it again when needed (e.g. when a user clicks on it). This also reduces the mass of content to the essentials.

Wireframes are helpful for planning the content choreography. They can be used to quickly draw and test content arrangements in different output sizes. The wireframes then serve as a template for implementation.

Responsive typography

If there is one design element in web design that is – almost chronically – neglected, it is typography. Why should it be different in responsive web design …

A lot of thought is given to the responsiveness of content, layout and media. But especially font sizes, line lengths and line spacing are elementary for readability and this becomes even more important on small devices.

Similar to the layout, the typography can adapt: adaptive or responsive. Adaptive means, for example, that the font size – fixed step by step – adapts to different resolutions. Responsive means that the font size adapts flexibly to the width, continuously and not only at certain breakpoints. Both variants have their advantages and disadvantages. Total flexibility is certainly more challenging and the result more unpredictable.

The content width of the texts, i.e. the line length, normally depends on the width of the parent elements in which the text is located. Sometimes this can be over the full browser width (which is rarely a good idea at larger resolutions). Sometimes it is deliberately restricted by, for example, a max-width specification in the CSS code. Mostly, however, the text is in columns. The column widths change in different widths and so does the line length.

Responsive Web Design – The Comprehensive Guide to a Responsive Website 16

Flexible typography, shown here using an example from The State of Fluid Web Typography.

Flexible font sizes

In order to flexibly adjust the text size and line spacing, it is worthwhile to use flexible size units. Everyone probably knows „px“ as an abbreviation for pixel. This unit is static. Here, the text is given a fixed size. With different breakpoints, this can be adjusted, which would correspond to an adaptive implementation.

To keep the sizes flexible for different technical requirements and user settings, it is better to use the units % or em as an alternative to pixel values. These two units are relative and thus correspond to the accessibility specifications. These set the font size relative to the browser default (usually 16 pixels). However, the font sizes are inherited or the specifications are relative to the parent element – and this is where the difficulty begins. With a correspondingly large number of nestings with font-size specifications, at some point you lose track of which font size comes out in the end.

This is why the CSS3 font size unit rem is a good choice. The unit is just as flexible as % or em, but without the inheritance problem. rem always refers to the root element (html). The calculation of font sizes is therefore much easier in rem, as the sizes no longer have to be calculated in relation to the font size of the parent element.

Font sizes depending on the viewport

There is also the possibility to display the font size depending on the screen dimensions. The so-called viewport units are relative like the rem unit.

The following units exist:

1vw = 1 % of the screen width

1vh = 1 % of the screen height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is greater

Responsive Web Design – The Comprehensive Guide to a Responsive Website 17

Size specifications can also be defined as a function of the viewport dimensions.

This can be used to achieve great effects. The vh unit of measurement is often used to define the heights of content/containers, but it can be used for responsive font sizes.

Concrete font sizes

To create a good reading experience on smaller screens, the text size should be adjusted proportionally and both the line height and the spacing around the text should be reduced.

Body text does not need to be as large on mobile devices as it is on a desktop screen. We usually hold a mobile device much closer to our eyes and the spacing is similar to a book.

The body text usually doesn’t need too many changes. If the font size is 20px at a line height of 1.6 (32px) for a desktop screen larger than 900px and it has 75 characters per line, for mobile devices it can be reduced to 16 – 17px at a line height of 1.5 (24px) at 30 – 45 characters per line.

Responsive Web Design – The Comprehensive Guide to a Responsive Website 18

Common font sizes for body text on desktop and mobile devices.

The situation is similar for headlines:

If the desktop headline has 40px/1.2 (48px), it can be reduced to 30px/1.0667 (~32px).

The difference between 40px and 30px is too big, so you might want to choose an intermediate value for a tablet screen.

In general, the size difference between headings should be much smaller on a small screen than on large screens.

In responsive web design, the use of web fonts – flexible fonts that are specially optimised for use in screen media – has proven successful. Here you will find an overview of the most popular Google Fonts fonts. And how to integrate them: Google Fonts: Integrate in 3 easy steps.

Even more input on flexible typography:

The elements of responsive typography

CSS units and values for Responsive Design:

PX – a single pixel

EM – relative unit based on the font size of the element.

REM – relative unit based on the font size of the element.

VH, VW – % of the height or width of the viewport.

% – the percentage of the parent element.

Useful links for responsive web design

The following are some useful links:

Responsive website examples:

Responsive websites: 30 examples and 5 best practices.

7 responsive design best practices you need to know

Responsive web design: 50 examples and best practices

Tools for testing:

The so-called developer tools that are now included in every modern browser.

Responsively

Sizzy

Blisk

Polypane

Am i responsive?

Mobile friendly test

The future of responsive web design

Responsive web design is not only the future, it has long been the present. But (technical) development never stands still. The coming technical innovations are already available and will become established on a larger scale in the next few years.

For example, there are already the so-called container queries as a supplement to the media queries explained above. With them, a breakpoint can be defined for each element. The breakpoint reacts when the container exceeds or falls below a certain width.

Responsive Web Design – The Comprehensive Guide to a Responsive Website 19

With the CSS properties min(), max() and clamp(), element sizes can be set more dynamically so that transitions between different viewports run more smoothly.

CSS Multi Column allows the implementation of multi-column layouts without the typical flexbox, grids or float statements.

It is important to test the website as regularly as possible during development on all possible devices and to analyse again and again during operation what works well and what not so well.

For this purpose, other websites should be analysed:

How is the responsive implementation here, are there particularly successful „role models“ here. This does not always have to be the entire website, but can also be individual aspects such as the implementation of the navigation or similar.

Responsive web design is the standard. This article gives you a comprehensive overview of the technical and design requirements and challenges associated with a flexible website.

It’s hard to imagine today: pixel-perfect designs.

And it was not so long ago that this was common.

And the customer then checked the new page in every system and browser and if one pixel was not correct – the beautiful cross-platform impression was gone …

Those days are over.

In this article you will learn why it can be difficult and what has to be considered for such a responsive website:

Table of Contents [Show]

Responsive Web Design – The Comprehensive Guide to a Responsive Website 1

What is responsive web design?

At first, two websites were often created: a „normal“ and a mobile version, which of course meant considerable additional work.

Responsive Web Design – The Comprehensive Guide to a Responsive Website 2

Almost antiquarian today: the iPhone 1

And to this day, flexible content adaptation is one of the biggest challenges of Responsive Web Design.

Different viewports

And the development went even further:

Either way, it has become standard today and no longer needs to be explicitly mentioned in web enquiries and offers, for example:

Every new website should be responsive!

Responsive web design is actually so much more than a few front-end technologies.

Interesting facts about the behaviour of Internet users

The time spent on the Internet in Germany is 200 minutes per day.

The highest usage time, with an average of over 350 minutes per day, is in the 14-29 age group.

The proportion of Germans who use the mobile internet is over 75 percent.

40 million people in Germany communicate via WhatsApp every week.

40 percent more time is spent by men on the internet.

According to one estimate, there were around 4.9 billion internet users worldwide in 2021.

Around 60 percent of senior citizens in Germany say they use the internet.

You can find even more internet statistics at Statista.com, especially on internet use in Germany.

Responsive workflow

In the past, the process of creating a website was quite clear:

Conception, content, design and technical implementation could be done separately, one after the other. One development step after the other, so to speak.

Responsive web design workflow

Concept, design and technology work „hand in hand“ to develop prototypes that are tested regularly.

The following project procedure has therefore proved its worth in the creation of responsive websites:

Clarify project framework conditions

Conception – developing a content strategy

A navigation structure can then be developed from this: Main pages and sub-pages can be structured. And the content for the individual pages can also be determined.

Wireframes – the content choreography

You can find out more about creating wireframes in the article Wireframes in web design – A guide on how to use wireframes in the website process.

Responsive Web Design – The comprehensive guide to a responsive website 3

Wireframes can be used to test and preset the arrangement of content.

Technical implementation – creating a prototype

The earlier the technical implementation is started, the sooner the need for correction is recognised and the sooner the website can be tested and optimised on different systems.

Responsive Web Design – The Comprehensive Guide to a Responsive Website 4

With the first website prototypes, you can test functions and usability on different devices at an early stage.

Design – Developing the look and feel

Responsive Web Design – The Comprehensive Guide to a Responsive Website 5

With a mood board or stylescape, the design direction can be agreed at an early stage.

Test and discuss

The prototype is gradually worked out and becomes a complete website. Technology, content and design can therefore be supplemented, tested and optimised „on the living object“.

You can find a detailed workflow guide in the article:

The Workflow in Responsive Web Design.

Different types of Responsive Web Design

A responsive website can generally be divided into two types:

An adaptive layout and a responsive layout.

You could say that the focus here is on the output devices and not on the content or the content presentation.

The responsive website of the bahn.

The Deutsche Bahn website in two usage scenarios: Once the desktop offer and the mobile view.

While responsive layouts can therefore react continuously to any change in the size of the browser, adaptive layouts are not as flexible and only react at certain points (the so-called breakpoints).

Procedure for implementing a Responsive Web Design

When creating a responsive website, there are basically two ways:

From large to small or vice versa.

Graceful Degradation – Desktop first

This procedure corresponds to the familiar approach and is easier to follow.

Graceful DegradationA schematic representation of Graceful Degradation.

First developed for large screens and modern browsers.

Progressive Enhancement – Mobile first

Step by step, the website is then expanded for larger resolutions and „stronger“ systems. More complex technologies and layout features can then be used.

This approach is more challenging, but actually more contemporary, because here the content is in the foreground right from the start (content first).

Progressive EnhancementA schematic representation of progressive enhancement.

From mobile first, the site is gradually enhanced for larger and more modern devices.

Technical components of a responsive web design

A responsive website should be able to adapt flexibly to the circumstances of the end user.

Three building blocks are needed so that content and design can adapt:

Flexible layout

Media queries & breakpoints

Flexible media/images

One could also add flexible typography, because in the end it is mostly about texts and their readability.

Let’s take a closer look at the building blocks in detail:

Flexible layout

A flexible layout is the basis and prerequisite of a responsive website. The layout is usually based on a grid with several columns.

Working with grids has been common in print design since time immemorial in order to align elements or to simplify the placement of content.

Responsive Web Design – The Comprehensive Guide to a Responsive Website 6

A typical column grid in print design.

Web design has long used static grids with pixel values, such as the famous 960 grid system:

Responsive web design – The comprehensive guide to a responsive website 7

For many years, the 960 grid system with its pixel values was the standard.

In responsive web design, however, the columns must no longer be static, but flexible.

A well-known and popular grid system is bootstrap. This frontend framework contains many (prefabricated) elements, especially a responsive grid system with columns.

Responsive Web Design – The Comprehensive Guide to a Responsive Website 8.

This makes a column arrangement possible for virtually every conceivable use case. Many other grid systems also use the 12 columns as a starting point.

Overview of responsive grid systems:

Many grid systems are contained within a larger CSS framework. There are even pure grid systems whose code is then much leaner. Here is a list of the most interesting responsive grid systems:

Bootstrap

Foundation

Responsive Grid System

Skeleton

Flexbox Toolkit & Grid

Flexbox Grid

Basscss

Layout types

There are several ways to arrange the columns using CSS.

Float layouts

Responsive Web Design – The Comprehensive Guide to a Responsive Website 9

More information about float layouts can be found here:

All About Floats

The Mystery Of The CSS Float Property

CSS Flexbox

The „Flexible Box Layout Module“ was invented especially for the creation of flexible and responsive layouts.

</div>

Responsive web design – the comprehensive guide to a responsive website 10

A flex-item can double as a flex-container to create further hierarchy and subdivision of the flex layout, often in a vertical direction.

Learn more about flexbox here:

A Complete Guide to Flexbox

CSS Grid

CSS Grid layouts go one step further and are particularly suitable for complex layouts.

CSS Flexbox – and floats anyway – are rather meant for linear (presentation) structures. CSS Grid, on the other hand, allows for „real“ design grids that are not just one-dimensional.

Responsive Web Design – The Comprehensive Guide to a Responsive Website 11

CSS Grid aligns elements in columns and rows, so the elements are placed within cells defined by the grid:

Further information on CSS Grid can be found here:

A Complete Guide to Grid

The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment

Grid by Example

Flexbox is more suitable for linear arrangements and CSS Grids for complex nested layouts. It is not uncommon for a combination of the two techniques to be useful.

Responsive Web Design – The Comprehensive Guide to a Responsive Website 12

CSS Grid and Flexbox in quick comparison – CSS Grid is better for two-dimensional alignments.

CSS Media Queries – Screen output depends on resolution

For a responsive layout, flexible columns alone are not enough. For an optimal display on different devices such as tablets or smartphones, the column arrangement should (be able to) change.

With the help of CSS media queries, so-called breakpoints are defined at which the website layout breaks.

It works like an „if-then“ function: it checks whether the display width of the browser is wide enough or too wide before the corresponding code is executed:

@media screen and (min-width: 780px) {

/* New code */

}

Only when the display width is at least 780 pixels, then the code is executed. And the other way round, the code would read as follows:

@media screen and (max-width: 780px) {

/* New code */

}

Only if the display width is 780 pixels maximum, the code will be executed.

In this way, separate codes can be output for different browser widths and, for example, different column arrangements can be created. This makes the grid and the content flexible.

Layout approaches – mobile or desktop first

Depending on the approach, the layout is first designed for the smallest possible screens – or for the largest possible screens.

From small to large – media queries for mobile first

First, the view and the CSS code are optimised for small screen sizes and then gradually for larger screen resolutions. This could look like this, for example:

/* code for small screens */

@media only screen and (min-width: 720px) {

/* Optimised code for slightly larger screens like tablets */

}

@media only screen and (min-width: 1024px) {

/* Optimised code for large (desktop) screens */

}

Responsive web design – The comprehensive guide to a responsive website 13

From large to small – Media Queries for Desktop First

The reverse approach starts from large screens first, then outputs code for smaller and smaller viewports:

/* code for large screens */

@media only screen and (max-width: 1024px) {

/* Optimised code for medium screens */

}

@media only screen and (max -width: 720px) {

/* Optimised code for small screens */

}

For guidance, use the following general breakpoints:

Below 786 pixels – Smartphone Portrait

From 786 pixels – Smartphone Landscape / Tablet Portrait

From 1,024 pixels – tablet landscape, notebook, desktop monitors

From 1,200 pixels – large screens

A deeper introduction to media queries can be found here:

The complete guide to CSS media queries

Viewport – the display area

The following information should therefore be included in the HTML-head area in any case:

More on this complex topic in the article:

Using the viewport meta tag to control layout on mobile browsers.

Responsive Images – Flexible Media & Images

If the viewport becomes larger, the contained image becomes wider, which means that it must also become taller.

You can now set the element width to 100%, but not implement the same for the element height, because otherwise the image would become as high as the parent element and not depending on the width.

A first simple solution would be to set the height to „automatic“. In the CSS it would look like this:

img{

width: 100%;

height: auto;

}

The images thus already flexibly adapt to the width (of the parent element). But one big problem remains:

Large images remain large even on small devices/resolutions, at least as far as the amount of data is concerned.

For example, a large background image that is supposed to cover the full width of the browser on a desktop screen is completely oversized on a smartphone.

In HTML, this can be solved with the srcset attribute:

<img srcset=“large-img.jpg 1024w,

middle-img.jpg 640w,

small-img.jpg 320w“

src=“small-img.jpg“

Ideally, however, the image element is supplemented by a sizes attribute. This considers not only the width of the viewport, but the actual display size of the image in the layout.

<img src=“https://www.mediaevent.de/html/img/needles-1440.jpg“

srcset=“https://www.mediaevent.de/html/img/needles-780.jpg 780w,

https://www.mediaevent.de/html/img/needles-1024.jpg 1024w,

https://www.mediaevent.de/html/img/needles-1440.jpg 1440w,

https://www.mediaevent.de/html/img/needles-2400.jpg 2400w“

sizes = „(min-width: 1600px) 1200px, // ViewPort at least 1600 px, take image with 1200px width.

(min-width: 1400px) 1100px, // ViewPort at least 1400 px, take image with 1100px width

(min-width:1000px) 900px, // ViewPort at least 1000 px, take image with 900px width

100vw“ // smaller ViewPort: full width of the ViewPort (100vw)

width=“780″ height=“521″

alt=“HTML img srcset – load images according to the width of the ViewPort“>

</div>

For a more detailed look and lots of code, see the article:

img srcset and sizes – Alternative image sizes.

Art Direction – Changing the Motif

This can be done with the HTML-picture element:

</picture>

With a media query, the viewport width is queried and an image source is specified accordingly. If none of the queries apply, the last image is loaded.

More about responsive images can be found in the article Responsive Images in CSS.

Images via CSS

Images/graphics that are not quite as relevant to the content can be used as background images via CSS, e.g. in a div container:

background-image: url(images/background-photo.jpg);

Read more: Designing flexible CSS backgrounds with background-size.

SVG

The challenge with images and the options mentioned above is that images are pixel-based and therefore the required dimensions should be as flexible as possible.

They can be defined in HTML like other image formats:

<img src=“grafik.svg“ width=“800″ height=“400″ alt=“SVG in an image tag“>.

You can find more SVG options here: SVG for responsive websites.

Responsive Navigation

One of the most challenging aspects of responsive web design is navigation.

This important element of a website, which can be used to reach the individual sub-pages, disappears on small screens behind a symbol with three horizontal lines, the so-called hamburger icon.

Responsive Web Design – The Comprehensive Guide to a Responsive Website 14The icon for responsive navigation:

The hamburger icon

So it requires a so-called cognitive effort on the part of the user, and the challenge for the website creator and operator is to make this as easy as possible for the user.

For mobile navigation, the points that already apply to „normal“ navigation therefore apply even more stringently:

Clear page structure.

Clear, comprehensible naming of navigation points.

If possible, navigation structures should not be too deeply nested.

Always think from the user’s point of view.

Appropriate page links from the content.

Offer further navigation options, e.g. in the sidebar or in the footer.

The user must know, or at least be able to guess, what content is hidden behind each navigation point. Even better: the navigation points should show them the way to the content they are looking for.

More about the technical solutions of responsive navigation can be found here:

Adventures in Responsive Navigation

Navigation in Responsive Web Design

Content choreography

Not only the navigation changes on mobile devices, the content itself is adapted in its presentation and arrangement.

Sometimes content should then be swapped in the order or even shown and hidden. This is because mobile use may result in other user needs and requirements.

Responsive web design – the comprehensive guide to a responsive website 15

The content and its arrangement adapt to the output medium.

Sometimes it can be advisable to hide content on small devices and only show it again when needed (e.g. when a user clicks on it). This also reduces the mass of content to the essentials.

Responsive typography

If there is one design element in web design that is – almost chronically – neglected, it is typography. Why should it be different in responsive web design …

Responsive Web Design – The Comprehensive Guide to a Responsive Website 16

Flexible typography, shown here using an example from The State of Fluid Web Typography.

Flexible font sizes

Font sizes depending on the viewport

There is also the possibility to display the font size depending on the screen dimensions. The so-called viewport units are relative like the rem unit.

The following units exist:

1vw = 1 % of the screen width

1vh = 1 % of the screen height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is greater

Responsive Web Design – The Comprehensive Guide to a Responsive Website 17

Size specifications can also be defined as a function of the viewport dimensions.

This can be used to achieve great effects. The vh unit of measurement is often used to define the heights of content/containers, but it can be used for responsive font sizes.

Concrete font sizes

To create a good reading experience on smaller screens, the text size should be adjusted proportionally and both the line height and the spacing around the text should be reduced.

Body text does not need to be as large on mobile devices as it is on a desktop screen. We usually hold a mobile device much closer to our eyes and the spacing is similar to a book.

Responsive Web Design – The Comprehensive Guide to a Responsive Website 18

Common font sizes for body text on desktop and mobile devices.

The situation is similar for headlines:

If the desktop headline has 40px/1.2 (48px), it can be reduced to 30px/1.0667 (~32px).

The difference between 40px and 30px is too big, so you might want to choose an intermediate value for a tablet screen.

In general, the size difference between headings should be much smaller on a small screen than on large screens.

Even more input on flexible typography:

The elements of responsive typography

CSS units and values for Responsive Design:

PX – a single pixel

EM – relative unit based on the font size of the element.

REM – relative unit based on the font size of the element.

VH, VW – % of the height or width of the viewport.

% – the percentage of the parent element.

Useful links for responsive web design

The following are some useful links:

Responsive website examples:

Responsive websites: 30 examples and 5 best practices.

7 responsive design best practices you need to know

Responsive web design: 50 examples and best practices

Tools for testing:

The so-called developer tools that are now included in every modern browser.

Responsively

Sizzy

Blisk

Polypane

Am i responsive?

Mobile friendly test

Responsive Webdesign

What is responsive web design?

Interesting facts about the behaviour of Internet users

Responsive workflow

Clarify project framework conditions

Conception – developing a content strategy

Wireframes – the content choreography

Technical implementation – creating a prototype

Design – Developing the look and feel

Test and discuss

Different types of Responsive Web Design

Procedure for implementing a Responsive Web Design

Graceful Degradation – Desktop first

Progressive Enhancement – Mobile first

Technical components of a responsive web design

Flexible layout

Layout types

Float layouts

CSS Flexbox

CSS Grid

CSS Media Queries – Screen output depends on resolution

Layout approaches – mobile or desktop first

From small to large – media queries for mobile first

From large to small – Media Queries for Desktop First

Viewport – the display area

Responsive Images – Flexible Media & Images

Responsive Navigation

Content choreography

Responsive typography

Useful links for responsive web design

The future of responsive web design

Brandings by Colours

Gib hier deine Überschrift ein