Responsive design
Much of internet usage today takes place on smartphones – in e-commerce, even the majority of visits. Websites therefore have to work well on every device – from small smartphones to large monitors. Google also evaluates websites based on their mobile version (mobile-first indexing). The standard solution for this is responsive design.
What is responsive design?
Responsive design comes from web design: a page's layout automatically adapts to the screen size of the respective device. Instead of fixed pixel widths, it works with relative sizes and flexible grids.
With responsive design, it doesn't matter which device is used to call up a page. Whether desktop, tablet or smartphone, portrait or landscape – the page adapts. A separate mobile website isn't necessary, because a single website under one URL covers all devices. It's not just text that is adapted but also images, navigation, tables and forms. Modern shop systems such as Shopware and Shopify work with responsive themes by default.
The need is evident not only between PC, tablet and smartphone, but also within these device groups, because screen sizes vary widely. The big advantage: users don't have to zoom in or out with two fingers but can scroll comfortably. This is much more pleasant, especially on smartphones.
How does responsive design work?
The basis is a flexible grid of columns and rows in which all elements of a page are arranged. HTML, CSS, media queries and breakpoints define how this grid behaves on different screens.
HTML gives the website its structure. CSS defines the layout and design of the elements. Media queries are CSS rules that apply depending on the screen width, resolution or orientation of the device. For smartphones to scale the page correctly, the viewport meta tag in the HTML head is also needed.
Breakpoints are the screen widths at which a different layout variant applies – for example when a three-column product list becomes a single column on a smartphone. Images are delivered in the appropriate size via responsive image formats (srcset) so that smartphones don't load unnecessarily large files.
Responsive design became established in the 2010s with the spread of smartphones and tablets. Flexible grids with relative values ensure that content is displayed to suit the screen size. This is easy to try out: make the browser window smaller on this page and you'll see how the display adapts.
Responsive design and its importance for search engine optimisation
Responsive design is of great importance for search engine optimisation.
Responsive design enables users to use content and offers comfortably on any device. A good mobile user experience reduces bounces, increases the conversion rate and strengthens the signals Google evaluates – for example via Core Web Vitals and user behaviour in the search results.
Google has gradually put mobile usage at the centre. Since April 2015, mobile-friendliness has been a ranking factor for mobile searches. With mobile-first indexing, Google has gone even further: it now generally evaluates the mobile version of a website – for desktop search too. Google explicitly recommends responsive design as the simplest and least error-prone solution, because all devices receive the same URL and the same content.
Imagine calling up a website on a smartphone and it looks like a desktop page squeezed onto a small screen. The desire to browse – and to shop – quickly fades. A mobile-friendly website, on the other hand, ensures a good user experience: visitors find information quickly and clearly and find it easier to buy.
With responsive design, there's no need to maintain a separate mobile website. The big advantage: users find the same content on every device – just displayed differently. Separate mobile websites, on the other hand, often offered only a reduced scope, which can directly cost rankings with mobile-first indexing.