{"id":67743,"date":"2023-11-23T11:39:00","date_gmt":"2023-11-23T11:39:00","guid":{"rendered":"https:\/\/morningtrain.dk\/what-is-responsive-design\/"},"modified":"2026-04-22T12:04:49","modified_gmt":"2026-04-22T12:04:49","slug":"what-is-responsive-design","status":"publish","type":"post","link":"https:\/\/morningtrain.dk\/en\/what-is-responsive-design\/","title":{"rendered":"What is responsive design?"},"content":{"rendered":"\n

Digitalisering<\/p>

23. november 2023<\/p>

What is responsive design?<\/h1><\/div>

It is a term that covers all the measures you can take on a web platform (website, webshop, intranet, etc.) to ensure it \u201cworks\u201d on all screen sizes. \u201cWorks\u201d in the sense that the site visually adapts depending on the size of the screen it is accessed from. <\/p><\/div>\n\n

\"\"<\/figure><\/div><\/section>\n\n
\n
\n

\n Indhold\n <\/p>\n \n Hvilke sk\u00e6rmst\u00f8rrelser\n <\/a>\n \n Hvem laver det\n <\/a>\n \n Responsive tiltag\n <\/a>\n \n Vores r\u00e5d\n <\/a>\n <\/div>\n

\n \n\n

When you think responsively, you start from the most commonly used screen sizes, so it is not a given that the experience is 10\/10 on ALL screen sizes.<\/p>\n\n\n\n

In this post, I will share my advice and recommendations for responsive design.<\/p>\n\n\n\n

Can I adapt the responsive design to all screen sizes?<\/h2>\n\n\n\n

Yes, that would be the utopian goal\u2014but it becomes expensive, as both a designer and a developer would need to design and code every conceivable type of view. This would certainly not be our recommendation. <\/p>\n\n\n\n

Instead, you should ask: \u201cDoes it really add enough value to develop a solution that costs 40\u201350% more, just to improve the experience for the last 5\u201310% of your web traffic?\u201d\u2014most of the time, the answer is a loud and resounding NO.<\/p>\n\n\n\n

Our advice is therefore that you should instead check which screen sizes your visitors use most often, and then focus your responsive design efforts on those.<\/p>\n\n\n\n

\"Illustration<\/figure>\n\n\n\n

Who can make something responsive?<\/h2>\n\n\n\n

It is a developer\u2019s job (i.e., someone who can code) to make the website responsive. A designer can \u201conly\u201d show what things should look like at the different screen sizes, but it is the developers who ensure the website adapts technically. <\/p>\n\n\n\n

However, it is a good idea to visualise what the view should look like on mobile and desktop, so the developer can see how things should be coded to adapt in the best way.<\/p>\n\n\n\n

So the bad news is that it is not something you can do yourself without a development background.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Basic responsive measures<\/h2>\n\n\n\n

Now that you cannot code responsive design yourself, what can you do? Quite a lot\u2014you can be mindful of several things and hold your developers accountable for them. <\/p>\n\n\n\n

Below are the most common and basic responsive measures you should have implemented.<\/p>\n\n\n\n

Dynamic font sizes<\/h3>\n\n\n\n

Make sure your fonts<\/a> automatically adapt to the screen size. It should be coded so that the website itself \u201ccalculates\u201d what the font size should be, depending on the screen size. <\/p>\n\n\n\n

For example, if your body text is set to 16px on a 24″ screen, the website should detect the visitor\u2019s screen size and adjust the font proportionally, based on how large their screen is as a percentage relative to a 24″ screen.<\/p>\n\n\n

\n
\n

Try out our 5 recommended font families<\/h3>\n \n
\n
\n
\n

Plus Jakarta Sans<\/strong><\/p>\n

Moderne, stilren, professionel, venlig<\/p>\n <\/div>\n

Lorem ipsum dolor sit amet <\/p>\n <\/div>\n

\n
\n

Titillium Web<\/strong><\/p>\n

Teknisk, futuristisk, skarp, pr\u00e6cis<\/p>\n <\/div>\n

Lorem ipsum dolor sit amet <\/p>\n <\/div>\n

\n
\n

Roboto<\/strong><\/p>\n

Neutral, alsidig, l\u00e6sbar, p\u00e5lidelig<\/p>\n <\/div>\n

Lorem ipsum dolor sit amet <\/p>\n <\/div>\n

\n
\n

Syne<\/strong><\/p>\n

Eksperimenterende, karakteristisk, kunstnerisk<\/p>\n <\/div>\n

Lorem ipsum dolor sit amet <\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n\n

The width of text fields<\/h3>\n\n\n\n

The size\u2014and most importantly the width\u2014of your text fields matters, especially on smaller screen sizes. If you have very wide text fields, you will find that on mobile they create a \u201cwall of text\u201d, because all that wide text suddenly has to fit into a space 10 times narrower, turning the text into a veeeeery long scroll. <\/p>\n\n\n\n

Image style, size and placement<\/h3>\n\n\n\n

Both when choosing an image style and the overall size of your images, you need to consider whether large images work well on smaller screen sizes, and whether you can still see what is happening in the image if it loads very small.<\/p>\n\n\n\n

Alternatively, you can code it so that one image is shown on mobile and another on desktop to provide the best experience for both. As long as you do not hide text from desktop to mobile, search engines will be happy. <\/p>\n\n\n\n

Finally, pay attention to image placement. For example, if an image sits next to text, or you have a mosaic of images in a row, you need to consider how they will stack on mobile so you do not end up with a long row of images on mobile, or an image appearing before the text in a way that makes the images less meaningful. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Everything must fit on the screen<\/h3>\n\n\n\n

You must not have an experience on any screen size that requires zooming in or out to see all the content. The layout must accommodate all content at 100% zoom. <\/p>\n\n\n\n

How elements \u201cstack\u201d in relation to each other<\/h3>\n\n\n\n

On small screen sizes, you cannot avoid stacking your elements on top of each other. The default behaviour in most CMSs<\/a> is to stack things in reading order from left to right. <\/p>\n\n\n\n

That can also provide an okay experience, but you risk some things stacking in a way that creates a long and boring scroll\u2014for example, suddenly getting 3\u20134 images in a row, or 7 customer logos in stripes down the page.<\/p>\n\n\n\n

You can use horizontal scrolling<\/a> to create a rightward scroll for certain content types, providing a smoother and more appealing experience within the vertical scroll, so users continuously encounter new content types instead of \u201cwaterboarding\u201d your visitors with the same type of content page.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Adapting navigation for smaller sizes<\/h3>\n\n\n\n

Make sure your navigation (main menu) works on smaller screen sizes. For example, you often see the menu collapse into a \u201cburger menu\u201d, as these are quite user-friendly on mobiles and tablets. <\/p>\n\n\n\n

Also, make sure the menu items are large enough to tap with a thumb.<\/p>\n\n\n\n

Our advice for responsive design<\/h2>\n\n\n\n