University of Missouri

Interface

Skip to search and archives

Image of Memorial Union at various pixel zoom levels

Prepare for a high-definition future

Published on by Joshua Hughes | Posts by This Author

Web design is a field prone to major shifts. For the last few years, the advent of the mobile web has commanded our attention. We must now assume that almost any site we produce will be viewed on a variety of devices—from phones, to tablets, to traditional desktops.

I believe the next major development will be high-definition displays, and this is a shift we should begin preparing for as soon as possible.

What is a High-Definition Display?

Simply put, it’s a display with a lot more pixels. We already have high-definition screens in the mobile space. The iPhone 4, introduced in June 2010, features a “Retina” display with a 640×960 resolution—double the pixel density of previous iterations.

Just like application developers, designers of mobile-optimized websites have had to increase the size of their graphics to avoid looking pixelated on the new device. A quick example:

Screenshot showing a low-resolution graphic and a high-resolution graphic

Unoptimized on the left, optimized on the right. Larger graphics are required to look crisp on a Retina display.

It’s worth mentioning that, with a hi-def display, pixel dimensions expressed in CSS or HTML do not represent real device pixels. “1px” is a 2×2 pixel box. An element with a width of “320px” and a height of “480px” will cover the entire screen of an iPhone 4. If you have an image that has real dimensions of 320 x 480, however, it will be blown up to fill the actual space.

Implementing High-Definition Support

So, how does one deliver high-definition images to devices that support them?

Background Images

For background images, it’s pretty easy to swap in high-resolution graphics using media queries:

/* Initial element */

.element
{
    background-image: url(images/photo.jpg);
    width: 100px;
    height: 200px;
}

/* Replace the image for higher-resolution devices */

@media screen and (-webkit-min-device-pixel-ratio: 2)
{
    .element
    {
        background-image: url(images/photo_2x.jpg);
        background-size: 100px 200px;
    }
}

background-size is important here. It should be set to the same dimensions as the standard definition image, otherwise it’ll display with the same 2x factor.

Inline Images

Inline images are a bit more complicated. There are numerous solutions to the problem, but I would recommend Troy Mcilvena’s Retina Display jQuery Plugin. If the plugin detects a pixel density of 2 or higher , it look for high resolution versions with a given suffix (it’s set by default to “_2x”, so if the image is named “photo.jpg”, it’ll check to see if “photo_2x.jpg” exists). If this larger image exists, it’ll swap it in. Pretty simple.

Moving Beyond Mobile

Now, there’s a lot of evidence that within the next few years we’ll be dealing with screens with larger hi-def displays. It’s heavily rumored that the next iPad revision will come with a 2048×1536 “Retina” display. Similarly, Microsoft has hinted that Windows 8 will support devices with hi-def screens. Rumors are rumors, but it seems clear that the emergence of these devices is not a matter of if, but when.

Because site redesigns can be time consuming, and a given design may stay in place for years at at time, it’s important to begin laying the groundwork for support now.

Design (and Think) Bigger

Here are my recommendations for potential changes to your design workflow:

  • Obviously, the main thing is to ensure that you can easily create hi-resolution versions of any graphics you have on your site. If your process starts with a Photoshop comp, double the width and height of your standard template. Viewing at a zoom of 50% will give you a rough idea of what your design would look like in the browser.
  • While simply increasing the size of your images will get the job done, the higher-definition size opens up the opportunity to improve the level of detail in your graphics. This is especially important for icons and illustrations.
  • Use vector images wherever possible. This can mean doing more of your working more in programs like Illustrator, or simply taking advantage of the vector tools Photoshop has to offer. It’s also possible to output images to a direct vector format like SVG, though it remains to be seen if doing so will become a popular option.
  • Use CSS3 effects wherever possible. Commonly used effects like gradients and rounded corners are generally easier to create with CSS, and because they’re programmatically generated, free us from having to produce extra images, or worry about the extra bandwidth cost they incur.

While it’s certainly unclear what will constitute best practices for dealing with these high-definition displays, I’m confident that making these workflow adjustments now will ease the transition down the road.