Apple’s Retina Display has been around for a while now, but with the inclusion of the high-res display on both tablets and laptops, it’s clear that Retina is here to stay. As a mobile web designer, I’ve been trying to tackle the issue of Retina for some time now, and so I’d like to provide a little insight into one of the challenges I feel it presents.

It is clear that Apple’s Retina Display is a game changer for the mobile web. The astounding pixel density of a retina display is able to render the mobile web with unprecedented fidelity, meaning that both designers and marketers have an opportunity to up their game and make their mobile websites look better than ever.

At first glance, Retina is amazing, and it seems like the clear future for mobile web design. However, such an amazing new shift in technology comes with numerous challenges to designers and marketers, as it presents an entirely new paradigm to accomodate for when designing a mobile website. In the past year or so, designers have been busy toiling away trying to accomodate for the major challenge of the vast variety of display resolutions and aspect ratios of all sorts of different devices. This challenge had mostly been solved with strategies such as responsive and mobile-first design. Most designers, by this point, are capable of handling a wide array of screen sizes and designing accordingly. But while everyone was occupied with the idea of device size, no one has been paying attention to the real killer – resolution.

Apple is not the first company with the capability to manufacture high resolution displays, but they are certainly the first company to successfully market them. However, just because they can make higher resolution screens doesn’t mean that the mobile web is ready to handle them.

So what are the drawbacks with Retina?

The first thing people notice about Retina is that normal resolution sites just don’t look as good. A victim of Retina’s notorious “pixel-doubling”, a typical mobile website has bitmap images that are just not prepared to be viewed on such a high dpi device. So what does that mean for web designers? It means that your brand new mobile website might look good to some viewers, but a portion of your mobile traffic may now have a less-than-stellar experience on your site. As a designer, you better be ready to accommodate for both types of users. You have users that expect to see crisp images on your site, and you have users who expect to see a lower quality image (i.e. optimized for their phone). The kicker is that both users expect to have a fast load time. Therefore, the challenge becomes how you go about making sure you can provide these high resolution images without sacrificing load time.

As designers, how can we meet this challenge?

Providing the high resolution images is the easy part. Accommodating both sets of users can be as simple as scaling up your images. In fact, having images that are “Retina-ready” and are simply scaled down for lower-resolution phones is probably the easiest method. All you need to do is always serve the high-resolution image, and use HTML and CSS to scale it respective to the width of the phone. Your website is guaranteed to have a beautiful look and feel on all devices.

However, as the image size goes up, performance goes down. Due to network latency problems, and a mobile device’s ability to only download a handful of files at a time, your now super-sized bitmap images will struggle to filter down the pipeline to your user’s mobile device. Your mobile users will experience longer load times when in an area of poor service (or in some cases, anywhere not on wifi).

The problem doesn’t lie in identifying who is visiting your site with a Retina device. Identification is rather easy. Such a task is easily accomplished through media queries and JavaScript. In this respect, it would be rather trivial to serve up two versions of your mobile website (one with high-resolution images, and one without) depending on your visitor. The problem is that these Retina images are easily double the size of your traditional mobile website, and will therefore take a much longer time to load.

In my experience, one of the best ways to provide the optimal experience to your user, without sacrificing usability, is simply to get rid of the bitmap images entirely. The images large enough for the pixel density of the Retina screen are beautiful, but in most cases their value doesn’t justify their cost. By trimming down the number of images on your page, and swapping things out for CSS, your page can look just as beautiful and load in a fraction of the time. Additionally, by switching elements out for CSS, you get the added benefit of scalability across all devices at incredible speeds.

What’s in sight for Retina and mobile design?

As the pixel density of displays go up, it’s certainly going to be pushing design in a new direction, but this doesn’t need to be a bad thing. Given that the new line of Apple laptops is ushering in the era of high-resolution laptop displays, the web as a whole is going to have to learn to respond to the challenges provided by Retina, and we, as designers, need to be prepared to meet them.