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

 

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.

    anonymouse

  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 therapywarsaw.com).

    anymice

  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 htmlcut.com.

    Quinn

  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.

    spectr1701

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

    Clippingimages

  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 htmlcut.com wish you all the best in 2014!

    Alita

  14. You got a very great website http://www.htmlcut.com. Glad I noticed it through yahoo. Wish you all the best in 2014!

    Harriett

  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 comment

*