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.
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?
The challenge extends to other roles in any interactive agency:
- 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.