The Retina War is upon us.

In my opinion Photoshop is absolutely inappropriate tool in this new era. It was never really meant to design user interfaces. Designers should finally stop thinking in terms of pixels as they don't really make any sense if your application will be shown on screens with more than one kind of pixel density.<p>There should be no problems with using vector graphics on high resolution screens and it will look much better on lower resolution screens than downscaled image. Not only will vector graphics make support of various screen densities easier it may also (significantly) decrease size of assets. Currently on iOS devices developers bundle two images for same purpose (1x and 2x). It could have been one vector image instead.<p>Please stop using tools which were made to edit images and start using ones which are made to design interfaces.

The solution is what it always was. Design in units like 'em's, don't override the user defaults, and let the page scale however the end user wants. This not only accomodates the retina/non-retina split, it lets users with bad eyesight increase the font size and still be able to read things.<p>Images? That's a bit harder, but it's not the end of the world. Vector images are useful here, but for higher detail raster images, designing in double size and scaling down for ordinary screens gets you a long way. For smaller icons, it might pay to have two versions, and I don't see a way around that for a while. Gnome has handled this for a long time by having specific sizes of icon that it tried to snap to, as well as vector fallbacks for when none of the sizes were appropriate.<p>The important thing is to give up on pixel perfection. Just let the user chose the size, and don't mess with their defaults.

QUESTION: What makes vector graphics based UI's so hard?<p>I am not a UI designer, so I am ignorant. Please educate me.<p>Several other posters have mentioned the option of moving away from raster graphics, and indeed this was my own first thought. I remember using IRIX back in the glory-days of SGI. For those who have no idea what I'm blathering on about, IRIX was a professional workstation OS that had en entirely vector based UI. Yes, almost two decades ago an OS existed that was <i>immune</i> to the retina problem. Pause for a moment and let that sink in.<p>IRIX was actually one of the first GUI-based OS's, and SGI's use of vector-based UI elements probably arose from specific needs SGI faced. I can only speculate on what they were, but one thing they had plenty of was raw power. SGI workstations were <i>very</i> nice in their day! However, the average smartphone built these days probably has more power than all but the last SGI workstations, and perhaps even them too. Processing power is therefore likely not the issue. In fact, given that most desktop OS's already render your desktop in a 3D environment (OSX, Win7, and Linux (depending on what you're running) all do this), vector UI elements may actually be less intensive to draw than raster elements in these situations!<p>Wild speculation: Is it that UI building tools and API's make working with vector graphical elements painful, or are UI designers just ignorant after almost a decade without a major vector-based OS in common use?

It's great that these 2x res displays are becoming more accessible, but the state of web standards is dangerously behind in terms of support for them. Right now, the only way to serve images optimally for the various screens is to have the server attempt to assess the display resolution for the client using either JavaScript or CSS media queries, and then either send different HTML to different clients, with different content linked in img tags, or have exception handling for the CSS images.<p>This is completely broken, as a client that wishes to access various assets might be denied them by the server, which thinks it knows best what's good for the client. This system is also bound to break as clients with unexpected capabilities emerge. Instead, the server should be dumb, making all the assets available, and the client should be making the decision of which assets to request.<p>Apple is the obvious source of expected progress on this front, since they control the retina hardware, OS and browser rendering engine. Others are able to influence this as well. Until <i>someone</i> fixes this broken mess we have now, however, retina users will not be getting widespread support. We can't expect big website operators to put up with the current horrible hacks people are using to support retina displays.

This is hilarious. Pro tip: not all your <i>users</i> are graphic designers. It may be the case that the author, and everyone he knows, has new "retina" products from Apple. That's wonderful. But it can't be taken to represent a broader userbase.<p>It seems to me that the web's mainstream properties are built for workers in large corporations to fiddle with when they should be working. Most of these people have 1280x1024, 96 DPI screens attached to Windows XP or Windows 7 PCs.<p>I expect that to be the case for some years to come.

The article raises the specter of a "1x-tax", along the lines of the "IE7 tax". The difference, of course, is that it's easy and free for people to upgrade their browsers, whereas upgrading the screen is not. As inconvenient as it is for the designers, it would be incredibly bad PR to say, in essence, "Only rich computer users should be using our site".

This change will not be dramatic like this. "Retina Display" is a "very high resolution display". It is not magical. It is not a fundamental technological shift. It is only Apple fanboyism that makes it seem that way.<p>There have been "very high resolution displays" at the front edge of PC tech for decades, and the Internet has scaled slowly but surely to meet our current middle ground (probably approaching 1080p on desktops and something slightly lower on laptops this year). Most of the people here have been using "very high resolution displays" during most of the development of the web, designers in particular. PCs will, of course, reach the resolution of Apple's Retina Display; they'll have to in order to stay competitive. But, it'll happen gradually. Most people don't choose computers based on display resolution. I bought a new laptop a couple months ago, and went to Fry's (after buying online failed three times, and needing to get something quickly)...I bought the <i>only</i> 15" laptop they had with a 1080p display. Literally, it was the display model and they didn't have any others in stock. Consumers buy cheap or buy a brand name. But, educated consumers will keep pushing things forward, slowly but surely.<p>So, yes, in three years, we'll mostly all be looking at "Retina Displays", but we'll just call them "displays". And we will have evolved the web slowly in that direction, just like we've been doing for decades.<p>Proof:<p><a href="http://web.archive.org/web/19970404064352/http://www.apple.com/" rel="nofollow">http://web.archive.org/web/19970404064352/http://www.apple.c...</a><p>Note that on a modern display, these graphics are tiny, and the site itself only takes up about a 5th of the page (if that much). We've "gone Retina" maybe three or four times since 1997, we just didn't have Apple telling us that doubling display resolution was an epochal shift in computing technology and a legion of fans to carry forth the message.<p>Final point: The shift from CRT to LCD was much more dramatic than this shift, and we all made it through. Scaremongering is pointless.

