Wednesday, 3 February 2016

what does retina display mean for web design?

I want you to clearly understand what Retina Display is. In the simplest of terms, it means a high definition display, that’s it. Also, Apple products are not exclusive to this type of display. Retina Display is simply Apple’s term for is but other phones, tablets and monitors too have higher quality displays. But, because these displays are being widely implemented and used, it is more than ever important to create websites and apps that support these displays.
With that said, let me explain to you why Retina ready images and Responsive Web Design go hand in hand and how to create such images for Responsive Web Design.

What does Retina mean?

Retina Display is Apple’s brand name term which refers to a liquid crystal display that displays pixels at higher density. A simple visualization will explain this concept well so take a look at the image below which compares the pixels between Retina and a standard definition display. In Retina Displays, you get double the pixels in the same amount of space as you would with a traditional display. This is why icons or text on an iPad 2 looks blurrier then on iPad 3.

The dilemma

Designer and developers now have to accommodate different types of displays. This means two things:  users with Retina Displays will either have badly displayed images on designs that did not include Retina support or the designs that do support Retina, the users will enjoy a high quality, crisp imagery that we all crave and love.