April 25, 2013 TXAD

Retina and Web Design

In this day and age, one does not simply create a website. They have to create a website to work with a plethora of different devices. One feature that hasn’t been discussed a lot is how websites will respond on devices with a Retina display.

Unless you own or keep up with Apple devices, you probably don’t know what Retina is. Even if you have an Apple device or two, you still probably wouldn’t know what Retina is. That might not exactly be a bad thing as long as the average consumer appreciates the extra sharpness of the screen and factors that into buying an Apple computer or i-device. However, a web designer should eventually factor in Retina into their designs if the technology catches on any further.

Basically, a Retina LCD display has a higher pixel density than the majority of other displays in other devices. What that means is that pictures and text will show up much sharper on a device with Retina, versus one without. A Retina display is supposed to have a high enough pixel density that the human eye should theoretically not notice any pixelation from a normal viewing distance. In order to better achieve this, apps and widgets are doubled in width and height to compensate for the smaller pixels.

For a website to be “Retina-ready” just requires a little Javascript, CSS, and images that are twice the size as what they normally would be (they will be scaled down to the proper size for everyone else). This definitely goes well with a responsive design.

While 30 million people have bought Apple devices with Retina displays, that number is only a fraction of the total people online. While definitely not a required add-on, having your site Retina-ready still shows that you’re ahead of the game and providing an enhanced experience.