Galen Gidman

Front-end and WordPress developer

Resources for Retina

Prompted by the recent rise in retina devices such as the iPad 3 and Retina MacBook Pro, I’ve been exploring ways to make my websites more retina-friendly. Basically, I’ve found a couple of major options:

  1. Use vector assets such as icon fonts or SVG graphics.
  2. Detect for retina and use @2x images.

Here are a few few of blog articles, tools and resources that I’ve been relying on.

Icon fonts

I’ve been using icon fonts a lot recently. Basically, instead of using image files for your icons, you create a font file out of vector icons. Benefits include being able to infinitely scale, style and animate via CSS.

  • Pictos Server: This can best be described as Typekit for icon fonts. You select the icons you want, associate them with a character, and then the system builds you a hosted, built-to-order icon font based on the Pictos icon set.
  • Symbolset: Symbolset is the first semantic symbol fonts I’ve seen. Simply put, as you type certain, pre-defined keywords, the keyword is automatically replaced by an icon in browsers that support Open Type features. For example, you might type the word “world” and instead of the text “word,” a globe icon appears in its place. Clever, huh? I expect to see a lot more semantic sets like this soon.
  • Fontello: This is much like Pictos Server, except that instead of being limited to the Pictos iconsets, you have access to a number of open-source icon fonts. Also, you must host them yourself.
  • Chris Coyier wrote a good post about the HTML for icon font usage as well as handy roundup of icons fonts currently available.

SVG

SVG graphics are another useful tool that I’ve only recently begun taking advantage of. For some reason, I had been under the wrong impression they were going to be terribly difficult to implement and thus had been steering clear of them. Actually, they couldn’t be easier.

  • This blog post on the IEBlog (yes, I just did that) seems to be a good place to get acquainted with SVGs and understand their use cases.
  • SVG Export Fireworks Command: If you’ve spent any time looking for Fireworks extensions, you’ll know that Aaron Beall is the Fireworks extensions guy. In my limited experience using it, it seems to work pretty well.
  • Illustrator CS5 HTML5 Pack: This add-on for Illustrator CS5 extends its SVG capabilities as well as providing some initial support for HTML5 and CSS3.
  • Inkscape: An open-source vector graphics editor with capabilities similar to Illustrator using the SVG file format. You’ve probably heard of this, but I think it merits mention.
  • This chart will give you an idea of the current browser support.

Hope this compilation will be useful to someone. Drop me a line if I’ve missed something — galen@galengidman.com

Leave a Reply

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