Responsive Web Design, Page 7

Phew. We made it! We’ve come to the end of the Responsive Images 101 series. Before we part ways with this series, I want to pass along some tips, resources and final thoughts on where…

I’ve dreaded writing this installment of the Responsive Images 101 series. Selecting image breakpoints is something everyone will face, and frankly, I have no good answers for you. But sooner or later, we will all…

Although my favorite projects will always be those that allow us to re-evaluate a user experience from the ground up, sometimes that isn’t realistic. That’s where Responsive Retrofitting comes in: The process of making…

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…

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…

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

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…

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…

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.