{"id":67952,"date":"2023-06-05T12:22:18","date_gmt":"2023-06-05T12:22:18","guid":{"rendered":"https:\/\/morningtrain.dk\/create-magical-user-experiences-with-responsive-design\/"},"modified":"2026-04-17T12:47:55","modified_gmt":"2026-04-17T12:47:55","slug":"create-magical-user-experiences-with-responsive-design","status":"publish","type":"post","link":"https:\/\/morningtrain.dk\/en\/create-magical-user-experiences-with-responsive-design\/","title":{"rendered":"Create magical user experiences with responsive design"},"content":{"rendered":"\n

Digitalisering<\/p>

5. juni 2023<\/p>

Create magical user experiences with responsive design<\/h1><\/div>

Responsive design is a method for creating websites and webshops that automatically adapt to the screen size they are displayed on. <\/p><\/div>\n\n

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

\n Indhold\n <\/p>\n \n Hvad betyder det?\n <\/a>\n \n Mobil vs. responsiv\n <\/a>\n \n Hvad du skal t\u00e6nke p\u00e5\n <\/a>\n \n Webshop regler\n <\/a>\n \n Udfordringer\n <\/a>\n \n V\u00e6rkt\u00f8jer\n <\/a>\n <\/div>\n

\n \n\n

What does \u201cresponsive design\u201d mean?<\/h2>\n\n\n\n

It means that the page content scales and rearranges itself so it looks good and is easy to read and navigate, regardless of the screen size used. The goal is to give users a consistent, seamless experience across all devices. <\/p>\n\n\n\n

\n

\u201cResponsive design<\/a>\u201d is on everyone\u2019s lips, and of course that is because the majority of traffic comes from small devices (mobiles), and this trend is only continuing to grow.<\/p>\n<\/div><\/div><\/div>\n\n\n\n

In addition, Google only \u201ccrawls\u201d your mobile site when assessing your relevance. In other words, Google evaluates your rankings based on the mobile experience\u2014and that is regardless of how much mobile traffic you actually have. <\/p>\n\n\n\n

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

Mobile-friendly design vs. responsive design<\/h2>\n\n\n\n

There are two primary methods for creating websites that work well on both large and small screens: mobile-friendly design and responsive design. But what is the difference between the two approaches, and how do you choose the right solution for your website or webshop? <\/p>\n\n\n\n

\n

Mobile-friendly design (also known as \u201cmobile first\u201d) means having a separate version of your website that is optimized for use on mobile devices.<\/p>\n<\/blockquote>\n\n\n\n

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

This can be a good solution for businesses with very complex websites with lots of content and features that may not work well on a small screen\u2014and most importantly\u2014it is only a good idea if you have A LOT of traffic from mobile, not just in percentage terms but in absolute numbers.<\/p>\n\n\n\n

The downside of this approach, however, is that you have to maintain two different versions of your website, which can be time-consuming and resource-intensive.<\/p>\n\n\n\n

In addition, the costs of designing and developing this will mean your budget suddenly becomes x2, as in practice you have to develop 2 websites instead of 1.<\/p>\n\n\n\n

\n

Finally, it should be said that Google<\/a> does not like it when you hide things. This means that if you want to give mobile users a completely different experience than desktop users, you must take great care to remove as little text as possible and instead \u201cjust\u201d present it in a different way. <\/p>\n<\/div><\/div><\/div>\n\n\n\n

Responsive design is a more flexible and future-proof solution. Instead of having two separate versions of the website, you create a single version that automatically adapts to the screen size it is displayed on. <\/p>\n\n\n\n

This means you only need to develop and maintain one website, and users get a consistent experience regardless of which device they visit the site from.<\/p>\n\n\n\n

\u201cResponsive design\u201d is a broad concept, in the sense that you can optimize at different levels and degrees\u2014from simply stacking elements correctly, to elements looking different, having horizontal scroll<\/a>, or something else entirely.<\/p>\n\n\n\n

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

Responsive websites: What you need to consider<\/h2>\n\n\n\n

So what should you consider when creating a responsive website? There are some basic principles and techniques you need to have under control before, in my book, you can call your website responsive. <\/p>\n\n\n\n

\n

First and foremost, it is important to think in \u201cscreen-size groups\u201d rather than specific screen sizes. There are countless different screen sizes and resolutions out there, and it would be impossible to design a website that fits each one perfectly. <\/p>\n<\/div><\/div><\/div>\n\n\n\n

Instead, you should think in groups of screen sizes, such as small, medium, and large screens, and ensure the site works well on all screens within these groups.<\/p>\n\n\n\n

Another important part of responsive design is using \u201cmedia queries\u201d. This is a technique that makes it possible to apply different CSS<\/a> styles depending on the screen size. That way, for example, you can change the font size when the site is displayed on a small screen, making the text easier to read. <\/p>\n\n\n\n

My little checklist:<\/strong><\/p>\n\n\n\n