Designing for Apple’s Retina Display – iPhone and iPad

In order to survive in this whole web design and internet marketing game, you have to stay ahead of the curve. I think that is what sets me apart from other developers. I’ve consistently been ahead of the game with changes to the Google algorithm. One instance stands out to me specifically because it was such a huge change to the algorithm. About a year ago, I was on a conference call with a potential high-paying SEO client.

He actually did a 3-way call with myself and a competing SEO company. He was asking us both questions, trying to determine where he wanted to spend his money. He knew that Google liked a lot of content on the website so he wanted to create a blog site and outsource article writing to India for a few pennies per article. He wanted to blast out 10,000 blog posts on his site over the course of the next month. I told him this wasn’t a good idea but him and the other SEO guy seemed to think it was great. Eventually, I ended my part in the conversation and said I wasn’t comfortable with what he wanted to do. He went on to hire the other guy and probably paid him lots of money.

By the way, his site also got black-listed from Google within 30 days, once Google dropped their Panda update that de-indexed content farm sites that just pushed out crappy content. If he would have listened to me – listened to Google who hinted at this algorithm change for months – he would be doing just fine today.

With that said, the thing to get ahead on right now is mobile devices. By 2014, mobile devices will overtake desktop computers in volume of searches; specifically iPhones and iPads. Until now, I’ve been able to offer quite a few responsive weapons to these devices including: media queries, fluid layouts, and all sorts of fun javascript hacks.

But the audience keeps showing up on new mobile devices every day. New challenges come with each new mobile device that shows up. The good news is that we don’t have to pay attention to every single new mobile device that comes out, but when when the king of mobile brings something new into play, we listen.

iProductsWith the introduction of the new iPad and including both generations of the iPhone 4, Apple now has millions of devices in our hands, burning our retinas with beautiful, high-density displays. iProduct owners spend hours staring at the graphics you’ve designed on their new toys; but if you haven’t designed those graphics correctly, their blurry appearance can actually cost you web visits, ultimately costing you revenue.

When Apple introduced the iPhone 4 and its Retina Display, they stopped measuring the screen in pixels and started measuring in points. Each point is actually four pixels. The display blows up each pixel 2 times its size so that the physical dimensional size of the graphic stays the same — whether you are looking at it on an iPhone 4s or an iPhone 3gs. This is important because if they hadn’t doubled every pixel, everything would have been too small to see properly. But it also created a new problem, because you know what happens when you start duplicating pixels and enlarging graphics — they get blurry. They get blurry fast.

Some would say, what’s the big deal? I can handle my edges being a little flat. The truth is, you have 1 second to impress your web visitors and for them to decide if they are going to stay on your site or leave. Believe it or not, less than perfect graphics can increase your bounce rate. And, personally, I want my graphics to look as crisp and clean as a new dollar bill. Also, what if in the next year or two that pixel density doubles again? What if it triples?

So what’s the solution?

One option is to use a media query to target these high density devices, creating low resolution and high resolution graphics:

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max–moz-device-pixel-ratio: 2) {
logo {
background: url(images/your-logo@2x.png);
background-size: 130px 40px;

This works well, but it’s a lot of extra work to produce multiple versions of each of your graphics. Ultimately, it would be nice if we had graphics that could scale up and down seamlessly without losing any quality. Raster or pixel-based graphics won’t do this so we would have to use vector-based graphics.

One of the newer ways to do this is to use an icon font. There are a lot of benefits to using icon fonts for graphics: Infinitely scalable, resolution independent, supported by all browsers, easily changed with css, small file sizes.

Here’s how it’s done:
1. Upload your icon font file to your web server
2. Reference the font file in your css
3. Create your markup
4. Create the properties for your icons in your css

Boom. Done. Perfectly crisp images, no matter what device it’s being viewed on. Contact me, your mobile web developer who is always one step ahead if you do not yet have a mobile version of your website!

By | 2012-04-17T08:22:26+00:00 April 17th, 2012|Mobile Web|0 Comments

About the Author:

Adam Whitaker

Leave A Comment