How to Prepare your Site for High-Density Displays

If you've seen one of Apple's new 5K retina display iMacs or one of the other high density computer screens that are becoming more common (especially on mobile devices), you already know that on those screens, things can appear sharper, crisper, and easier to read -- basically, everything just looks better. Is your site ready for its close-up?

If you want to see what I'm talking about, your best bet is to borrow a high-DPI display from someone, or just walk into an Apple store and pick up the latest iPhone or iPad. (In fact, Hop Studios got an email just last week from a client looking at his own website in an Apple store. And yes, he did email us directly from the store.)

The resolution of a screen is measured in pixels -- the number of individual dots that a screen can display -- and high-density displays are no different. But they are capable of displaying far more pixels in the same amount of space. Where a regular screen shows one pixel, the high-density screen shows four, or even eight or 16 -- depending on the screen pixel size. More pixels equals more detailed imagery and text, and a more readable, attractive website. For mobile, the gains are huge: you can fit more on the screen and it'll be easier to read and use, but there are benefits for websites as well. Perhaps more importantly, there are downsides: graphics created for standard displays show up on high-DPI displays fine, but they can look slightly blurry or jagged. Here's a quick visual representation of how this actually works:

Regular densityHigh-density

Today, in late 2014, not every site needs to be ready for high-density displays, but if you fit any of the criteria below, it is probably time to upgrade your site's images:

  • your audience mainly views your website on new high-res displays, or on mobile devices
  • you rely on your high-quality imagery, like if you are a store, or if you feature photographs prominently
  • your audience is the kind that is impressed and influenced by sites using all the latest bells and whistles

There are several strategies for accounting for high-DPI displays:

  • Provide alternate graphics for high-DPI monitors. Yeah, it's a pain, but there's really no substitute for creating graphics of the right resolution and size for each screen you're trying to support.
  • Use fewer images and more fonts and vector graphics. This sounds obvious, but also is sometimes impractical. I'm not saying you should get rid of all your photos and logos, but I am suggesting that you ensure that your website design takes every advantage of the alternatives to images that are available now. For example, you can use icon fonts instead of graphics for email/print/other iconography. And use actual text when you're displaying text so it scale crisply at any size.
  • Use code to create graphics. CSS can be used to create some fairly sophisticated visual effects that, since they originate with code, scale well in any direction. Buttons, drop shadows, curved edges and other visual effects can all be used in place of graphic elements.
Graphic buttonClick me!
This button is a graphic, and won't scale well.This button is created using CSS code, and will scale well.

Realistically, all of the techniques I describe here are fairly technical and you can't just snap your fingers to make it happen. Your best bet is to talk with your web designer about your audience and your goals, so you can figure out the best custom solution to your situation. You will need to find the right balance between the expense of development, site speed, and flexibility in design and content, so it's quite likely that a combination of strategies will be the way to go.

If you're groaning over the necessity for this, remember that high-density displays aren't going away. In fact, they are going to become more and more prevalent. This means, of course, that if you don't take on this task now, it will become necessary at some point in the not-so-distant future!


Have a Project for Us?

Request a Proposal