If you have ever browsed the Web on an Apple device with a Retina Display, you have probably seen websites with fuzzy graphics and “pixel-y” text. It is unattractive but understandable. Websites are still being built primarily for standard displays, because that is how the vast majority of people view the Web.
With the increasing popularity of devices with Retina Displays, Web development specialists are encouraged to find ways to make their websites more Retina-friendly without raising the amount of labor. At Etna Interactive, we build all of our responsive websites to look beautiful on high-resolution mobile phones. Due to the emergence of iPads and MacBook Pros with Retina Displays, it is worth looking into basic ways to apply the same rules to full desktop websites.
Media Queries
CSS3 media queries give us the ability to detect whether our website visitor has a Retina Display. This is useful because we can then provide additional styling options specific to those visitors. Typically, high-resolution images are called to replace the standard-resolution images, so graphics and logos look sharp.
The Power of CSS3
What better way to fix blurry images than avoiding the problem altogether? CSS3 provides powerful properties that let us use gradients, drop shadows, rounded corners, animations, transparent colors, and more. Using CSS instead of images to build a website is resolution-independent by nature, and faster than telling a browser to download an image. However, it is important to remember that older versions of Internet Explorer do not understand these CSS3 properties. Having fallback options for these browsers is easy, but the design will be more rudimentary in IE8 and below. Luckily, users of old IE browsers are accustomed to it!
Leveraging Fonts
In my last blog post, Beautiful Web Typography, I discussed Typekit, which is a service that we use at Etna Interactive to deliver fancy fonts. At this point, we do whatever possible to avoid using images of text in place of actual text. This is because images are defined in pixels, and their sharpness depends on the resolution of the screen it is viewed on. Typekit allows us to use a variety of fonts without relying on images, and the results will look sharp on any screen.
Font Awesome takes this idea a step further. It is a font composed of 361 great, commonly used icons, similar to the concept behind Wingdings and Webdings. The icons can be any size and color and look sharp as ever. In the past, we might have used images for things such as a print icon or an email icon, but Font Awesome is an amazing alternative.
Flat Design
All of the kids are talking about “flat design,” the biggest trend in user interface these days. Have you upgraded your iPhone to iOS 7? Apple’s latest operating system for iPhone is a prime example of flat design. Flat design is clean, minimal, and non-textured. There are no dimensional effects. The goal of relying on CSS as much as possible is much more attainable in the realm of flat design. This means we don’t need to put forth any additional effort to make a website Retina-friendly.
Etna Interactive produces gorgeous websites, thanks to our talented team of designers. As a developer, my job is to make these designs look as great as possible on a large variety of devices, operating systems, and browsers. Retina Displays make this process even more complex, but there is no denying that a well-built, Retina-friendly website is absolutely stunning and satisfying to create.
Leave a Comment