What is Retina web-design & why you should implement it

As we all know, Apple has been a leader at everything they do, from ios to Macbook as well as it’s operating system, OSX. Although, you might have read this before, I wanted to talk about it. That is Retina display, that apple has brought with it’s retina macbook pro.With it’s whooping 2560×1600 px in it’s 13 inch version as well as 2880×1800 pixels in it’s 15 inch model, Apple has definitely brought a drastic change. And, this change has reflected in Web-Design as well.


You might have seen, when you zoom in too much in a simple, jpeg image, you start seeing it’s pixel (the little squares with a color fill). The same lies in web-design as well. When you visit your website in a retina device (for example, Retina macbook pro, ipad 3, iphone 5, etc. ), you can see, that if you are not retina ready, like your images, you can see the pixels and dithered text. Although, you might want to overlook it, Retina Web-Design is the future.

The basic idea of retina web-design is that you create your website (images, text, etc.) in such a way that it is clearly and sharply visible in the retina devices, with at least 4x the amount of pixels you would get in your 15-inch laptop or 17 inch LCD monitor.


This would be a thought arising in your mind “Why should I support Retina Devices, I can work without it”. You are wrong. To prove it, I’ve put together a list:-

  • It’s a new era of Web-Design. And, if you’re not supporting Retina devices, you are lacking behind the times.
  • Also, by not providing support, you are lacking to provide an awesome user experience on your website. This has many negative effects, like customers turning you down, reduced pageviews/visitor, reduced sales, etc.
  • For a few of you, Retina Web-Design brings a whole of a new opportunity to revamp your website (Admit it, you were too lazy to redesign)


I’ve put together a small list in ways which you can prepare for your next web-design project (or your current website) to be retina ready A.K.A. future ready:-

  • Retina.js (A javascript library for serving Retina Graphics on your Website):  This is a javascript library which makes your work on retina super smooth. All you have to do is just link up the library and provide the two versions of your image (normal and 2x) and voila! the javascript library will serve it up on retina screens.
  • Retina display media queries: This is a link to a snippet by CSS-Tricks which shows you how you can use media queries to serve 2x images based on the pixel ratio of the viewers device. Very handy, as it saves you a lot of bandwidth by not unnecessarily downloading both the images.
  • How to create Retina Ready graphics in Photoshop CS 6: If you don’t want to click that link (lazy), the basic method you can apply in Photoshop CS 6 is that you increase the pixel ratio while creating a new document and then, as usual, save it for the Web (You do that, right ?)


So, I’ve discussed Retina Web-Design in this article. Also, I will be providing a lot more examples, tutorials, etc. on Retina Web-Design. But what I want to know is that what do you think about Retina Web-Design ? Will it change the way we design websites ? If yes, in a good way or bad ? Tell me your thoughts down below in the comments. I’m waiting to hear from you.

Enter your email address to follow this blog and receive notifications of new posts by email.

2 thoughts on “What is Retina web-design & why you should implement it

Add your Awesome voice. Let's have a meaningful conversation. And remember, don't be a spammer (We hate 'em).

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s