Responsive Design Links + Pixel Density vs Pixel Dimensions

This Focus Topic: Responsive Design post centers on some links we found helpful and a test we did to wrap our head around resolutions for desktop screens, iPhones and iPads.

Responsive Design theory links:

• A Better Photoshop Grid for Responsive Design
• Responsive Images: How they Almost Worked and What We Need
• Improve Responsive Designs & Re-Use Images With CSS3′s Background-Size Property
• Inspiration: Fluid & Responsive Design
• Responsive Web Design, Most Complete Guide
• Multi-Device Layout Patterns
• Device-Agnostic Approach To Responsive Web Design
• Deciding what Responsive Breakpoints to use

Testing out resolution — what does it all mean?

Now, before anyone gets up in arms with my examples, please understand that we are designing and developing in a device-agnostic way and are basing our media queries on size mostly (with a consideration for the switch between tablet and desktop, i.e. finger tip input and mouse input).

If I’m wrong about anything I’ve said here, please [politely] let me know in the comments or via another contact method. This stuff is new to me, and it’s actually new to everyone, so we’re all figuring it out.

I was asking questions like:

Can you create higher resolution images on the web so they look better in a retina iPhone or a retina iPad?

The short answer is yes, you can. The long answer gets more complex.

This is something you want to be careful with — using media queries and fancy code to choose which image to display so you aren’t bogging down standard smartphones and desktop screens with HUGE IMAGES.

First off, let’s set down some concepts and numbers:

• There is a difference between dimension — which is measured in pixels — and density which is measured in pixels per inch (ppi).
• You have to combine these two numbers to hit the target output of an image.
• I use Photoshop to work up app / web designs — so if I start with a 2048 x 1536 at 264 ppi Photoshop file I can faithfully use this to create retina iPad apps.
• If I am doing non-retina apps I cut the file in half – both in dimension and ppi to be 1024 x 768 at 132 ppi.
• If I have the same thing going to a webpage I can change the ppi in Photoshop which will refigure my dimensions to be 559 x 419 at 72 ppi
• There is more to know about scaling between sizes, that is for another time though. You can start with this article.
• Some baselines are:

* DPI is dots per inch, and old print term.

You can see a whole bunch more pixel density numbers here ›

iOS Cheat Sheet measurements are here ›

One reason the new devices are a higher density is because you hold them closer to your face, so they need to be cleaner. A billboard resolution when viewed from the same distance as a magazine won’t hold up. Standing as close to your TV as you do to your phone just won’t work for resolutions.

The thing we are actually trying to learn:

Devices with a higher density mash more pixels into an inch. 

So you can’t actually have a PNG file that is 500 px by 500 px at 72 dpi and another one that is 500 px by 500 px at 264 dpi. It just doesn’t work that way. For one thing, you can spool out those images — but when you open them back up in Photoshop you’ll just have several 500 px by 500 px images that are all 72 dpi. I know this because I tried. Maybe it’s the way Photoshop handles it, maybe it’s that PNGs are always 72 dpi, I’m not clear on the reason.

But when you go back to the fact that a higher DENSITY means that more pixels are mashed into a smaller space you want your images to be:

• 72 dpi = 500 px by 500 px
• 132 ppi = 917 px by 917 px
• 264 ppi = 1833 px by 1833 px

How did I figure out the dimensions? Easy, I just changed the ppi setting in Photoshop and let it handle the dimensions.

Then I dropped the three images onto an HTML page, but then instead of letting the images be three different sizes I made them all 500 px by 500 px and this is what you get:

http://www.sawayaconsulting.com/resolutiontest/

On a computer screen you won’t see the difference, on an iPhone you can start to see it. On a new retina iPad you can see it more.

Conclusion

There are so many concepts to understand when building responsive design. How you want to structure you content breaks. How you want them to flow and where the cut off pieces live. What kind of anomalies are you going to encounter in a the normal course of web design – Safari, Firefox, IE – and what added complexity do you get with Safari Mobile and Android.

This article confuses the lines a bit between straight up responsive, device agnostic design and mobile resolutions. This is something that will make more sense in future posts, but this is a good basis to get a few things understood.

This work includes the photo “Pixel-Spatz,” available under a Creative Commons Attribution license, © _Tasmo.