Introducing Leveller: Please Avoid Using It
This happens to me over and over: I have a multi-column grid of tiles, each with varying heights. This means the bottom of certain rows can appear jagged and difficult to scan visually:…
Standards, Page 6
Responsive Images 101, Part 5: Sizes
When we last left our intrepid web developers, they had discovered the power of srcset width descriptors, only to be faced with a new challenge—the browser only knows the size of the viewport when it…
Responsive Images 101, Part 4: Srcset Width Descriptors
In Part 3, we looked at display density descriptors and concluded that they are great for fixed width images, but are insufficient for flexible images. Flexible images is where srcset’s width descriptors shine. Width…
Responsive Images 101, Part 3: Srcset Display Density
Ever since Apple launched a retina display on the iPhone 4, web designers have been looking for a way to handle high density displays. That is where srcset and its display density descriptors come in.
Responsive Images 101, Part 2: Img Required
One of the main reasons why we need solutions for responsive images is because the <img> element is insufficient. It only has one src and we need multiple sources. Given that fact, it may be…
The Forgotten Responsive Images Spec: image-set()
Now that responsive images have landed in Chrome and Opera, I’ve started working on a flowchart to help people decide how to use these new features. This work led me to wonder what…
Don’t use <picture> (most of the time)
Browser support for the picture specification is landing and as Marcos Cáceres said, it is time to “go forth and <picture> all the things!” Except you shouldn’t. You shouldn’t <picture> all the things.
Two pretty-good techniques for styling tricky form elements
Confession time: For most of my career, I despised form elements. Checkboxes, radios, selects and file inputs seemed to gleefully defy what little control I expected from an HTML element. Their penchant for idiosyncracy drove…
Fantastic intro to new srcset and sizes
I normally don’t write a post simply to link to another article, but if you’ve enjoyed the things I’ve written about responsive images, you really should read what Eric Portis wrote about Srcset and…
Common Patterns in Styleguides, Boilerplates and Pattern Libraries
It’s hard to believe it’s been almost three years since the publication of Ethan Marcotte’s seminal Responsive Web Design article on A List Apart. The ideas and techniques described therein blew our minds while forcing us to…