Supporting high-res devices

I’m participating in Aquent’s Summer of Learning, taught by Jim Webb. The latest class, Looking Sharp on High-Res Displays, was a winner.

What I learned

Basically, you don’t have to worry about anything but images for high res: fonts, CSS elements, and layout all work without any changes.

  • For high res background images, you want two images: one will be the size of your display area (e.g., 175px high and 100px wide for a display area of 175px by 100px); the second will be twice the pixel height and width of your display area, e.g., 350px by 200px. Best practice: add @2x to the end of the file name for the second image, e.g., my_image.png and my_image@2x.png. Then add some media savvy CSS (see my class notes) to serve up the right image to the right device.
  • For foreground images, you can take one of two routes:
    1. Provide one high-res image for all displays. (The image should be twice the pixel height and width of your display area but you should specify that it’s the height and width of the area, e.g., an image that’s 350px by 200px should have a style=”height: 175px; width: 100px;”.) You may be able to compensate for the added dimensions by using a lower quality compression setting.
    2. Create a a normal image and a high res image and use JavaScript, e.g., retina.js, to serve up the right image to the right device.


Vector graphics

The class also covered two approaches for vector graphics. Because it isn’t supported by IE8 and below, the first approach, SVG, isn’t ready for wide-scale use. The second approach, although limited to images of one color, is to use a font. One to check out is fontawesome at GitHub. For $50, You can create your own font face using Glyphs Mini.

More from the class

Check out my:

Leave a Reply

Your email address will not be published. Required fields are marked *