FOLLOW OUR BLOG
- April 2014
- February 2014
- January 2014
- November 2013
- October 2013
- September 2013
- August 2013
- June 2013
- May 2013
- April 2013
- March 2013
- February 2013
- January 2013
- December 2012
- November 2012
- October 2012
- September 2012
- August 2012
- June 2012
- May 2012
- April 2012
- March 2012
- February 2012
- January 2012
- December 2011
- November 2011
- October 2011
- September 2011
- August 2011
- July 2011
- June 2011
- May 2011
- April 2011
- March 2011
- February 2011
- January 2011
- December 2010
- November 2010
- October 2010
- September 2010
- July 2010
- June 2010
- April 2010
- October 2009
- May 2009
- April 2009
- March 2009
- February 2009
- July 2007
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:
|desktop/laptop/normal computer screen||72 dpi*|
|standard iPhone||136 ppi|
|retina iPhone||362 ppi|
|standard iPad||132 ppi|
|retina iPad||264 ppi|
|Galaxy Tab 10.1||149 ppi|
|Droid X||228 ppi|
* DPI is dots per inch, and old print term.
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:
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.
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.