<i>2x scaled from 1x - Bicubic</i><p><i>(Nearest Neighbor produced identical results)</i><p>Sorry, then whatever software you're using to scale it is broken. The image pictured is obviously nearest neighbor; rescale with bicubic and it will look smooth but blurry.

Just to clarify, Retina is an Apple brand for a screen with a significantly increased resolution and high pixel density.<p>Its definitely a brand name, so lets not confuse that. Maybe just refer to the actual pixels per inch or even easier, the screen size/type and resolution. MacBook Pro 2012: 2880×1800<p><a href="http://en.wikipedia.org/wiki/Retina_display" rel="nofollow">http://en.wikipedia.org/wiki/Retina_display</a>

I think that Retina resolution displays will dominate the field in much less time than ten years: Since every mobile device maker has to match Apple I'd bet that by next year every new phone and tablet will feature a higher resolution screen. maybe that won't be 256, but maybe it will be at least 150. Then you can bet that in at least two years you'll see the same thing happen on laptops — and desktops will have to follow within five years.<p>The truth be told: It's sort of shocking to think that we've been using 72/96 for so long, I would have expected this shift to have happened ten years ago.

I'm looking forward to the day when vector defined graphics are the norm and raster graphics are only used for things like pictures and games. There's really not much reason for UI and text to be defined by raster based graphics aside from the ease of creation, in my opinion. Using scalable graphics for layout removes the problems of resolution and DPI.

"but it won’t be long before Retina Cinema Displays replace their outdated siblings"<p>I was honestly surprised with each retina release by Apple starting with the IPhone4. After the initial “aww” of it had passed, it was easier to wrap your head around its production due to its relatively small screen. Now we have 15” macbook pro’s with retina. Apple released a professional production machine for its retina ecosystem to thrive to aid its consumer mobile devices experience. This is exciting for us power users and geeks for sure.<p>A retina thunderbolt display(twenty seven inch), seems like quite a technological hurdle,. How much will you pay? $2000 for the screen? They could release such a product, again for professionals, to service professionals creating the content for their other devices to consume. You will pay for it though.<p>Does the average kitchen need retina imacs and will the market speak?

This is a ridiculous post by some random guy who is pro-Apple.<p>Do you know how long it took for 1024x768 to significantly vanish? And you're talking about retina's in 3 years. Lulz.<p>The world is huge my friend, and it includes a major portion where people don't (or even want to) own Macs and many of them are still on Legacy hardware. By many, I mean MANY. In three years, 1920x1024 might become fairly standard, but to even think of retina as a standard is definitely an overkill. I'm surprised this is even posted on HN.<p>Oh wait..its the same guy who wrote it..

I enjoy the high pixel density displays on small devices like iPhone 4. However the iPad 3's display doesn't really interest me. I just don't hold the device that close to my eyes.<p>Snappy, responsive UIs are the most important thing to me. I'll trade the animations, rounded-corners, gradients, drop shadows and bouncy effects for a more craigslist-like UI. Something that's simple, basic and functional.

Does anyone else find the 1x and 2x conventions confusing? I never realized it till I got a bit confused reading the article.<p>Also: I'm a bit surprised at the reverence Dustin Curtis is given for the pixel fitting article.

What the cynic in me finds interesting in Retina displays is how people will tend to hit their data caps more quickly on their mobile plan merely because they are downloading more pixels.

Easy solution: Use an external monitor to verify things still look good at 1x.

I welcome the Retina Revolution (and look forward to its progression beyond the Apple world), despite the messy consequences. Three things plague my eyes and psyche:<p><pre><code> 1) 1080p as a least common denominator 2) composite analog video feeds 3) low bitrate MPEG/JPEG/iDCT compression artefacts </code></pre> Let the reader understand.

A nitpick, but this author is absolutely using bicubic wrong. The only case where bicubic filtering appears identical to nearest neighbor is if the entire image has constant color.<p>Author probably forgot to turn off color indexing or something trivial.

Ironically... when I visited on the link on my iPhone, the text appeared pixel doubled. If I go back, it appears correct. No idea why. :)

I really think the @2x hack is absolutely revolting.<p>sigh...

He's designing a website in Photoshop and complaining 800px is too small. Is that serious?

These svbtle blogs render unfocused on iPad 1 in portrait orientation - how annoying.

Isn't this something an asset pipeline should be handling?

This guy's problem is that he thinks pixel-fitting is an appropriate technique at any resolution: it's not.