Veltos.Tech

Design

Responsive design

Also known as: responsive layout, mobile-friendly design, fluid layout

Definition

Responsive design is an approach where a single layout reorganises itself to the viewport: grid, typography and block order change at defined breakpoints instead of sending the visitor to a separate mobile version on its own subdomain.

The mechanics rest on three things: a flexible grid in relative units, images that stay inside their container and load at an appropriate resolution, and media queries that switch the layout at chosen widths. Current practice is mobile first: design the narrowest screen first, where priorities have to be set ruthlessly, then add what wider screens allow. The reverse order tends to end in a mobile version with the extras cut out, and half the meaning leaves with them.

The commercial weight is direct. In Russia mobile traffic exceeds half of visits in most niches and runs higher in retail categories and in services people look up on the spot. Google indexes sites by their mobile version and Yandex accounts for mobile usability in ranking. In practice that means conversion and positions are decided on the narrow screen: if the request form there takes three scrolls and a few mis-taps, desktop elegance saves nothing.

The same mistakes repeat from project to project: tap targets that are small and crowded together, tables and price lists that run off the edge on a phone, popups that cover the content with the close button off screen, sticky headers that eat a third of the height, and heavy background images served to phones at desktop resolution. A separate item is testing only in browser emulation: a real device reveals load speed, thumb accuracy and on-screen keyboard behaviour that the emulator hides.

Related terms

Related services

Read more

Need this done, not just defined?

We do this work, not only write about it. Describe the task and we will scope it and send a staged estimate.