Responsive Design.

Responsive design means that a website adapts to the device on which it is opened. On a cell phone, content appears in a single column, one below the other; on a tablet, perhaps in two columns; and on a computer, in three or four. According to web.dev, web designer Ethan Marcotte was the first to describe this principle. For your business, this isn’t just a nice-to-have: Google uses the mobile version of your pages for indexing and ranking. So anything missing or not working properly on a cell phone is also missing for Google.

How Responsive Design Works

All devices receive the same HTML code; only the display changes. According to web.dev, this is based on the viewport meta tag in the page header. If it’s missing, mobile browsers display the page as if the screen were about 980 pixels wide and then scale it down. The text becomes tiny, and visitors have to zoom in.

Media queries in CSS handle the actual adjustments—that is, rules such as “two columns starting at a width of 600 pixels.” The points at which the layout changes are called breakpoints. web.dev recommends not defining them based on device models, but rather starting small and breaking the layout where the content requires it. Google lists three ways to create a mobile-friendly website and recommends responsive design because it’s the easiest to implement and maintain.

What Your Business Should Keep in Mind

Check your website on your own cell phone, not just at your desk. Most designs are created on a large screen. In projects, we often see that contact buttons or pricing tables don’t appear on mobile devices until after a lot of scrolling, or they’re cut off on the sides.

Make the phone number clickable. In our Cologne-based trades website report, only 43% of the 734 websites had the number set up as a "tel:" link. On a cell phone, a single tap is the quickest way to submit an inquiry.

Display the same content on mobile as you do on a computer. According to Google, you can organize content on mobile into expandable sections or tabs. However, the main content and headings should remain the same, because Google uses the mobile version as its reference.

Design buttons that are large enough for fingers. The WCAG 2.2 guidelines require, at Level AA, that click targets be at least 24 by 24 CSS pixels or have sufficient spacing from the nearest target, with some exceptions, such as for links in running text.

Frequently Asked Questions About Responsive Design

Do I need a separate mobile version of my website? Generally speaking, no. While Google does describe separate mobile URLs and dynamic serving in addition to responsive design, it recommends responsive design. Separate versions mean twice the maintenance.

Is it enough for the page to simply become smaller on a cell phone? No. A desktop page that’s simply scaled down forces users to zoom. According to web.dev, content such as images should never be wider than the screen; otherwise, horizontal scrolling occurs.

How can I quickly check this myself? Open your most important pages on your phone and tablet, in both portrait and landscape orientation, and see if you need to zoom or swipe sideways anywhere. The Design Check provides a structured assessment of the layout and usability.

If your website isn't mobile-friendly, we'll design it from the ground up to work on all screen sizes.