Mobile vs Retina

Evolution

While the web is certainly in a state of constant evolution, a seemingly pivotal transition period seems to be underway. One of the last more significant transitions was going from dialup to high-speed broadband during the early to mid 2000’s. That evolution allowed higher bandwidth sites like Flickr and YouTube to flourish.

The latest evolution of the web does not come from the web itself, but rather the devices that we use to view it. Well, there are actually two parts to this evolution: mobile and Retina Displays (high pixel-density displays). And they seem to be, at least temporarily, at odds with eachother—more about this conflict later.

Mobile

Before Apple unveiled the iPhone back in 2007, mobile browsing of the web was, in hindsight, a total joke. Now, browsing the web on a mobile device can be an equal, if not superior, experience compared to on a laptop or desktop.

So, designing for the web is now a bit more complicated. It’s vital for designers to create sites that perform well on all types of devices. This has led to creating mobile versions of websites and more recently, responsive websites. ((These are huge topics and we plan on sharing some thoughts regarding responsive sites in the future.))

Retina Displays

Without going into too much detail, here is a brief visual overview of what a Retina Display is:

Pixel Density

It’s really pretty simple. Retina displays basically have 4 pixels jammed into the space that used to take up one pixel. This makes for really beautiful screens.

retina display diagram 1

Physical Image Size

The same size image on a retina display would be half the physical size of the same image displayed on a non-retina display. To “counteract” ((I say counteract because without scaling 2x, any images used for navigation would probably be too small to be usable. Also, scaling 2x presents the image more than likely closer to the creator’s original intent.))  this effect, the device’s operating system automatically doubles the scale of images (and text).

retina display diagram 2

The funny thing about retina displays is that when they display images ((Notice I mention images—as in static images. Videos, because they’re “moving pictures” don’t look nearly as bad)) that are not “retina” quality, the images look terrible.

Apple popularized the Retina Display ((Apple has labeled their high pixel density screens Retina Displays. That term, while really only refers to Apple’s devices, seems to be sticking. So, I’ll be using the term “retina display” in a more generic sense—say, anything with more than 220 pixels per inch. Sorry Apple.)) with their iPhone 4. Retina Displays are now availible on iPhone, iPad and most recently available on a MacBook Pro. HTC, LG, Motorola Mobility and others have followed suit.

Solutions

There are already several solutions to serve up high-resolution images to retina display devices. We even came across this which is very interesting, but seems a bit hack-y in execution.

At odds

The conflict between mobile and retina goes back to bandwidth. Mobile devices are increasingly showing up with retina displays. But for images to take advantage of retina displays, they must contain more pixels. More data. More kilobytes—megabytes even. This is a nightmare for the seemingly struggling carriers, and data plans they offer to the penny pinching consumers.

Our attempt to add to the solution

We thought we could add to the solutions ((We are using retina.js to serve up @2x images to screens with a 2x CSS pixel ratio and non-retina images to screens with a 1x CSS pixel ratio)) mentioned above by letting the user decide whether or not to display retina images. We present the user with the ability to toggle between retina and non retina images. With 4G/LTE still sparse and with limited data plans we decided to make the default set to show non-retina images. A simple toggle and the page refreshes with beautiful retina images.

You may notice an actual difference in the content of many the images—mainly images in projects tagged with web. Many of the sites we have designed are built at a static page width of 960px. So when we want to show these as retina images the 960px width doesn’t fill the entire frame. So you’ll just see a bit more background color. This just goes to show that the 960px width page is or is soon to be dead. #responsive

Still mobile

Apple’s has indicated with it’s latest MacBook that not only will our smaller devices sport Retina Displays, but, now, our primary workstations will too. The new MacBook is still very much a portable machine. So, bandwidth can be an issue especially if you’re using your smart phone as your internet connection.

When Apple starts rolling out desktop workstations with retina displays, we might have to reconsider our approach. But for now, we think it’s a dandy solution.

What do you think?

4 thoughts on “Mobile vs Retina

  1. Susie Gross

    Nathan, it’s a good thing you know what you are talking about!!! Did you write all of the above??? I liked the “bit hack-y in execution”, And yes I did read it all.
    Plan to see the rest of the web site later to day.

  2. nathan Post author

    Yes, Mom. I wrote all of the above. :)

    Thanks for your feedback! I’m chalking this one up as the best Mom comment ever.

Leave a Reply