Responsive Images 101, Part 7: Type
So far we’ve been focused on how to make responsive images more performant. That’s essential, but at the end of the day, we still have the same old image on the page. Now, it is…
Standards, Page 5
Responsive Images 101, Part 6: Picture Element
In Parts 3, 4 and 5, we focused on solutions for resolution switching. Now it is time to look at how to solve for art direction. The picture element—the media attribute…
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:…
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…