Link tags: responsive
519
Hyper-responsive web components | Trys Mudford
Trys describes exactly the situation where you really do need to use the Shadow DOM in a web component—as opposed to just sticking to HTML web components—, and that’s when the component is going to be distributed and you have no idea where:
This component needed to be incredibly portable, looking great on any third-party website, in any position, at any viewport, with any amount of content. It had to be a “hyper-responsive” component.
Printing music with CSS grid
Laying out sheet music with CSS grid—sounds extreme until you see it abstracted into a web component.
We need fluid and responsive music rendering for the web!
An Interactive Guide to CSS Container Queries
Another terrific interactive tutorial from Ahmad, this time on container queries.
Dao Day 2024 – a regression in the making | Clagnut by Richard Rutter
The arc of the web is long and bends towards flexibility.
Making version noir
A case study in making a beautiful responsive homepage.
Retrofitting fluid typography | Clagnut by Richard Rutter
Here’s a taste of what Rich will be delivering at Patterns Day on Thursday—can’t wait!
Utopia WCAG warnings | Trys Mudford
Wouldn’t it be great if all web tools gave warnings like this?
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.