“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
• Designing for Retina Display
• Images for Retina Display
• Opinions
• MacBook Pro Retina Display

Some Basics

1). Retina display
http://en.wikipedia.org/wiki/Retina_display
by Wikipedia

2). The Effect of Retina Display on Web Design
http://www.brandbuildercompany.com/blog/2012/06/14/retina-display-effect-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]
http://www.cultofmac.com/173702/why-retina-isnt-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
http://coding.smashingmagazine.com/2012/08/20/towards-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
http://designshack.net/community/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
http://miekd.com/articles/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
http://mobile.smashingmagazine.com/2010/11/17/designing-for-iphone-4-retina-display-techniques-and-workflow/
by Marc Edwards

4). Designing for Retina display, part two
http://bjango.com/articles/designingforretina2/
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
http://garybacon.com/post/responsive-design-for-retina-displays-on-ipad-and-iphone/
by Gary Bacon

6). Designing for the Retina Display (326ppi)
http://www.lukew.com/ff/entry.asp?1142
by Luke Wroblewski

7). A tip for designing for Retina displays
http://www.commonagency.com/blog/2012/05/a-tip-for-designing-for-retina-displays/
by Ben Childs: “A new trick.”

8). Designing for the Hi-Res iPad Retina Display
http://www.brandaiddesignco.com/blog/designing-for-hi-res-ipad-retina-display/320/
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
http://www.studiopress.com/design/retina-display-design.htm
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
http://menacingcloud.com/?c=highPixelDensityDisplays
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
http://mir.aculo.us/2012/06/26/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
http://www.inserthtml.com/2012/09/designing-retina-devices/
by Johnny Simpson: “Designing for such a high resolution however, can become a little more tricky than you would expect.”

13). Designing for Retina
http://realmacsoftware.com/blog/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
http://css-tricks.com/snippets/css/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
http://designbeep.com/2012/09/13/a-collection-of-free-retina-ready-navigation-bartool-bar-and-tab-bar-icons-for-app-developers/

16). Cross Browser Retina/High Resolution Media Queries
http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-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
http://webdesign.tutsplus.com/articles/general/improving-image-quality-on-the-retina-display/
by Connor Turnbull

2). Tips and tricks for Retina images in responsive web design
http://www.netmagazine.com/features/tips-and-tricks-retina-images-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
http://mattstow.com/responsive-and-retina-content-images-redux.html
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
http://veerle.duoh.com/design/article/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
http://retinaJS.com
“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)
http://benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4/
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?
http://boagworld.com/tumblog/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
http://blog.netvlies.nl/design-interactie/retina-revolution/
by Daan Jobsis: “A smaller filesize AND a better quality on both screen types.”

8a). Retina revolutie follow up
http://blog.netvlies.nl/design-interactie/retina-revolutie-follow-up/
by Daan Jobsis

9). Optimising for Retina: 10 essential tools
http://www.netmagazine.com/features/optimising-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
http://line25.com/tutorials/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.”

Opinions

1). Will the Retina Display Influence Web Design?
http://www.technologyreview.com/view/428381/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?
http://www.netmagazine.com/news/do-web-designers-need-retina-display-122067
by Craig Grannell: “Developer Marco Arment argues high-res displays soon to be commonplace.”

3). Do web designers need retina displays?
http://www.creode.co.uk/blog/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’
http://www.netmagazine.com/news/developers-foresee-retina-war-122086
by Craig Grannell: “1x design could be ‘taxed’ or dismissed as an annoyance.”

5). The Retina War is upon us
http://blog.wells.ee/retina
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
http://www.bluetrainmobile.com/blog/responding-to-retina/
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
http://layersmagazine.com/what-you-need-to-know-about-the-macbook-pro-rentina-display-for-photoshop-lightroom-and-photographers.html
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
http://www.apartmenttherapy.com/working-on-a-retina-laptop-in-a-non-retina-world-174049
by Joelle Alcaidinho

3). Where To Find Great Wallpapers For Your New MacBook Pro’s Retina Display [Gallery]
http://www.cultofmac.com/177633/where-to-find-great-wallpapers-for-your-new-macbook-pros-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.