HTMLcut blog

About PSD to HTML Conversion and More

Retina Display – The Future of Web Design. Internet Overview (Updated)

Designing for retina display - What is retina for web design“Retina Display” sounds like a movie or science fiction novel name. But is it an adventure film with a happy end or a new challenge or even drama? That is the question.

What does Retina display mean for web design and development? How to optimize your website design for Retina screens? How to prepare images for it? These all and much more you can find in the recent articles from the web design community gathered below. Hope you’ll find this round-up useful.

Some Basics

1). Retina display
by Wikipedia

2). The Effect of Retina Display on Web Design
by Brian LePore: “Everybody loves pretty pictures. Retina display can make your pictures pop. But for everything there is a cost. What does retina cost you?”

3). Why Retina Isn’t Enough [Feature]
by John Brownlee: “Apple’s new MacBook Pros have absolutely great displays, but they need every single pixel they have, because the truth of the matter is that Apple’s got a long way to go before it catches its display tech up to the incredible power of human vision. And that’s a good thing, because it means we’ve got a lot to look forward to.”

4). Towards A Retina Web
by Reda Lemeden: “…let’s briefly cover some basic notions that are key to understanding the challenges and constraints of designing for multiple display densities.”

Designing for Retina Display

1). Designing on a Retina Screen: My Thoughts on the Retina MacBook Pro
by Joshua Johnson: “Will it help or hinder the industry? Can you really do design work on that thing if you’re designing for non-retina screens? Today I’m going to tell you all about my experience with the machine that threatens to change the way you do your job.”

2). Using CSS Sprites to optimize your website for Retina Displays
by Maykel Loomans: “…the extra layer of complexity that CSS Sprites brings to your assets was not always worth it. But with high-resolution screens, such as Retina Displays, becoming more and more prevalent, there is a new big reason to use them.”

3). Designing for iPhone 4 Retina Display: Techniques and Workflow
by Marc Edwards

4). Designing for Retina display, part two
by Marc Edwards: “Answers to some of the most common questions I’ve been asked since writing the initial Retina display article and Smashing Magazine article.”

5). Responsive Design for Retina Displays on iPad and iPhone
by Gary Bacon

6). Designing for the Retina Display (326ppi)
by Luke Wroblewski

7). A tip for designing for Retina displays
by Ben Childs: “A new trick.”

8). Designing for the Hi-Res iPad Retina Display
by Jeremy Mansfield: “By following some of the below tried and true best practices, you too can can ensure your content is easily readable on any device, no matter the resolution of the display.”

9). How to Design for Apple’s Retina Displays
by Josh Byers: “Personally, I want my graphics to look as crisp and clean as a new dollar. Aside from my own preference, ask yourself this: What if, in the next year or two, that pixel density doubles again? What if it triples? We’d have a real problem on our hands.”

10). Optimising for High Pixel Density Displays
by Edward Cant: “In this article we’ll discuss a maximum quality, minimum effort CSS and JavaScript approach to web sites/apps that cater for high density pixel displays.”

11). Flowchart: how to retinafy your website
by Thomas Fuchs: “With Retina screens all around us, it’s time to take the plunge and retinafy your website or webapp. Here’s the process I use (for both mobile and desktop) in the form of a flowchart for some more sanity in all of this.”

12). Designing for Retina Display
by Johnny Simpson: “Designing for such a high resolution however, can become a little more tricky than you would expect.”

13). Designing for Retina
by Chris: “I quickly managed to work out a way that felt comfortable designing Retina apps for the Mac, and one that could also crossover to iPhone and iPad app design.”

14). Retina Display Media Query
by Chris Coyier: “Let’s say you had three major breakpoints in a design. This design also had a large background graphic and you wanted it looking it’s best on any screen (retina or not) and not waste any bandwidth.”

15). A Collection Of Free Retina-Ready Navigation Bar, Tool Bar and Tab Bar Icons For App. Developers

16). Cross Browser Retina/High Resolution Media Queries
by Brett Jankord: “…I still see a lot developers using verbose media queries for retina/high resolution displays so I figured I would write up my own post. …Retina/high resolution media queries work great across a wide range of different devices and different browsers, though if you really wanted to make your site look great on the widest range of retina/high resolution displays and browsers, I’d look at using icon fonts, SVG images and compressive images.”

Images for Retina Display

1). Improving Image Quality on the Retina Display
by Connor Turnbull

2). Tips and tricks for Retina images in responsive web design
by Christopher Schmitt: “Christopher Schmitt explains how to keep users of both Retina and traditional screens happy, by delivering adaptive and flexible images to suit all resolutions.”

3). Responsive & Retina Content Images Redux using Media Queries & a base64 spacer GIF
by Matt Stow: “…it even works with serving “retina images” to the new iPad. All it requires is a blank 1×1 GIF (converted to base64), and then setting that image’s background to whatever image needs to be served along with background-size: contain.”

4). Exporting Retina designs from Photoshop with Layer Cake
by Veerle Pieters: “Wouldn’t it be great if we could export, 50 or more icons, or other images, all at once in a matter of seconds?”

