Browse

A way of building websites that prepares several separate fixed layouts and serves whichever one best fits the visitor's device or screen size, rather than fluidly stretching a single layout.

In responsive images, deliberately showing a differently cropped or composed picture on different screens, for example a tight close-up on a phone but a wide scene on desktop, so the image still reads well at each size.

A specific screen width at which a website's layout changes, for example switching from a three-column desktop view to a single stacked column on a phone.

A newer styling rule that changes a component's layout based on the size of the box it sits in, rather than the size of the whole screen, so the same card can adapt whether it is in a wide or narrow spot.

The number of a screen's tiny physical dots packed into each layout pixel a designer works with. On high-resolution 'retina' screens this ratio is 2 or 3, so images need extra detail to stay sharp.

A page layout whose columns and spacing are defined in flexible percentages rather than fixed pixel widths, so everything stretches or shrinks smoothly as the screen changes size.

Text that smoothly scales its size in step with the screen or window width, instead of jumping between a few fixed sizes at set breakpoints.

Designing so that when a device or browser cannot support a fancy feature, the page still works in a simpler, usable form instead of breaking.

A modern layout approach where elements size and wrap themselves based on their own content and the space available, letting the page adapt naturally with far fewer fixed breakpoints.

A rule in a website's styling code that applies different formatting depending on the device, such as screen width, orientation, or whether the user prefers dark mode.

A design method that starts by designing for the smallest phone screen and only then adds layout and features for larger screens, ensuring the core experience works everywhere.

A menu that stays hidden just off the edge of the screen and slides into view when tapped, a common way to fit navigation on small phone screens.

A strategy of building the basic, working content first so it functions on any device or browser, then layering on richer features for the ones that can handle them.

When a page's content rearranges to fit a smaller or zoomed-in screen so everything stays readable in a single column, without the user having to scroll sideways.

Images set up to deliver an appropriately sized version for each device, so phones download a small file and large screens get a sharp one, saving data and load time.

An approach to building websites so a single layout automatically rearranges and resizes itself to look good on any screen, from a phone to a wide desktop monitor.

The visible area of a web page on a given device's screen. On phones a special setting tells the browser to use the device's real width so pages are not shrunk down to an unreadable size.

A small piece of HTML that tells a phone or tablet browser how wide to treat the page and how much to zoom, so a responsive layout appears at the correct size instead of a shrunken desktop view.