5 Things To Consider When Building For Retina

By Micah Slavens on Aug. 12, 2012

Retina displays: another format we need to design and develop for.

Front End Development is a discipline that is in constant flux. Just look at the recently published interactive browser timeline evolutionoftheweb.com - since the mid-nineties the number of technologies a developer works with has exploded.

screenshot from evolution of the web

Early on, the changes were spurred on by faster and faster connection speeds, but in recent years development has increasingly had to focus designing for more and more screen sizes. This has largely been because of the wildly successful Apple iPhone and iPad. Apple has once again thrown developers a curve ball: the Retina display for MacBook Pros.

We’ve started to consider more and more what this means when we plan and build a website. On the one hand you have mobile devices on 3G connections which can only handle small file sizes and simple interactions. Now on the opposite end of the spectrum is Retina. Here’s five things we’re thinking about as we build for Retina.

1. Multiple Images

The first thing you need to consider is how many images you are going to create for your site. Every .jpg or .png you create should have two (or possibly three) versions created. Why? Images that are too small will look pixelated on Retina. When you upload images for things like a blog post, is your CMS creating multiple versions of images? Are you?

2. Media Queries

This goes hand in hand with the multiple images. If a person isn’t viewing your website on a retina display (which the majority of your viewers aren’t) they shouldn’t be served a retina sized image. A device media query can help you make sure you are only loading big images when they are needed.

3. File Sizes

We’ve talked about the number of images you need, but what about file sizes? The images that should be loaded can be double the pixel size of a regular image (eg. a banner image might jump from 930px wide to 1860px wide). We don’t all have fiber optic internet connections, and so it is a challenge to make sure you have ideal image sizes and still have ideal data load times.

4. Load Times

Speaking of load times, with Retina-ready files they can be huge! There are some techniques to help get files sizes as small as possible. For starters there are applications like “ImageOptim”:http://imageoptim.com that help compress images to the smallest size possible without quality loss. Still, managing file sizes and load times is a delicate balancing act.

5. Keeping Mobile in Mind

Just because there are retina displays for desktop devices, we shouldn’t forget Mobile devices. There are by far more people viewing your website on a mobile than on a retina display and that’s something to keep in mind. For now.

Micah Slavens

Principal

Want to grow with digital?