proomt

Search

Search posts, papers, and topics

Hall of Fame

Hall of FameEthan Marcotte201010 min readintro

Responsive Web Design

Read on alistapart.com

Summary

The article introduces responsive web design, arguing for fluid grids and CSS media queries to adapt layouts across devices. It shows practical code snippets for conditional styling and linearizing layouts on small viewports.

  • Use fluid grids and flexible images instead of fixed widths to create a baseline that scales with the viewport.
  • CSS media queries let you apply styles conditionally based on device features like max-width or resolution.
  • A simple @media block can disable floats and stack major sections when the viewport drops below a threshold (e.g., 600px).
  • Avoid separate subdomains for each device; treat all devices as facets of a single responsive experience.

Web engineers building modern UIs need to master media queries and fluid layouts to support the wide range of devices users have today.

6/10
frontendcsswebresponsive design

Related reading

  1. The Web's Grain

    The essay argues that the web has an inherent “grain” – a natural vertical, fluid layout – and that designers should respect this simplicity rather than forcing complex, fragile designs. It illustrates how side‑by‑side layouts break due to mismatched scaling and warns against over‑engineered sites.

    Hall of Famefrankchimero.com17 min

  2. Can we make default Tailwind a more accessible choice?

    The post examines Tailwind’s default rem‑based breakpoints, showing how they scale with a user’s root‑font‑size and can shift layouts, which helps some users but can break designs. It argues that pixel breakpoints remain a defensible alternative for preserving layout stability while still supporting accessibility.

    Freek Van der Hertenfreek.dev1 min

  3. I still like writing websites by hand

    A personal blog post describing how the author hand‑crafted a single‑page site for a consultant using Astro, a custom CSS halftone background (leveraging `background‑repeat: space`) and a subtle neon glow via stacked box‑shadows. Includes a few concrete CSS snippets and design‑system references but no deep engineering analysis.

    Chen Hui Jingchenhuijing.com4 minHN2

  4. Hints for Computer System Design

    Lampson’s 1983 essay distills practical design hints for computer systems, emphasizing simple, well‑defined interfaces, predictable costs, and separating common‑case from worst‑case paths. The advice, illustrated with examples from Alto, Dorado, and early OSes, remains relevant for modern system architects.

    Hall of Famemicrosoft.com62 minpaper

  6. Release Notes for Safari Technology Preview 251

    Safari Technology Preview 251 introduces new CSS features like `@supports at-rule()` and `object-view-box`, alongside new JavaScript capabilities including `Iterator.prototype.includes()` and WebAssembly Memory64. This release also includes numerous bug fixes across HTML, CSS, and Canvas, and deprecates several non-standard CSS properties.

    WebKitwebkit.org19 minrelease