Responsive Design Image Gotcha
By Keir Whitaker @keirwhitaker
17 August 2010 | Category: Uncategorized
As Ryan mentioned last week we are in the process of redesigning and developing Think Vitamin. One of the things we are keen to integrate into the design is "responsiveness".
Apart from being all the rage and a hot topic it makes a lot of sense, let's make one site and adapt it for the device and resolution.
The Problem
Mike's been hard at work on the design and has moved onto the "build" phase. Part of this process is "playing" around with the relevant media queries to see the effect they have in the iPhone simulator. One thing we couldn't quite understand was the effect on images, they all appeared much smaller than we had expected given their size and the width in pixels of the iPhone screen.
After reading through the CSS of a number of sites including 8faces and HicksDesign we came upon the solution. It's all about the meta!
The Solution
In order for your images (and text) to maintain their “real” size all you need to do is add in a meta tag (below) to your site’s head section.
<meta name="viewport" content="width=device-width; initial-scale=1.0">
Effectively this is telling Safari (these meta tags are Apple specific) to set the scale to 1, in other words render everything at the original/native size.
What this means is that an image with a width of 280px will be rendered as 280px wide and will therefore take up the majority of the width of the iPhone screen in portrait mode. Without this setting the default is to shrink the image proportionally.
Here’s a visual comparison using Elliot’s 8faces logo (I hope he doesn’t mind). For reference this page is being rendered using a media query to target the device, in this case the iPhone.
No initial-scale set
initial-scale set to 1.0
As you can see from the screen grabs both the image and the text are scaled up. This may or may not be the desired end result depending on your needs.
Learning from Others
Here’s the meta tags from both 8faces and the dConstruct 2010 site for reference. Notice that they both use other settings, more info on these viewport values can be found on the Safari HTML reference site.
8faces.com
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
dConstruct 2010
<meta name="viewport" content="width=450">
Obvious When you Know
We scratched our heads on this for a while so we thought it would be worth a quick write up. It’s obvious when you know but we hope that it comes in handy if you haven’t ventured into the world of “responsive design” as yet.
Follow @thinkvitamin on Twitter Please check out Treehouse
