The Retina-driven bandwidth bottleneck

The announcement that the new MacBook Pros will have Retina displays is going to have a massive impact on web design.

The new iPads already have Retina displays, pushing their resolution above most desktop displays and even HD home-theatre set-ups. Challengingly for designers, this resolution increase comes within the bounds of a small screen. Apple uses terms like "crisp" to communicate this change, but ultimately we're talking about a shift to a pixel density of 300dpi. By comparison, most computer monitors have a pixel density of 100dpi. This bump to screen resolutions won't hit us in the same way as an increase in monitor size, because we're squeezing more pixels into the same space.

We tend to get used to a certain level of blurriness until a higher-definition alternative comes along — think of the transition from VHS to DVD, and then from DVD to HD. What was once perfectly acceptable becomes intolerably blurry.

This is challenging for designers for a number of reasons.

The browser on the iPad is always set to full screen. So it's always set to 2048x1536 or 1536x2048, depending on screen orientation. Retina laptops will have an enormous resolution, up to double the new iPad's resolution of 2048x1536.

While the iPad Retina screen displays page layouts at 1024x768, it has greater pixel density for assets. This means that while site layouts that are perfectly serviceable on a medium to large 100dpi monitor will appear the same on a Retina screen, logos, and imagery are going to appear blurry.

However, we can't simply replace existing imagery with higher-resolution imagery, because bandwidth capabilities haven't kept pace with resolution capabilities.

This is the first major bump in browser resolution since VGA and DVI. The bump to the current monitor standard paralleled the beginning of widespread ADSL/cable adoption. Monitor resolutions were growing as people's bandwidth capabilities were growing.

This new Retina standard is coming as people move from wired ADSL to wireless and 3G/4G internet. The resolution capability is massively growing, but we are moving to mobile connections that are less capable and less stable. Tablet use is driving a move towards 3G/4G media consumption, paralleling the move from fixed-line telephony to mobile.

So there's going to be a massive disconnect between screen resolution and bandwidth. We've been building high-bandwidth sites for a full browser experience, and low-bandwidth sites for the mobile experience. We now need to support high-resolution displays over low-bandwidth connections, as well.

Tablet ownership and mobile internet consumption show no signs of slowing down, and the effects of the National Broadband Network (NBN) roll-out won't be felt for a good couple of years yet, meaning that a large segment of the active audience is going to be in that high-resolution/low-bandwidth sector.

So, how do we avoid this bottleneck? In the next article, I'll walk you through some useful techniques that you can use.

Barry Saunders is a UX Architect.


Barry Saunders is a UX Architect. He has worked on projects for News Ltd, Google, Westpac, EFIC, WWF-Australia, QUT, and SBS.

Editor's Picks