When we design for the web, the end goal is for the sites we make to look consistently good on any device they might be seen on, regardless of size. Over the years, designers and developers have come up with a number of ways to make this happen, and for a while we were feeling pretty good about ourselves. Then Apple came along, and as is their habit, released a piece of technology that changed the landscape surrounding it completely.
I’m talking about the “Retina” display. Debuted in 2011 on the iPhone 4S and now available on every Apple device, Retina screens have a much higher pixel density, meaning they pack way more pixels into an inch than your standard display. Apple claims that there are so many pixels per inch in their Retina displays (around 300) that they are indiscernible to the naked eye.
In addition, most other major manufacturers of desktop computers, laptops and mobile devices have also begun to produce machines with high pixel density screens, though they can’t call them Retina screens because that’s Apple’s proprietary term. This means that very rapidly the majority of screens on which websites are viewed are sporting screens that are much higher resolution than they were designed for.
One of the main ways this is evident is when images are used in the design. Images that were perfectly crisp and clear at regular resolutions will look gummy or blurry on a Retina screen (see image of cute kitty above). To combat this, it becomes necessary to create two versions of your images, one that you serve to regular display resolutions, and one twice as large that you serve to Retina displays. A little CSS-fu with your media queries will allow you to make sure the right version of the image is showing up in the right place.
An even better way to get around this problem is to avoid images all together whenever possible. Icons, illustrations and other non-photographic design elements can be created using SVG files instead of images. SVG is a vector file format that can be stretched to any size without degrading in quality. Any element you create as an SVG will look good even if your screen is the size of the side of a building.
Need a new website that looks good on Retina screens, or have an older website design that was created without taking them into account? Give the Solamarites a shout!