The Effect of Retina Display on Web Design

Published on 14 Jun 2012 at 7:13 pm. 1 Comment.
Filed under Informative,Mobile,Web Design.

Everybody loves pretty pictures. Retina display can make your pictures pop. But for everything there is a cost. What does retina cost you?

iPad 3 showing off it’s retina display

As I covered in my earlier post on Device Independent Pixel Formula For Mobile Devices, the term retina display is just a buzzword Apple created to refer to any device that was 300 DPI or greater. It is not exclusive to Apple devices. There are already many smartphones that have achieved that standard. Heck, LG is working on a 400 DPI device. This means that a lot of mobile devices out there that can benefit from you updating your design to take advantage of the high DPI capabilities.

Retina Display: The Benefits

Font rendering is much smoother than your standard computer screen. It made a huge jump closer to print quality rendering. You can even switch your default font rendering from Helvetica to the slightly improved Helvetica Neue font and text will be seem more readable.

By creating an image at twice the display size you are packing more detail into a smaller space. Images will appear crisper, and beautiful.

Retina Display: The Costs

Your page load time will increase. By serving a larger image you are serving a higher file size to the user who will spend more of their bandwidth to download the file. On a mobile device this will be quite noticeable.

You will now need two versions of every file you would like to optimize. This will increase your disk usage and thus fill up the server faster, requiring a new server sooner.

Presently, the CSS media queries that are useful in responsive web design make it very simple to target background images that you would like to optimize. That’s all well and good, but what about images that are part of your content such as your logo? There is no good solution. What can you do:

• Use JavaScript to detect retina:
  • Pro: Easy to automate.
  • Con: Modern web browsers will have already started to download the first image before you can detect if it is a retina quality device and replaced it.
• Server side detection:
  • Pro: Only load one image.
  • Con: Many large websites serve their static content through Content Delivery Networks (CDN). A CDN is a network of servers located across the globe that will serve the file from the closest server to a user.  These servers are dumb and do not do server-side processing. Additionally, if a user saves the website on one device and transfers it to another they may see the wrong type of image.
• Just serve retina:
  • Pro: No fuss
  • Con: Wasted bandwidth, higher load time, and the higher quality images will actually seem worse on low DPI devices.
• Empty src element and CSS generated content:
  • Pro: Only loads one image, works in WebKit browsers (Chrome, Safari, iOS browsers, most Android browsers, BlackBerry browsers), and Opera. This covers most mobile users
  • Con: Does not work in Firefox nor IE, desktop or mobile versions (this is actually by design in Firefox). It fundamentally goes against everything web designers have advocated for years, and cannot be done inline so it requires extra configuration that is very clumsy.

Admittedly, the last method listed was one I discovered when I tried to take a stab at a solution. Because of the cons I do not advocate it, but I list it in case anyone reading this may have thought of it themselves. What do I recommend? … uhm … :: whistles :: … If you must do something today, I guess the JavaScript solution is the way to go, but the industry is working on solutions now, so be ready that you will need to change everything tomorrow.

This post was originally published as The Effect of Retina Display on Web Design for The BrandBuilder Company.