Retina Display – The Future of Web Design. Internet Overview

“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 displays? 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
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?”

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). Why Retina Isn’t Enough [Feature]
http://www.cultofmac.com/173702/why-retina-isnt-enough-feature/
by John Brownlee: “The new Retina MacBook Pros are only Apple’s first step towards the living display of the future.”

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.”

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/

Related Posts: