Designing for the Hi-Res iPad Retina Display

I’ll admit, when I first heard the new retina display iPad 3 was coming out from Apple, I let out a little mumble something to the effect of, “nice, yet another device to responsively adapt and plan for.”

Once my brief complaining spell was over, I came to realize that this was great news for end users and a blessing in disguise for all of us. After all, with the new retina display, our websites and their content will only be brighter, crisper, cleaner looking and easier to read. In fact, Gary Heiting, an optometrist and associate editor of the site All About Vision, says the new retina display can ease the inherent strain that goes hand-in-hand with staring at a glowing screen, sometimes for hours on end.

For us designers and front-end developers, the question becomes how can we ensure that our content is properly formatted to take advantage of the mind blowing 2048-by-1536 resolution, which has four times the number of pixels in iPad 2 and a million more than an HDTV!

By following some of the below tried and true best practices, you too can can ensure your content is easily readable on any device, no matter the resolution of the display. Here’s how:

 

Use web fonts

Using the @font-face feature enables us to use almost any font without resorting to image or flash based hacks to get that pixel perfect level of control and detail. This also saves a whole lotta’ bandwidth for mobile devices, and it makes Google really happy too!

You can access fonts from resources like Google Web Fonts for FREE, or you can also utilize a ginormous collection of web fonts from resources like TypeKit. If you’re like us, you’ll find yourself using both!

By using web fonts in your design, you will always ensure your text is crisp, lightweight and readable on any device.

 

Use CSS Media Queries to serve up adaptive images

While media queries are intended for design presentation, and not necessarily optimization, they are still a great start to ensure your devices are getting the correctly sized content. Utilizing media queries allows you to target hi-resolution specific devices like the retina display iPad or iPhone while serving up lo-resolution content to Android, Blackberry, and other standard mobile devices. While using CSS @media selectors to scale down an image for the targeted device, be careful to make sure you’re not only scaling down the image but that you are downloading the right sized image as well.

One way to ensure that you are doing this right is by using Adaptive Images. “Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embeded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.”

Adaptive images are important “because your site is being increasingly viewed on smaller, slower, low bandwidth devices.”

 

Use one CSS Image Sprite to rule them all

If you have ever seen the CSS technique where the “on” and “off” states of a button are contained within the same image and are activated by shifting the background-position, then you’ve seen a CSS Image Sprite. Sprites allow you to take a lot of smaller images and combine them into one larger image.

Why is this important? Glad you asked. You might be led to think that smaller images would load faster than one large image, but that isn’t necessarily the case. Each one of those small images generates a separate HTTP request to the server, which increases page load time or its efficiency. By combining your small images into one larger image, it will actually save the time it takes to fetch multiple images. And now with the newer hi-res retina display (and others to follow), it will be more important than ever to decrease the page load time on tablet devices that are limited in bandwidth compared to high speed land based connections.

 

Even if you’re having to code faster than you ever have before, don’t slack on these small steps that can be introduced into your design and coding techniques over time. Following some of these best practices can ensure your site gets started on the right foot every time.