In the past few weeks we've been talking about designing without pixels - moving past a fixed-width, single device canvas into...not the future, the present, where different devices and resolutions are everywhere.
Today we'll start getting into the nuts and bolts of designing sites and applications where pixels aren't the primary concern. This may sound unintuitive...after all, images are just pixels. We'll take a look at why that doesn't really matter (and what to do when it does).
When to Use Images
When you're dealing with a responsive design you have to be more careful about when and how you use images. There are a few things to consider:
- Images placed directly on the page, in almost all cases, need to be able to scale horizontally and vertically.
- Images used as the background of an element may be cropped or hidden as the element changes size to accommodate a smaller screen size.
- You will probably not know what size an image actually is on the screen.
Let's talk about that last one for a second. If you use a grid system (and we suggest that you do) for a fluid, responsive design you'll be dealing with columns with percentage widths. In any case where you use less than the entire row (breaking the page up into horizontal columns) your columns will have an odd and sometimes uneven pixel width.
This is a rounding issue, and it's well documented (you can check out this Quora thread for some discussion on it). Simply put, browsers handle displaying subpixels differently.
If a box is 23% of 620px it's 142.6px wide. Computers can't really show less than a pixel, so is it 142px wide or 143px? In Webkit, it's 142px, every time. In Firefox, it's 142px, then 143px for the next stacked element, then 142px again, etc.
Notice the way Chrome and Firefox handle grids. The red shows the background of a row, so you can see how Chrome's rows don't end evenly.
You might look at a percent based grid and see that in Firefox your careful calculations mean the row is the right width every time, and you'll think 'well, Firefox is obviously the correct one.' Not so fast: now your columns won't be the same size. Is it better to have two equally defined columns be the same actual size, or to have them add up neatly to a row? Good question. Using percentages is tricky, and there's a lot of edge cases and strangeness that return us to this point: you likely won't know what size images you place really are.
Width: 100%
Now that we got that out of the way, let's talk about the simplest thing to do with images in a pixel-less design. Setting your images to 100% width means that they'll expand to fill the size (and corresponding height) of whatever element you place them in. This is ideal if you're using a grid system - you can use the grid to set your image widths, and that will make sure they stay the right size no matter what size the screen is.
Each of these images are 100% width, controlled by the grid
Check out this example, a site for ZURBsoapbox, a speaker series we host here at ZURB. We wanted a site that showed the full roster (and past podcasts and talks) of everyone who has spoken, as well as who was coming up, and we wanted it to have a mobile component as well.
Try scaling it down - you'll notice that the grid shrinks, and shrinks the grid of images below in turn. The image on top however is cropped, because it's a background image: its size won't be affected. By using a grid we don't have to do anything to make these images behave, they act as intended without any manipulation on our part.
Size and Optimization
There are some pitfalls to handling images in a responsive design on the front end alone. The images on ZURBsoapbox aren't huge, but they're not tiny either. On a poor cellular connection it could take a while for a smartphone to load the page.
Here's a few tips for images that everyone can use:
- Don't use an image too small for the displayed space on whatever device. Pixelated images are no fun.
- Optimize your images! Backgrounds don't need to be 100% quality JPGs. If maximum quality is what you're looking for try out PNGs, which are zipped as part of their file format. If you have an image with a lot of sequential pixels of the same color, or very few color, GIFs will be pretty small. Be smart.
- Avoid using images if you can. They're another request (which takes time) and they'll almost always be larger than a text CSS declaration. CSS has a ton of neat tricks to help you avoid using images (for buttons, shadows, modals, gradients, reflections, the works).
These tips can help you better design for arbitrary devices and constraints, but maybe that's not enough. In that case, consider these solutions:
- Use the back-end of your site or app to serve another site to mobile devices. You'll have to detect for an ever-changing set of devices and screen sizes, and you'll sink a lot of time into creating another site, but this solution is tested and can produce really exceptional mobile experiences. This isn't the cheap or easy way, but it's viable.
- Try out Filament Group's Responsive Images javascript plugin. This clever trick has you load up one set of images (the mobile images) first, and then flashes in the full size images if javascript detects a screen better suited to full res. It's not ideal: users might see a flash of low res, then hi-res images, but this does allow you to serve two sets of images without a separate site.
The Tip of the Iceberg
We'll be talking a lot about building responsive sites in the coming weeks as we build up to some fun things we're cooking up to release. Images are just one piece of the puzzle, but once you start thinking about how to use them (and the other elements we'll be discussing) we think you'll really dig designing without pixels.