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.
THE BASIC IDEA OF RETINA WEB-DESIGN
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.
BUT WHY SUPPORT RETINA DEVICES
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)
VERY FEW WAYS TO PREPARE
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 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 ?)
WHAT’S YOUR TAKE ?
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.