by The floodgates are open. The popularity of the Macbook Pro with Retina Display has proven to the notebook and ultrabook manufacturing market that consumers are ready for a new breed of ultra-high resolution mobile computing devices. For web designers, this could prove another unnecessary headache. Luckily, there are ways around. Here’s how to optimise your site for Retina displays and therefore for increasing number notebook and ultrabook users.
Make sure your rasterized images are available in multiple resolutions.
There are numerous JavaScript scripts (such as Retina.js) which can automatically switch out non-retina rasterized images, such as JPEGs, GIFs and PNGs, with ones at double the resolution. By making sure you’re using fluid web design (that is, percentages instead of pixels – and who doesn’t, nowadays?) you can limit the ‘on-screen’ size of the images while allowing for a ‘2x’ version of the graphic to be loaded and presented.
There’s another way round this, if you don’t fancy going through your asset library and making high-resolution variants of each. Use SVG (Scalable Vector Graphics). Adobe Fireworks and Illustrator both support exporting in this resolution-independent format. As of writing, Internet Explorer 9 and previous do not support SVG images, but other browsers do. You can always run a quick browser-checking script to decide which images you are going to present.
Put your faith in CSS.
Browser support for CSS3 is still farcical, but it’s getting better fast (and there are always fallbacks). But buttons, images and boxes are all well within most browsers’ rendering capabilities. By using CSS stylesheets, you put the brunt of the computation on to the client’s side. That makes the whole browsing process more fluid, but it also means that retina-ready browsers can act accordingly.
Use fonts. Iconographic fonts are nothing new
– they’ve been supported as far back as IE 4 – and, with the advent of retina displays, they’re really coming in to their own. Why? Because fonts are still rendered as vector graphics. That means they can scale to any size with no distortion.
What are the downsides to fonts? Take the premier iconographic webfont Pictos as an example. Fonts are simple graphics at best, and most of the time you’ll need to design your own iconographic typeface to meet your own needs. Font design is a whole new world that you’ll need to learn to do that. Additionally, fonts don’t really have much in the way of customisation options: even using CSS3, you can apply colours and simple gradients at best. So, at worst, it’s a work-around. However, some websites – such as Garrett Murray’s Maniacal Rage – embrace iconographic typefaces as part of the overall website design to good effect. It works for minimal website approaches.
In the end, should you really be worried about Retina displays? After all, Apple’s new laptop is priced well out of most users’ ranges. This is true, but the positive response speaks for itself. Retina displays are undoubtedly the future for some common tasks. Web browsing is but one reason to adopt them: office productivity is another. Typing on a Retina display feels truly great, and that’s something that manufacturers of office-oriented ultrabooks and notebooks – such as Lenovo and IBM – will be taking in to account for their future product lines. So, getting ready for Retina is bigger than just for Apple. In short order, it’s going to be the standard state of affairs.
Leave a Reply