On 7 February I went to Front End North – a great one day conference held at iconic theatre (and beloved Supercool client), the Crucible in Sheffield.

A highlight of the day was The Evolution of Responsive Design by Rachel Andrew.

Rachel gave us a great history lesson, a strong nudge to do better in the future, and, randomly, some useful tips on the differences between flex and grid column calculations.

Some of it made me feel my age as I was writing responsive layouts before media queries existed (we called them liquid and elastic layouts, remember those?!).

The kinds of code approaches discussed didn't all translate well to agency work; where we're producing layouts from pixel-sized designs, and woe betide you if you reflow! But I still found so many useful ideas and reminders.

Media queries

These aren't just about screen sizes, but can be about interaction and presentation:

Can I use: @media (pointer: fine)

This means assigning rules and values according to whether the user has a pointer fine (mouse), pointer coarse (finger), or hover (to potentially distinguish between a touch user and a mouse user).

There are some tricky unintended consequences that are easy to imagine – what about when I use a pen with my phone? But still, this is actually supported widely … except IE11. mozilla/...docs/.../@media/pointer

@page media

This is a little like the old print stylesheets but so much more sophisticated.

With careful thought, we could build some brochure and programme printing from Craft CMS with a web interface. I'm not convinced it's good enough for the kinds of high spec print layout our clients are working with, but I'd love to be proven wrong!

Listening for user preferences

Prefers Reduced Motion

I would really like to start turning off carousels, slide in menu animations, etc, for people with “prefers reduced motion” settings on their browser, as I know carousels can be a horrible user experience for some people.

Prefers Color Scheme

Dark mode switching. We have done some dev work already on this at Supercool, so I’m inspired to add this to my current build. It’s going in! No one can stop me!

Prefers Reduced Data

Prefers reduced data may well be coming soon. It's currently still in draft at w3c. I am looking forward to this one. We’ll most likely be turning off images for this user setting - to let a user on a shonky connection - perhaps on the train on the way to a venue - get around the site faster. Chrome has signalled its future adoption: Chromestatus.

Slides from Rachel's talk: https://noti.st/rachelandrew/4...

Next, Léonie Watson blew everyone’s minds by taking us through the entire history of conversational interfaces – covering hardware, voice production, text to speech and more. A post on this coming soon …

(Side note: seating at The Crucible is comfy, with great visibility, and nice starry lighting overhead.)