Responsive design, UX and accessibility

Visitors constantly switch between screens and situations. The same website is viewed on a phone on the train, behind a desk on a wide screen and sometimes with a screen reader or only with the keyboard. Responsive design and accessibility together ensure that the experience is right in all those situations.

Responsive design: one site, every screen

Responsive design means that the content remains the same and the layout adapts to the screen. Not a separate mobile site, but one design that moves along.

Mobile-first as a starting point

Start with the narrowest screen. That forces choices: what is truly necessary, what can come later. What works on mobile can always be expanded to desktop. The reverse route often results in a stripped-down mobile version, and that is exactly the screen where most traffic arrives.

Choosing breakpoints based on the content

Breakpoints don't have to align with device names. The practical rule: add a breakpoint at the moment the layout is no longer pleasant. Usually you end up with three or four moments — narrow, tablet, laptop, wide. More breakpoints mean more maintenance without a clear win.

Image that scales along

• provide images in multiple sizes and let the browser choose
• use modern formats such as WebP or AVIF
• give every image fixed dimensions, so the page doesn't jump
• choose a crop per breakpoint if the subject otherwise falls away

Typography that stays readable

Readability depends on three things: line width, line spacing and contrast. Maintain 60 to 80 characters per line, a line spacing around 1.6 for body text and text size that doesn't go below 16 px on mobile. On wide screens, a text column that fills the entire screen is almost always too wide.

Thumb-friendly operation

On mobile, almost everyone operates the site with a thumb. That means: touch targets of at least 44 by 44 pixels, sufficient space between clickable elements and the most important action within reach of the bottom of the screen. Hover effects don't exist on touch, so never let important information depend on them.

Adaptive thinking: context counts

Adaptive goes a step further than screen width. You take into account the situation in which someone is looking: haste, a poor connection, outdoor light, a small keyboard. In practice, this often means: replacing the heavy background video on mobile with a static image, making forms shorter and offering secondary information in a collapsible format.

UX: the experience behind the design

Good UX feels natural. That rarely comes from originality and almost always from recognisability.

• Predictability. Elements are in fixed places and behave the same every time.
• Feedback. Every action gives a reaction: a button that responds, a confirmation after sending, a clear error message at the field where it went wrong.
• Few choices per moment. Two clear options work better than seven.
• Scannability. People don't read, they scan. Subheadings, short paragraphs and lists do the work.

Forms: where conversion often leaks away

Forms are the place where good intentions perish. What helps:

• ask only what you truly need
• labels above the field, not just as a placeholder
• validate while filling in and report errors at the field itself
• make it clear what happens next and when someone will hear back
• use the correct keyboard type on mobile for email, phone and numbers

Accessibility: a standard, not an extra layer

Designing accessibly means that your site works for people with a visual, motor, auditory or cognitive impairment. That is not a niche: it concerns a significant part of every target group, and temporary impairments (a broken arm, bright sunlight, a loud environment) are also included.

In Europe, accessibility is also increasingly becoming a requirement. But the most important reason to do it well is that it works more pleasantly for everyone.

The practical basis (WCAG in plain language)

• Contrast. Minimum 4.5:1 for normal text and 3:1 for large text and interface elements.
• Heading structure. One H1 per page, then neatly H2 and H3 in logical order. Don't choose a heading based on size, but on meaning.
• Keyboard. Everything accessible with Tab, in a logical order, with a clearly visible focus ring.
• Alt texts. Describe what can be seen; decorative imagery gets an empty alt attribute.
• Labels. Every form field has a linked label.
• Not just colour. Use an icon or text in addition to colour to convey meaning.
• Movement. Respect the system setting for reduced animation and don't let videos start automatically with sound.
• Zoom. The site remains usable at 200% zoom.

Testing without special tools

Much can be checked with what you already have. Navigate once entirely with the keyboard. Set the zoom to 200%. View the site in bright light on your phone. Read the page only by headings. Let someone who doesn't know the site perform one task without explanation. After that, automated checks such as Lighthouse or axe are a useful addition — not a replacement.

Speed is part of the experience

A site that loads slowly is less accessible for everyone. What has the most effect:

• compress imagery and provide it at the right size
• limit fonts to what you use and load with a matching fallback
• load third-party scripts only when they are needed
• reserve space for everything that loads later

Measure with real data from the field, not just in a lab test. The experience of visitors on an average phone is the norm.

Frequently asked questions

What is the difference between responsive and adaptive design?

Responsive design adapts the layout fluidly to the screen width. Adaptive design also looks at context, such as device or connection, and sometimes delivers a different implementation. Responsive is the basis; adaptive choices are a refinement for situations that differ significantly.

Is accessibility expensive to add afterwards?

Repairing afterwards always costs more than including it beforehand. If you include contrast, heading structure, keyboard usage and labels from the design phase, it is hardly any extra work and every visitor benefits.

How many breakpoints do you need?

Usually three or four. Add one when the layout becomes unpleasant, not because a new device exists. Fewer breakpoints mean less maintenance and a more consistent result.