Notes from Aquent's Summer of Learning:
Looking Sharp on High-Res Displays

Overview of big ideas:

1. High-res displays are here to stay.
2. Don't worry about type or CSS elements for high res.
3. Double the size (height and width) of images and graphics.
4. Use SVG or fonts for vector graphics.

Idea 1: High-res displays are here to stay

• Displays historically have used about 72 pixels per inch; MS does 96 pixels per inch. That's changing over time.
  • 27" iMac 2010, top of the line, 109 PPI
  • iPhone (2007) had 163 PPI
  • iPhone 4, Nexus S (2010) have more than 300 PPI (more than three times the display of old monitors) and are approaching the resolution of ink on paper. You can barely see the dots.
  • MacBook Pro retina has 220 PPI (2012)
• Retina = marketing speak for high-res.
• More laptops and desktops will have retina soon.
• How do you test on high-res? You have to get a high-res display to test — maybe lots of high-res displays.

Idea 2: Don't worry about type or CSS elements for high res

• Also, don't worry about layout.
• Type renders absolutely fine — text will just look better on high-res display.
• The New York Times is a good example of a site that's worked to support high-res displays.
• CSS properties also render fine (colors, borders, border-radius, gradients, shadows — anything without images).
  • You can create a circle out of a div or any block element by specifying a width and a height (must equal each other) and specifying a border radius that's half the width and height.
  • Triangles: no width and height, but border width
  • There's a page online that shows how to do shapes with http://css-tricks.com/examples/ShapesOfCss/ — doesn't work on old browsers!
  • CSS background patterns examples: http://lea.verou.me/css3patterns/
  • The class homework includes examples of this.

Idea 3: Double the size of images and graphics

• E.g., background image (PNG/GIF), bubble.png. Create 2 images, bubble.png and bubble@2x.png. Must have original file, preferably a vector file. Instructions below cover how get high-res displays to use the big image.
• Background images
  
  • Old way to do a background image:

  #comment {
  background: url(bubble.png);
}

  • New way: To accommodate high-res displays and to avoid downloading extra-big files, do this:

  #comment {
  background: url(bubble.png);
}
@media (min--moz-device-pixel-ratio: 1.5),
  (-o-min-device-pixel-ratio: 3/2),
  (-webkit-min-device-pixel-ratio: 1.5),
  (min-resolution: 1.5dppx) {
    #comment {
      background-image: url(bubble@2x.png);
      background-size: 20px auto; /* real width with height calculated */
  }
}

  • Basically, the @media is asking how many more pixels are available than normal does this display have? Depending on the browser, it asks for resolution (min-resolution) or device pixel ratio (device-pixel-ratio). The browser will return:
    • 1 = normal;
    • 1.5 = pretty high-res;
    • 2 = high-res;
    • 3 = the future?
  • Best practice: Apple prefers @2x naming style. Can use anything, but this is a good naming convention.
• Foreground images
  • For foreground images, use the same technique — low-res and high-res.
  • You can serve high-res images to everyone (be sure to include image width and height in terms of space the image should take on the page, not in terms of the actual image).
    • Browsers can handle this well.
    • Downside: you are serving a high-res image to everyone so people with low-res devices have to wait longer than they should.
    • One way to compensate for this is to use the larger image file but at a lower quality. For example, a regular size JPG at a high quality might be 31k; the largerJPG at a lower quality might be only 29k.
  • Another approach is to use JavaScript: (http://retinajs.com) that looks at page for images that can be high res and serves up the high res.
    

Idea 4: Use SVG or fonts for vector graphics

• Vector graphics: There are two ways to do it: SVG or fonts.
• SVG is Illustrator for the Web, kind of. It's a way to show vector files natively in the web.
  • To create an SVG file, open a vector graphics file in Illustrator and do save as. The new file will look the same but the layers wills be smashed into one layer.
  • Warning: It doesn't work everywhere. It doesn't work for IE8 and below and for older Android browsers. For most people, that takes it off the table. SVG is not ready for wide-scale use yet.
• The second approach for vector graphics is to use fonts (@font-face) to show them.
  • Embed the font on your web pages.
  • Type makers ((http://fontawesome.github.com) have done icons that are specifically meant for this. Also works on screen readers and old browsers.
  • You can make your own font, e.g., take logo out of Illustrator and copy and paste it into your font.
  • Caveats for font approach to vector graphics.
    • You can only use one color.
    • Font software is expensive or difficult (take your pick).
    • Finally, a font maker came out with font software at a decent price. It's Glyphs Mini for $50 at http://glyphsapp.com.
    • A free font maker is fontforge. It's very painful to use and you may have to compile it for Mac.