Responsive Web Design - What does Responsive mean?

Katleen Hinz, 8 November 2022
6 Min. reading time

Responsive web design is almost a must in this day and age. Since many websites are now only accessed on smartphones or tablets, it is important for website owners to have a responsive design on their site.

But what does "responsive" actually mean? In the following article, we explain what a responsive web design is, how you can make your web design responsive and give you some examples of how you can build a responsive web design.

What is Responsive Web Design?

Responsive web design means that the web design of a website adapts to any size of screen. Accordingly, the design of a page is made cross-device with Responsive Web Design. All content must be displayed optimally and without problems on every screen. 

This refers to both the technical and the media tools such as images, videos or typography. 

When the internet was invented in 1991, websites naturally only had to exist for the desktop. In turn, when smartphones came onto the market, web designers had to think about how to display their pages on smaller screens.

In the beginning, two different websites were created - a desktop version and a mobile version. To reduce this additional effort, the term Responsive Web Design was introduced for the first time in 2010.

This means that there is no longer any need to develop two different versions of websites, but only one that adapts to the circumstances, i.e. the different screen sizes, with the help of CSS and HTML.

 

What does responsive behaviour mean?

"Responsive behaviour" means "responsive behaviour", which means that a Responsively designed web design can react to the given environment. The web design reacts to the user's screen size and the design, content and media are adapted accordingly.

 

What are the different types of responsive web design?

In general, there are two types of responsive web design: the Adaptive Layout and the Responsive Layout. The layout is then either adaptive or responsive accordingly, relying on a fixed or a flexible grid system.

The adaptive concept has a fixed grid system. The grid system is described in more detail below. This fixed grid system is then optimised in advance for different screen sizes.

The Responsive concept, on the other hand, is based on a flexible grid system. This means that the content and the web design in general can react and adapt to the circumstances, i.e. to the different resolutions and screen sizes.

Basic information on this topic can be found here: Web design 

How do I make a website Responsive?

If you want to create a Responsive website, as a web designer you must first determine the order in which it is to be developed. You have two options: from desktop to smartphone or from smartphone to desktop.


From desktop to smartphone (or tablet)

If you decide to make your web design primarily for the desktop screen, this means that you will then have to optimise this version for smaller and smaller screens such as a smartphone or tablet. The latest designs and technologies are used here and are particularly effective on large screens such as a desktop or television.

However, this also means that these latest designs and technologies could cause problems on smaller screens or even on older devices.

From smartphone (or tablet) to desktop

Exactly the opposite of this is the development of a version that is mainly created for the smartphone or tablet, which is then later optimised for larger screens. This is about making a website accessible for any device, no matter how old or new.

After that, the web design is progressively optimised for higher resolutions and larger screens. Versatile technologies or designs can still be added at this point, but the web design should not be based on these from the beginning.

Flexible layout 

The flexible layout is about being able to adapt to the respective screen size and resolution, which is why it must be flexible. To do this, you must divide the content into sections, which must not be static in a web design that is built responsively. 

For this reason, the sections are divided onto a 12-column grid system like in a newspaper or magazine. Thus, the flexible form is made possible on all screen sizes, as the content can be arranged randomly in this grid and there are any number of variations of these columns.

There are various applications for creating this grid system, such as "bootstrap" or "responsive grid system".

CSS Media Queries

In order to make the web design and the structure of the website responsive, however, these columns must be able to adapt themselves to the screen and thus change. This is where the media queries come into play, which define so-called breakpoints. 

Breakpoints determine where the content can be "broken" to fit the size of the screen.

Each screen size gets its own code to make the columns and content flexible and responsive.

 

What are examples of Responsive Web Design?

Responsive navigation

If you want users to find their way around your website, you as a web designer must make the navigation as user-friendly as possible. This navigation looks different on the desktop version than on the mobile version.

What is a menu bar at the top of the screen on desktop websites is a so-called hamburger icon on smartphones and tablets. You can recognise this by the three horizontal strokes on top of each other. 

On mobile websites, the menu bar is completely hidden and the menu only appears when you click on this hamburger icon. Then the menu opens and is displayed on the entire smartphone or tablet screen.

This is also how you should handle your responsive design in web design. How you design your menu within this menu bar or the hamburger icon is up to you.

Responsive Content

Of course, you should also build your content Responsively, which means that you determine where your content may be "broken" and where not by setting breakpoints. Of course, you can also determine from the beginning how your web design should be displayed on smartphones or tablets and how it should be displayed on a desktop (adaptive vs. responsive). 

For example, you can also work out the order of your content differently on the mobile page than on the desktop version.

Also make sure that the user is not overwhelmed by the content on smaller screens and consider whether some content can be hidden to make your content easier to read.


Responsive typography 

With typography, too, there is either adaptive or responsive adaptation. The smaller the screen, the more attention must of course be paid to appropriate and pleasant-to-read typography.

An adaptive adjustment of the typography would be, for example, changing the font size at different screen sizes that are determined in advance. A responsive adaptation would be when the font size adjusts itself according to the screen size.

Conclusion

If you want to make your web design Responsive, as a web designer you have to consider some things that may (have to) look different on the mobile version than on the desktop version.

First, decide the order in which you want to build your responsive web design: Mobile or Desktop First? 

Then build on this and optimise the individual elements adapted to and optimised for larger or smaller screens. Whether you choose adaptive or responsive elements is up to you.

If you still have questions or would like more information about Responsive Web Design, please contact us via our website - we will be happy to help you.

Article from
Katleen Hinz
Katleen is a content creator at f5.design. But above all, she is an expert in international communication and media studies. In her free time, she travels and explores the world with a zest for life.

Do you like our work? Let us support you

Leave a Reply

Your email address will not be published. Required fields are marked *

Ready for the next step?
Let's talk.

[email protected]+49 (0) 2935 9639 772
f5.design has 5,00 from 5 Stars 95 Reviews on ProvenExpert.com
userclock
en_GB
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram