Clockwork Active Media Systems

A significant new development in interactive arrived this year with Apple’s new iPhone 4, and its widely-acclaimed Retina Display. Although this feature seems trivial at first, it’s a sign of things to come. The Retina Display breaks through the once substantial barrier between print and digital by providing a canvas at 326 pixels per inch (ppi). This means images that are as sharp as a printed magazine, rather than the 90 ppi common to most computer monitors today. In the near future, these super-high-resolution screens will be coming to a desktop near you.

This presents a new challenge for web designers: if a site has been designed and developed on a standard resolution monitor, how can you make sure it won't become blurry when scaled up for these new print-resolution screens?

But wait, there's hope!

Fortunately, as display hardware has grown up, so have browsers. Today, all major browsers (yes even Internet Explorer 6) support some form of scalable vector graphics (SVG), and all major browsers support embedded fonts. While there are standards for both fonts and vectors, none are universally accepted — but there are a few free tools that import and convert where needed.

For vector assets, we’ve found that Raphaël does a great job of converting Javascript objects to SVG, VML, or Canvas elements. For web fonts, Fontspring allows you to purchase font bundles that are entirely cross platform, locally installable, and licensed for unlimited domains. If you already have a TrueType (or OpenType) font with a proper license for web use, you can also use Font Squirrel from the same company. This online tool will take your one font file and create all the needed formats at no cost.

Fortunately, buying a new device means getting modern browser software in the bargain. The newest browsers support CSS3 standards — a new way of styling pages that makes possible special effects like code-based drop-shadows, gradients, rounded-corners, reflections, 3D transformations, masking, and animations.

So what does it mean to the interactive community?

It’s an interesting new problem to tackle, since despite all of these browser advances, the one thing we don’t yet have is a tool that will allow both mockup and export of the necessary assets. Although Photoshop still does a fantastic job as a prototyping tool, it cannot currently export Javascript objects, web font files, or lines of CSS. Consequently there is a huge opportunity for a webkit-based design tool, but until that time comes, the process will involve a little more translation between designer and coder — your front-end developer will need to figure out how to translate visual designs directly to CSS, rather than slicing up a Photoshop document.

The challenge extends to other roles in any interactive agency:

• Project Managers will need to decide with the client whether their new site needs to look great on the “latest generation iPad with Retina Display.” Already Flash is dying in cases where Javascript will get the job done for this very reason. With an approach of graceful degradation, It’s simpler to start with the best browser, best hardware and highest quality product, and then cleanly degrade down as needed. And just as every project is unique, a cost-benefit analysis will need to be made based on the front-end developer’s skill-set, the design approach (since an evolving design can be easily tweaked in code), and whether the site is meant to last months or years.
• Back-End Developers in charge of content management should factor in at least two different sizes of photographs (since photos can’t be converted to alternative scalable formats).
• Finally, designers will benefit from learning the limits and capabilities of CSS3, embedded fonts and scalable vector graphics. SVG as it currently stands doesn’t support some of the advanced filters and textures that Adobe Illustrator allows — and in those cases, bitmapped graphics are the best approach. In Photoshop, designers should familiarize themselves with vector masks and blending options, which make up-scaling a design much simpler.

Since resolution-independent design potentially impacts so many roles, the choice to incorporate it into your overall approach should be weighed carefully. The sooner your group decides whether graceful degradation is a good fit the better since there’s plenty of groundwork to be laid on best practices. It’s no longer a question of if, but when. At Clockwork we were able to utilize many of the tools and techniques discussed above in the new Geek Girls Guide website, with more improvements soon to come as we look at keeping the Active Media Manager and all related tools and services ahead of the curve. We're constantly exploring the best approach to handle an evolving set of web standards, and there are plenty of discussions and case studies that support alternative approaches. Feel free to leave comments below and contribute to the conversation.