Published in 2013

Responsive Design - The Basics

With Apple's latest release of the MacBook Pro with Retina display, it's more than apparent that responsive design is in full throttle. Very soon Windows-based laptops, ultrabooks, and tablets will also follow suit with the help of Intel's Ivy Bridge. Therefore, responsive design is no longer a bonus design skill set, it's a necessity for any designer who wants to remain current and design device-independent layouts.

A pixel is simply no longer a pixel

On any device with Retina display, a pixel is no longer a pixel, not one-to-one. Retina displays translate pixels or points to whatever the device dpi demands, usually something over 300dpi. 

On iPhone 4, a point is two pixels; draw a one-point line, and it shows up two pixels wide. So: just specify your measurements in points for all devices, and iOS automatically draws everything to the right proportion on the screen. Text and images remain the same physical size on both old and new phones. That goes for bitmap images in legacy apps, too; iOS 4 blows ‘em up, automatically pixel-doubling them to adapt to the new phone’s resolution.

Of course, pixel-doubled images don’t take advantage of the gloriously crisp display on the new phone. That’s where your extra legwork comes in: to add high-resolution images to your app, you have to include a second set of all your graphic files. For every image in your app, add a second version that’s twice the size, adding @2x to the name. For a low-resolution image named image.png, for example, you would add a second file named image@2x.png. The new image will be picked up automatically by iPhone 4. Everywhere your code requests image.png (or even just plain old image), image@2x.png will be used instead.

All of this leads us to consider yet another part of your responsive strategy, progressive enhancement or graceful degradation. A topic for another post.

Practical Design Suggestions

There are a few things you can do to optimize for retina displays, avoid the pixelated images and even make your layouts responsive-friendly.

• Adobe Illustrator
  Do yourself a favor and setup your mobile and web layouts in Illustrator

• HTML/CSS
  Export your image at 200% and use code to resize and display them at 50% of your image's proposed dimensions

• Javascript
  You can pinpoint an image and half the height and width

• SVG
  This is what I believe will become a standard in the new future so embrace it