Responsive images have been, and are, one of the hardest problems in responsive Web design right now. Until browser vendors give us a native solution , we have to think on the fly and come up with our own solutions. “Retina” images are especially a challenge because if you have sized your layout with ems or percentages (as you should!), then you cannot be sure of the exact pixel dimensions of each image being displayed. In this article, we’ll look at one solution to the problem that we implemented on our portfolio website at Etch , where you can see an early working version in the wild. Requirements We used a content-first approach on Etch. We knew we wanted to use a lot of images to quickly convey the atmosphere of the company. These would be accompanied by small snippets, or “soundbites,” of text. The next decision was on image sizes and aspect ratios
↧
