How to Design for Apple’s Retina Displays

If you’ve watched the HBO series Game of Thrones (or have read through the Song of Ice and Fire series), you’ll know that one of the major themes throughout the story is the subtle art of politicking.

In order to survive you’d better know what your enemy’s next move will be — and be able to defend or counter it quickly.

It’s no secret that the majority of web browsing is sliding quickly over to mobile devices.

Because of this, designers and developers have been forced to confront their new handheld overlords. We’ve been given quite a few responsive weapons that have beaten back 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 on the scene. The good news is that we don’t need to pay attention to every single mobile device that comes out, or give fealty to their demands. But when the king of mobile devices brings a new heir into the realm? We’d do well to pay attention.

With the introduction of the new iPad and including both generations of the iPhone 4, Apple now has millions of devices in the hands of its loyal subjects, burning their retinas with beautiful, high-density displays.

The people of the realm spend hours gazing at the graphics you’ve designed on their new toys. If you haven’t designed those graphics correctly, their blurry appearance might just land your pretty little head on a pike in King’s Landing ;)

We don’t want to lose our heads over an issue that’s so easy to deal with, so squire alongside me and let I’ll show you what you can do to bring graphical peace to the mobile kingdom … for a week or two, at least.

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 actual 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. You didn’t want to have people squinting, pinching and dragging to see things they had no problem seeing before.

But it also created a new problem, because we know what happens when you start duplicating pixels and enlarging graphics — they get blurry. They get blurry fast.

The graphic above has been exaggerated a bit to illustrate my point.

When you look at graphics that were not specifically enhanced for the Retina Display on a Retina display, you’re not going to see a huge blurry mess. What you’ll see are edges that are not as clean as they should be, and text will be just a little harder to read.

Some would say, what’s the big deal? I can handle my edges being a little flat.

Personally, I want my graphics to look as crisp and clean as a new dollar. Aside from my own preference, ask yourself this: What if, in the next year or two, that pixel density doubles again? What if it triples? We’d have a real problem on our hands.

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/scribe-logo@2x.png);
        background-size: 130px 40px;
    }
}

Take a look at the two graphics below.

The first is our normal image, the second is our high resolution image.

Zoom in on either your mobile device or your desktop browser and you’ll be able to see that the first image will get blurry as it’s enlarged, but the second will remain nice and crisp.

This works well, but it’s a lot of extra work to produce multiple versions of all 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 scaleable
  • Resolution independent
  • Supported by all browsers young and old
  • You can design on the fly (easily change colors with css)
  • Small file size

