Digital Lexicon Hub

An approach that adapts web layouts and content to different viewport sizes, devices and user settings using flexible design techniques.

Most B2B research now starts on phones as well as desktops, and a single responsive codebase serves every screen size at lower maintenance cost than separate mobile sites, while supporting Google's mobile-first indexing.

A services site switches a fixed 1,200 px layout to a CSS Grid that stacks into one column below 48rem, adds the viewport meta tag and srcset images, and eliminates horizontal scrolling on phone-width screens.

Responsive layout alone does not make a site fast or usable on mobile: heavy images, scripts and desktop-first content can still hurt load time and tap usability. Breakpoints tied to specific devices age quickly.

A responsive page sets the viewport meta tag to width=device-width so mobile browsers do not render at a default 980 px width. Layouts use fluid units with Flexbox or CSS Grid, media queries change styles at content-driven breakpoints, and images use max-width: 100%, srcset and sizes so the browser picks a suitable file. A mobile-first approach writes base styles for small screens and adds rules for wider ones.