Why should you become retina ready?

[“

<\/p>\r\n

Oh, look! It’s a brand spanking new, shiny technological feature. And it probably helps that it’s being implemented by Apple products. A couple of great sites (like this one) have already started using it. What does it do? Will it be around forever? What does it mean and when or why should I try it?<\/p>\r\n

We’re talking about becoming retina ready. I’ll be honest with you; when I first heard about it, I just threw it to the side. It’s mainly on Apple devices and I figured it was something only they could do. It wasn’t a huge game changer because lots of other people couldn’t affect it. But boy, was I wrong.<\/p>\r\n

Now, I’ve perused a couple of sites and heard from a couple of ​‘experts’ and it seems like there’s a real fascination with being retina ready. Let me also say, the fascination is mainly for web designers and artists who care about things looking good. I’m sure if you asked the average person (without an Apple device) what retina-ready is, they’d look at you like you had two heads. However, that doesn’t mean that it won’t be something that essentially turns out to be great and take over the world soon.<\/p>\r\n

<\/p>\r\n

So…what is it?<\/h1>\r\n

<\/a><\/p>\r\n

When we look at our screens, sometimes we can see the individual pixels. Try taking a look at something like a CSS rounded corner or a really blurry image that’s being blown up. You can see the little tiny squares or dots that are trying to make up the element. Pixels are extremely small, but to a trained eye, like a designer’s, we can just sort of tell. We know when we see pixelation and we know when images and elements are just straight up ugly.\u00a0<\/p>\r\n

The problem wasn’t a huge deal until things like responsive design and the need to fit one thing into several browser sizes came along. Before, you just dealt with it because your browser, whichever you were on, was going to show exactly what you asked it to show. Now with responsive design and the workings of tablets and other devices, I can pinch an image to make it smaller or double tap my screen to increase the size of the page.<\/p>\r\n

On websites that are not retina ready, pages will look awfully pixelated and blurry in their normal state as well as when page sizes are increased. Retina ready websites, along with the devices, allow you to see more pixels per square inch. Therefore, your trained eye sees a very smooth, high quality image or element and no distortion. Becoming retina ready is done with some CSS and Javascript. However, for images, they are created at least double the size that they’ll be shown online.<\/p>\r\n

<\/p>\r\n

Benefits of retina ready websites<\/h1>\r\n

1. Sharper images:<\/strong> As we’ve already talked about, the entire idea of the retina ready technology is to give us sharper images. The idea behind retina ready is to create something that would look as sharp as it would in print. Colors are vivid and bright because you get more pixels per inch on retina ready devices. It’s essentially like high definition for your laptop, phone or tablet.\u00a0<\/p>\r\n

2. Better aesthetics for responsive:<\/strong> Again, we’ve touched on the idea that you get better picture quality. What some may not know is that creating retina ready website allows for sharper fonts. When we sometimes zoom into webpages on websites, we end up stretching out some fonts that aren’t able to be stretched. Many of these fonts aren’t to be used in such a way and give us the same pixeled look we may get from some images.<\/p>\r\n

Retina ready websites help smooth over fonts. There are also some fonts that are prepared for retina ready sites and will maintain their image quality when zoomed in (or even out) on retina devices.<\/p>\r\n

3. Designing with even more detail:<\/strong> I believe minimalism has become widely popular because it’s a simple concept to understand and design for. The idea is to remain as clean as possible and rid yourself of the fluff. Every so often, there are subtle details thrown into these types of themes, as well as others that are sometimes hard to see on regular screens. Retina devices are not only helpful in their high quality image projection but also in the brightness of their screen.<\/p>\r\n

4. 30 million people think your site is ugly:<\/strong> Your web site is suffering right this minute if you are not retina ready. Over 30 million users have purchased these Apple devices that have this sharper screen feature. When they view your site, images are pixelated, fonts are tough to read and overall there’s probably a bad aesthetic. If you know your audience is probably the same audience that has these devices, it may be time to go ahead and prepare your site to become retina ready.<\/p>\r\n

<\/p>\r\n

Tutorials and resources<\/h1>\r\n

Retina.js<\/h2>\r\n

Retina.js is a JavaScript script that checks your server to see if you have high resolution pictures available on your website. For example, if you originally have picture.jpg available, to make it retina ready, they will look for that picture that you uploaded that’s twice the size, and should be named accordingly. This takes care of much of the issue with high-res pictures.<\/p>\r\n