sparkline

As you generate and tweak your type scale, Utopia will now warn you if any steps fail WCAG SC 1.4.4, and tell you between which viewports the problem lies.

Responsive typography and its role in design systems | Clagnut by Richard Rutter

Okay, if you weren’t already excited for Patterns Day, get a load of what Rich is going to be talking about!

You’ve got your ticket, right?

Extending Responsive Video with HTML Web Components | Scott Jehl, Web Designer/Developer

Scott gives a thorough step-by-step walkthrough of building an HTML web component, in this case for responsive video:

In this post, I’m going to talk briefly about responsive video, but most of the post will be about using HTML web components to extend native video behavior in very helpful ways. But even if you’re not particularly interested in video development, stick around as I’ll demonstrate how to build an HTML Web Component to progressively enhance anything you need.

Sizes=”auto” pretty much requires width and height attributes — ericportis.com

Huh! I did not know this. Good to know!

Getting started with CSS container queries | MDN Blog

Michelle has written a detailed practical guide to container queries here.

Clamp calculator | Utopia

Oh, this is a nice addition to the Utopia set of tools: when you don’t need a full-on type scale but you still want to figure out fluid clamp() values, the clamp calculator has you covered.

It’s got permalinks too!

zachleat/table-saw: A small web component for responsive `table` elements.

Now, this is how you design a web component. It’s a progressive enhancement.

Wrap your existing table element inside table-saw and it will behave responsively. If anything goes wrong with the JavaScript, the fallback is the regular table that’s already in your markup.

I just wish the installation didn’t assume that you’re using npm …it’s not really “zero dependency” if it depends on that.

The ideal viewport doesn’t exist

Some lovely scroll-driven animations illustrate this great little microsite.

There’s something very pleasy about the chunky design that harkens back to the Zeldmanesque early web.

On Container Queries, Responsive Images, and JPEG-XL – Cloud Four

Container queries can’t be used in the sizes attribute for responsive images. Here, Jason breaks down why that is (spoiler: it’s the lookahead pre-parser) and segues into a truly long term solution: a “magical” image format.

If you’ve ever thought it felt weird to put media conditions inside the HTML for responsive images, this will resonate.

The Guide To Responsive Design In 2023 and Beyond - Ahmad Shadeed

Instead of thinking about responsive design in terms of media queries, I like to think of responsive design in these categories.

Responsive to the content

Responsive to the viewport

Responsive to the container

Responsive to the user preferences

Learn Images

Mat has written this free course for you all about images on the web. Covering image formats, responsive images, and workflows, this is one to keep on speed dial.

Container Queries and Typography

I feel like we need a name for this era, when CSS started getting real good.

I think this is what I’ve been calling declarative design.

Designing a Utopian layout grid: Working with fluid responsive values in a static design tool. | Utopia

James describes his process for designing fluid grid layouts, which very much involves working with the grain of the web but against the grain of our design tools:

In 2022 our design tools are still based around fixed-size artboards, while we’re trying to design products which scale gracefully to suit any screen.

Building the new Utopia homepage | Trys Mudford

Trys has written up how he made that nifty little resizing widget on the Utopia homepage.

Utopian project kickstarter — Figma

Do you like the ideas behind Utopia? Do you use Figma?

If the answer to both those questions is “yes”, then James has made a very handy Figma community file for you:

This work-in-progress is intended as a starting point for designers to start exploring the Utopia approach, thinking about type and space in fluid scales rather than device-based breakpoints.

Link tags: responsive

517

Printing music with CSS grid

An Interactive Guide to CSS Container Queries

Dao Day 2024 – a regression in the making | Clagnut by Richard Rutter

Making version noir

Retrofitting fluid typography | Clagnut by Richard Rutter

Utopia WCAG warnings | Trys Mudford