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
- Design systemA design system is a set of tokens, components and usage rules that exists simultaneously in the design files and in code, fixing colours, typography, spacing and element states so that a new screen is assembled from existing parts rather than reinvented.
- Core Web VitalsCore Web Vitals are Google’s three page experience metrics: LCP, the render of the largest element, should stay within 2.5 seconds, INP, the response to an interaction, within 200 milliseconds, and CLS, cumulative layout shift, within 0.1.
- PWAA PWA is a website that behaves like an app: it installs to the home screen straight from the browser, works offline through a service worker and can send push notifications, all without going through App Store or Google Play review.
- WireframeA wireframe is a rough screen schematic without colour, typography or imagery: it fixes which blocks exist, their priority and the transitions between screens, so the interface logic is agreed before expensive visual design starts.
- SEOSEO is the work on a site and its surroundings that earns organic positions in Yandex and Google: technical foundation, keyword coverage, content, commercial and behavioural signals and links, with the first durable results arriving after three to six months.
Related services
- UX/UI design for websites and appsWe design interfaces that survive contact with production: research, structure, UI kit and a clean handoff to the developers. Everything lives in Figma as components with real states and real breakpoints, not as a folder of flat mockups. The same process covers landing pages, corporate sites, e-commerce, web apps and mobile.
- Website development, end to endWe build sites that still hold up a year later: from a one-page CMS build to a store or a web application on React and Next.js. One team for design, code, integrations and launch.
- Landing page developmentOne page, one goal: the enquiry. We build the landing around a specific offer and the traffic you plan to send at it, whether that is search ads, paid social, organic or email.
Read more
- A Slow Site Loses Money: Core Web Vitals and ConversionSite speed is not a technical metric, it is a line in the revenue report. Core Web Vitals explained in plain language, how to find the real cause of a slow page, and a fix list sorted by return per hour of work.
- Design Systems: When They Pay Off and When They Are an Expensive ToyMost teams asking for a design system need a component library and naming discipline instead. Where the line sits, how to calculate the payback before you start, and what actually belongs in a minimum viable version.
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.