5). retina.js – Retina graphics for your website
“retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.”

6). How to serve high-resolution website images for retina displays (new iPad/iPhone4)
by Ben Frain: “This article covers how to serve high resolution images on your website for users of high resolution ‘retina’ device screens.”

7). How should we deal with retina displays?
by Paul Boag: “Do you recommend increasing image resolutions or creating image sets to compensate for the Apple iPad Retina Display? This is a really tricky one and I would love to hear your take on it in the comments.”

8). Retina revolution
by Daan Jobsis: “A smaller filesize AND a better quality on both screen types.”

8a). Retina revolutie follow up
by Daan Jobsis

9). Optimising for Retina: 10 essential tools
by Craig Grannell: “Short of ignoring hi-res displays entirely, your only option is to embrace new techniques and workflows that enable you to efficiently output suitable content. What follows is a list of 10 useful tools, including scripts, techniques and software, which should make this task easier for you.”

10). How to Create Retina Graphics for your Web Designs
by Chris Spooner: “Let’s take a look at how you can create special retina graphics for your website so your design looks crisp, sharp and clear on those powerful screens.”


1). Will the Retina Display Influence Web Design?
by David Zax: “…one of the unintended consequences of the MacBook Pro’s new high-res retina display: an epidemic of headaches for web designers.”

2). Do web designers ‘need’ a Retina display?
by Craig Grannell: “Developer Marco Arment argues high-res displays soon to be commonplace.”

3). Do web designers need retina displays?
by Andy: “If you’re a web designer, you really, really need to get a Retina MacBook Pro…”

4). Developers foresee ‘Retina War’
by Craig Grannell: “1x design could be ‘taxed’ or dismissed as an annoyance.”

5). The Retina War is upon us
by admin: “The problem gets worse – I can’t design for 1x on my Retina Macbook Pro. It’s impossible.”

6). Responding to Retina: Mobile Design for High-Res Displays
by Ryan Boye: “…just because they can make higher resolution screens doesn’t mean that the mobile web is ready to handle them.”

MacBook Pro Retina Display

1). What You Need to Know About the MacBook Pro Retina Display for Photoshop, Lightroom And Photographers
by Matt Kloskowski: “One of the questions I’ve been getting asked a TON lately is about the new MacBook Pros with Retina display and how they work for Photoshop, Lightroom and for photographers in general. Well, I’ve been kicking the tires on one for about a week now, so I thought I’d give you my initial thoughts.”

2). Retina Laptop Tips for a Non-Retina World
by Joelle Alcaidinho

3). Where To Find Great Wallpapers For Your New MacBook Pro’s Retina Display [Gallery]
by Alex Heath

Please note:
To find more (the most fresh) links on designing for Retina displays, follow our Pinterest board
Retina Display Web Design.


Comments (18)

  1. Interesting, but realistically there’s no need to design for Retina. Looking at my site stats the number of people using Retina-type displays is so low that it is actually zero. As in not a single person has accessed any of my sites using a Retina display, even though 25% of my traffic is mac-based.

    I’ll start thinking about Retina support once traffic using such high resolutions tops 5% – until then it’s a waste of time and money.


  2. That is one thing. The other is that even when substantial percentage of users adopt high resolution displays the web can be there in a big part. I mean vector based design with SVG and @font-face CSS properties (like


  3. Pingback: Fast, Easy Web Design! » Blog Archive » Retina Display The Future of Web Design? Overview PSD to …

  4. Hay,
    Nice article post

    Mian umair

  5. I’m very happy to find your website. Thank you for your time.

    web design chicago

  6. Appreciate you sharing this article. Really great.

    web design

  7. Regards for sharing the information with us on


  8. Pingback: Tweet Parade (no. 40 Sep-Oct 2012) | gonzoblog

  9. To Anonymous #1: Are you factoring in other smartphone and tablet manufacturers that use high-resolution displays. Most people do take into consideration that the term “Retina Display” is just a marketing ploy by Apple to make consumers think they have something special. The Droid RAZR HD has a pixel density of 312 ppi making it not as high as the iPhone, but definitely higher than the iPad. The majority of smartphones on the market have high-density displays.


  10. Excellent post, thanks for sharing this nice blog.


  11. Pingback: Tweet-Parade (no.30 Jul 2012) - The Best Articles of Last Week | gonzoblog

  12. Fabulous post! Thanks a lot for sharing the prospects of web design in the near future. really helpful and informative.

    Derick Williams

  13. I am always investigating online for tips that can benefit me. Thanks wish you all the best in 2014!


  14. You got a very great website Glad I noticed it through yahoo. Wish you all the best in 2014!


  15. I want to start a blog where i can just type anything that comes to mind. Kind of like a diary but not as personal. Any good websites where I can start my own blog for free and where lots of people see it???? Please and much thanks appreciated!! :).

    Yung Leep

  16. At this time it sounds like WordPress is the best blogging platform out there right now. (from what I’ve read) Is that what you are using on your blog?

    pin insulators

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>