Here’s how it’s done:

  1. Upload your icon font file to your web server. We’re using a free one called Modern Pictograms from Font Squirrel (I’ll provide a list of great ones at the bottom of the post)
  2. Reference the font file in your css
    @font-face {
        font-family: 'ModernPictogramsNormal';
        src: url('http://www.studiopress.com/wp-content/uploads/modernpics-webfont.eot');
        src: url('http://www.studiopress.com/wp-content/uploads/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
             url('http://www.studiopress.com/wp-content/uploads/modernpics-webfont.woff') format('woff'),
             url('http://www.studiopress.com/wp-content/uploads/modernpics-webfont.ttf') format('truetype'),
             url('http://www.studiopress.com/wp-content/uploads/modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
        font-style: normal;
        font-weight: normal;
    }
    
  3. Create your markup
    <div><span class="icon">i</span>View Basket</div>
    <div><span class="icon">a</span>Read More</div>
    <div><span class="icon">(</span>Settings</div>
    
  4. Create the properties for your icons in your css
    .icon {
         color: #3090cf;    
        font-family: 'ModernPictogramsNormal';
        font-size: 18px;
        padding: 0 15px;   
    }

And here is the results…

iView Basket
aRead More
(Settings

Here’s are some great icon fonts lists:

Comments

  1. Thank you Josh! Once again an excellent, forward thinking, how-to!

    • Thanks for the kind words Marc! Trying to keep in step with the mobile landscape today is always a challenge!

  2. that’s great, but aren’t most Retina enabled devices used on mobile networks with lower bandwidth? This means slower download times if you’ve optimized your website for these devices.

    • That’s all part of the dance and one of the reason why font graphics are a good option because of the low file size. Another option that I plan on writing about in the future is using SVG (scalable vector graphics). Depending on how you use them they can be smaller in file size than their .png and .jpg counterparts and they obviously scale up with no resolution loss.

  3. I can’t believe I hadn’t thought about this before reading this article! A great idea, and surprisingly simple. Hopefully browsers will adapt soon to handle vectors natively to avoid all these workarounds in web design. Great blog, and love the Game of Thrones references.

  4. Wow, that’s an earful, and a few spoonfuls to choke down. I’m glad there are people like you out there figuring it. Sheesh.

  5. Thanks Josh, really enjoying your articles around these topics, I feel we’re definitely at the beginning of a journey on these kind of things but you articles are helping me stay on top of it, cheers, Nick

  6. This is a great start, ive been wondering about this ever since getting my shiny new ipad a couple weeks ago.

    This icon font idea looks interesting and I’m amazed at how many icon fonts are now available, but I’m curious if it doesn’t cause accessibility issues? I don’t claim to be an accessibility expert, it’s just a thought I had looking at the HTML.

    I’d also really like to see a post similar to this that addresses svg and double size raster images,in more detail.

  7. Josh,

    Interesting read. You mention that having multiple sized graphics sucks (agreed 100%) and what I’m doing now is delivering high rez graphics displayed at roughly half size, which works really well BUT means that you have to download a large graphic even if you’re on a low rez screen (see the post I made at http://www.photojoseph.com/retina ).

    Your comment that vector graphics would be good reminded me of the VSG format. Is that dead, or whatever happened to it? For non pixel-based images, that’d be ideal it seems.

    Using code to swap out low or high rez versions would probably be best but it’s such a pain. I’m a Squarespace user and have high hopes that version 6 will have all that built in. Upload one high rez graphic, and let it scale as needed. Fingers crossed.

    cheers
    -Joseph

  8. Problem will always be browser support. I still have clients who use IE6 (they have no choice – local government) and many still use IE7 or have clients that use it.

    So yet again website designers end up stuck in the middle between cutting edge and old school. It’s quite depressing really.

  9. Thanks Josh! This is a great solution for icons. Nice links to other sites as well.
    I look forward to your post on SVG.
    ~Amy

  10. Really nice article Josh. Thanks!

    (Just an FYI, the link to owltastic.com’s list of icon fonts is going to delicious.com.)

  11. Apple’s new retina display will seriously slow down the web if this trend continues. Increasing the resolution is going to further slow down your page loads, likely decrease your Google ranking and further magnify already pitiful page load times. Do we really need a 5MB page load? Not really.

  12. Nice article Josh. Thanks!

  13. It’s a nice solution for icons (simple graphics), but for photos, well, that still needs a little playing around with – it’s only the file size that gets in the way. I’m worried with the dl speeds for mobiles that Retina has created for itself.

  14. Very interesting! Thanks for your forward thinking.

  15. thanks for this, I will let our designer read this so he can make our website apple device friendly. I think its a lot of work, so I will let the designer do the editing and programming.

  16. Shannon Hobbs :

    Thanks for the article. I have my middle school students designing svgs in Illustrator.

  17. wow glad I stopped by and read this .. the new icon fonts look wicked, will give this a go v soon

  18. It’s great, but aren’t most Retina enabled devices used on mobile networks with lower bandwidth? This means slower download times if you’ve optimized your website for these devices.

    • That is an issue and will continue to be an issue until there is a good solution for delivering specific images based on bandwith.

      Though most tablets are used on wifi and most phones today are accessing high speed 3g and 4g networks. Speed on the network isn’t necessarily a big concern though total data amount used might be in my opinion.

  19. This technology is in its infancy and it shows. It takes a lot of cpu/gpu power to render complicated high-res graphics in SVG for instance. New Macbooks will be faster but Ipads Safari is barely able to render complicated vector graphics, like this (the background).

  20. We are clearly experiencing a big paradigm shift in technology that is affecting how we design websites. I’m curious, if everything is moving towards high density, will the resolution of your photoshop design comps also need to go up? Will 72 dpi become obsolete? Will we need to double the file size to 150 dpi (or larger) to accommodate? Or is this mostly handled in CSS?

    I’m just learning about this, so any insights are appreciated!

  21. Great stuff, just start a new job and getting started into making icons for first time, i found your blog very helpful and the comments as well, like the idea of using scalable graphics so hopefully that is where we are heading…in my case i am trying to learn what is the optimum size to design desktop icons for the new mac book pro retina display, found stuff about iPhone and iPads only…for example should 512x512px be enough or do i need to multiply everything by x 2? do i need to name the files “512x512appdesktopicon@2x.png”? any help will be appreciated! Thanks!