A Simple Responsive Exercise
This is a quick example, see links at bottom for more in-depth tutorials.
Here's a simple little responsive page I created… it's one page and optimized for the normal web, retina-display iPhones, and non-retina iPhones / iPod Touches.
www.adoptgromit.com/
When resizing the page on your laptop / desktop, you won't see anything shift around. That's because I'm targeting a device-width of 320px with either a device-pixel-ratio of 1.0 or 2.0 (original iPhone resolution, and retina display resolution).
Setting the Viewport Width Mobile Safari assumes a width of 980px for any website (by default, the browser doesn't know the width of your device's viewport). You need to make sure to include a meta tag that will set your site's width to either 320 or 640 pixels:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Using Media Queries Setting up media queries is actually quite easy. In the example below, we're targeting devices with a max width of 320px (this includes BOTH non-retina and retina iPhones) and a pixel density of 2. This can be a bit confusing at first, I know, but this is how it's done.
@media all and (max-device-width: 320px) and (-webkit-device-pixel-ratio: 2.0) { Â Â Â /* css rules go here */ }Â
Visual Differences In the examples below (click through to see them full size) you can see how I'm adjusting the content's display simply by using some CSS media queries. I'll briefly discuss the variations below these examples.
Variations There aren't any dramatic differences between each variation, and that's the point - to create a page that retains a similar aesthetic between each device (with the exact same functionality). I'm simply tweaking and optimizing the page for mobile devices.
The "profile" pic disappears on mobile devices
The header text shifts around for each mobile resolution
Our contact button moves underneath the header text for mobile
For the non-retina iPhone, our background image is getting quite large so I've shifted the image slightly to the left with background-position.
We lose the background pattern and image borders / drop shadows for the mobile version
Further Optimization In this exercise, I've only targeted the iPhone, but if I wanted to really optimize this for all phones, I would take it a bit further with some additional media queries targeting different device-pixel-ratios and screen widths. iOS has ratios of 1 and 2, but Android has ratios of .075, 1, 1.5, and 2. You can see how this can get a bit complicated - the continuing fragmentation of device resolutions and pixel densities necessitates the need for responsive design.
I've also neglected to load smaller images for our non-retina mobile users (in these examples, the images simply scale down to a max-width of 100% of their parent element). With CSS media queries, you can serve up different images to different devices - enabling you to save bandwidth for your users.
For more about Responsive Design…
Read Ethan Marcotte's book
Read Ethan's original article on A List Apart
Think Vitamin - a beginner's guid to responsive design
Smashing Magazine has a tutorial here
Web Designer Wall has a simple 3-step tutorial
More links welcome, email me at keith[at]meetduo[dot]com
