What is Retina Ready Web Design?



What is Retina Ready Web Design?

What is Retina Ready Web Design?

Time passes, society evolves and technology finds a new way to influence our lives each day that passes. Each aspect of our life has been made easier or more enjoyable thanks to devices that form part of our routine and one of those aspects is our perception of life. This is a literal thing; the quality of the images that we see with our own eyes is improving as well as the devices that display them, for this reason, Apple developed Retina Displays.

Retina displays are a trademark that Apple uses to refer to a display which counts with a high density of pixels per unit of area. The most noticeable advantage of these displays is quality. As pixels are smaller and more abundant than in normal displays, the detail is outstanding and the images look sharp and clean like they were printed instead of appearing pixelated.

Is there a disadvantage? Yes. Not every display has the same pixel density that a Retina display has, and a great amount of websites have programmed their layouts considering the number of pixels the images will occupy, that means this kind of devices will portray small images. This disadvantage can be defeated by working on Retina Ready Web Design.

As text is able to adapt to higher resolutions but images tend to stay stationary, the main goal of the developer by using this kind of design is to fill it with flexible content like images on SVG format or duplicate ones for two different versions of the website. Luckily, fellow designer, there are many ways to make a website retina ready. Here, a few ones:

  • Scalable Vector Graphics: This format that is often used to create logos can be used with other sections of your website as well. These have the information to display the features that shape an image like colors, segments and shadows. Using scripts such as SVGeezy will allow your website to render nicely in older browsers. Nevertheless, creating a SVG isn’t piece of cake; you might want to ask for help from a skilled designer or become one yourself in order to make one that you can include on your website.
  • JavaScript: Implementation of JavaScript can avoid some headaches as some browsers don’t support CSS3. There are some libraries able to detect if a website is Retina Ready, like retina.js and foresight.js that will give you the tools to modify your code in order to replace normal images with counterparts that count with higher resolution.
  • CSS3: This follows the premise of media queries to check if your visitor is browsing through a retina display. The image is replaceable with a background URL setting that will only show for this kind of visitors. Newer browsers react quickly as they support this implementation.
  • Fonts: As said before, fonts are able to adjust their size to whichever display, so you might want to replace your icons with these ones. You need to be aware fonts lose detail, though.