The State Of Responsive Web Design on Smashing Mobile

A comprehensive look at the current state of things in the world of responsive design, with a look to possible future APIs.

The State Of Responsive Web Design on Smashing Mobile

Tagged with

Related links

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!

Tagged with

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.

Tagged with

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!

Tagged with

Min-Max-Value Interpolation

Here’s a really nice little tool inspired by Utopia for generating one-off clamp() values for fluid type or spacing.

Tagged with

Tim Brown: CSS forces

Some interesting thoughts from Tim here. What if CSS could “displace” design decisions from one area to another?

For example, a flexible line spacing value in one container could influence margins that surround the text block. That change in spaciousness may mean that nearby headings need size or spacing adjustments to stay feeling connected.

This feels like the complete opposite way that most people approach design systems—modular, componentised, and discrete—but very in-line with the way that CSS has been designed—interconnected, relational and cascading.

Tagged with

Related posts

Making the Patterns Day website

The joy of getting hands-on with HTML and CSS.

Even more writing on web.dev

Five more articles on modern responsive design to close out the course.

More writing on web.dev

Another five articles on modern responsive web design.

Told you so

In which I permit myself a moment to gloat about liquid layouts.

Iconic imagery

Responsive images, compressive images, and icon fonts. Take your pick.