Why should you become retina ready?

Default avatar.
April 25, 2013
Why should you become retina ready?.



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


So…what is it?<\/h1>\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


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


Tutorials and resources<\/h1>\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

Kendra Gaines

Kendra Gaines is a freelance designer from Virginia, USA. Connect with her.

Read Next

AI Changes Everything and Nothing

The marketing frenzy surrounding the recent flood of AI-powered apps and services has caused some observers to question…

15 Best New Fonts, March 2023

Fonts are one of the most critical tools in any designer’s toolbox. With clever use, you can transform a design from hu…

20 Best New Websites, March 2023

We have another exciting collection of the best new sites on the web for you. In this month’s episode, there are severa…

Exciting New Tools for Designers, March 2023

We have invoicing apps and scheduling tools. Some resources will save you the trouble of hiring a designer or developer…

Free Download: Budget Planner UI Kit

Designing an onboarding process can be tricky; there are so many different options, and if you get it wrong, you could …

3 Essential Design Trends, February 2023

There’s a common theme in this month’s collection of website design trends – typography. All three of these trends show…

Free Download: Education Icons

Icons are essential for successful web design. They provide an eye-catching, unobtrusive way to communicate important i…

15 Best New Fonts, February 2023

The fonts you embed in your website transform the design and can mean the difference between an extraordinary brand exp…

Unlocking the Power of Design to Help Users Make Smart Decisions

Users are faced with decision-making on websites every day. The decision-making process can be far more complex than it…

20 Best New Websites, February 2023

The quality of websites in 2023 has moved up a gear, with designers cherry-picking trends as tools, embracing new ideas…

AI’s Impact on the Web Is Growing

Despite the massive strides tech has taken in the last few years, we rarely see a week as tumultuous as this. When your…

Exciting New Tools for Designers, February 2023

No matter what you’re working on, you can guarantee that there’s a cool app, resource, or service that will help you do…