Articles Page 9

Most of the time when people refer to responsive images, they are referring to inline images, not CSS images. This is because before <picture> and srcset there were no good solutions for inline responsive images. When it comes to CSS… More

Late spring. We are now officially entering the marvelous season in Portland. That means gorgeous weather and cheerful citizens from now well into October. This part of the year is why everyone wants to be here. Let’s forget about the… More

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 time for the fun stuff!… More

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 in particular—is designed to make… More

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: See… More

For the last two years, I’ve devoured the podcasts from Responsive Day Out—the conference that Jeremy Keith and Clearleft put on across the pond in Brighton. I’ve encouraged anyone who would listen to subscribe to the… More

In December 2007, Lyza, Aileen, John and I decided to start Mobile Portland so we would have place to talk about mobile. After eight years, Mobile Portland is coming to an end. Tonight is the final meeting. Over the… More

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 begins downloading images. Now, it… More

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 descriptors The syntax for width… More

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. Resolution switching uses srcset As… More