Marc very kindly took loads of pictures at dConstruct on Friday—lovely!
Monday, September 12th, 2022
Tuesday, April 12th, 2022
Addy takes a deep dive into making sure your images are performant. There’s a lot to cover here—that’s why I ended up splitting it in two for the responsive design course: one module on responsive images and one on the
Friday, February 11th, 2022
To mark the start of the Dark Skies Festival today, here are some fantastic photographics taken not that far from Brighton.
Saturday, December 11th, 2021
More writing on web.dev
Last month I wrote about writing on web.dev. At that time, the first five parts of a fourteen-part course on responsive design had been published. I’m pleased to say that the next five parts are now available. They are:
It wasn’t planned, but these five modules feel like they belong together. The first five modules were concerned with layout tools—media queries, flexbox, grid, and even container queries. The latest five modules are about the individual elements of design—type, colour, and images. But those elements are examined through the lens of responsiveness; responsive typography with
clamp, responsive colour with
prefers-color-scheme, and responsive images with
The final five modules should be available later this month. In the mean time, I hope you like the first ten modules.
Tuesday, October 6th, 2020
Match up images that have been posted in pairs to Twitter with the caption “same energy”. This is more fun and addictive than it has any right to be.
Thursday, August 20th, 2020
The latest edition in this wonderful series of science-fictional typography has some truly twisty turbolift tangents.
Tuesday, July 7th, 2020
Tuesday, June 23rd, 2020
This is a very nifty use of CSS gradients!
Thursday, June 11th, 2020
I wrote a while back about one of my favourite photographs but this might just give it a run for its money.
It was only near the end of the 19th century that shutter speeds improved, as did emulsions, meaning that spontaneous moments could be captured. Still, smiling was not part of many cultures. It could be seen as unseemly or undignified, and many people rarely sat for photos anyway.
Friday, May 29th, 2020
Chris has put together one of his indispensable deep dives, this time into responsive images. I can see myself referring back to this when I need to be reminded of the syntax of
Friday, May 1st, 2020
Some great practical examples of progressive enhancement on one website:
- using grid layout in CSS,
- using the
pictureelement to provide
webpimages in HTML.
All of those enhancements work great in modern browsers, but the underlying functionality is still available to a browser like Opera Mini on a feature phone.
Friday, April 3rd, 2020
A nice succint explanation of using the
sizes attributes on the
img element—remember, you probably don’t need
source elements if your use case is swapping out different sized versions of the same image.
One caveat thought: you do need to know the dimensions of the images. If you’re dealing with unknown or user-generated photos, that can be an issue.
Thursday, March 12th, 2020
Sunday, November 17th, 2019
Tuesday, November 12th, 2019
The Web is smothering in useless images. These clichéd, stock images communicate absolutely nothing of value, interest or use. They are one of the worst forms of digital pollution because they take up space on the page, forcing more useful content out of sight. They also slow down the site’s ability to download quickly.
Friday, August 23rd, 2019
Wednesday, May 29th, 2019
Here’s a clever tiny lesson from Dave and Brad: you can use
prefers-reduced-motion in the
media attribute of the
source element inside
Sunday, May 12th, 2019
Today was a good day …and here are the very good photos.
Tuesday, April 9th, 2019
Stylish! Retro! Sciency!
Thursday, March 7th, 2019
There’s something deliciously appropriate about using a painting cloning service to clone a photograph of some cloned dogs.
“Did you just order an oil painting of Barbra Streisand’s dogs?” is the most Simon and Natalie thing ever.
Although this comes close: