
The Retina War is upon us. - wells-riley
http://blog.wells.ee/retina
======
densh
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.

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.

Please stop using tools which were made to edit images and start using ones
which are made to design interfaces.

~~~
rorrr
HTML doesn't support vector images well. Yeah, you have SVG in modern
browsers, but which one is easier?

    
    
        <img src="logo.png">
    

or

    
    
        <embed src="http://upload.wikimedia.org/wikipedia/en/4/4a/Commons-logo.svg" type="image/svg+xml" />
    
        (fails in IE8- and IE9 quirks)

~~~
paulirish
You can do <img src="logo.svg"> in IE9 and every other browser. In fact, you
can do an inline <svg> image inside of your HTML in all those browsers as
well. The <embed> is long gone.

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

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.

The important thing is to give up on pixel perfection. Just let the user chose
the size, and don't mess with their defaults.

~~~
sounds
I really like what you're saying.

I don't think designers have to give up on "pixel perfection" - well, they
don't have to give everything up.

We already have an enormous gamut of displays for any website. Forcing iOS
users to a broken "mobile website" is never going to satisfy the designers who
care about being pixel perfect, so they were grappling with these issues
already.

And I can't say it enough: we're finally getting past 1920x1080 screens again.
CRTs had higher resolutions a decade ago.

Some of us _do_ have good enough eyesight, and some of us _do_ work with
videos that big (and the associated images) - yes, there's the Apple 30"
Cinema Display, but I seek real competition between manufacturers.

------
fjorder
QUESTION: What makes vector graphics based UI's so hard?

I am not a UI designer, so I am ignorant. Please educate me.

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 _immune_ to the
retina problem. Pause for a moment and let that sink in.

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 _very_ 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!

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?

~~~
wmf
There's really nothing hard about using vectors; they'll just be blurry
because they're probably not pixel-fitted. Also, complex icons are much
smaller and faster to render in raster format.

~~~
mitchty
One other facet of vector graphics, they don't always look that great at all
scales.

I seem to recall a graphics designer blog that compared a vector to an image
that was tweaked at the same scale resolutions. The differences were
staggering. I don't think vector graphics are a panacea anymore. I'll see if I
can find the link, was rather eye opening.

~~~
nathos
Relevant links in this comment: <http://news.ycombinator.com/item?id=4252640>

~~~
fjorder
One of the big things I noticed in the first link there was that a SVG icon
scaled to different sizes didn't look as good as a hand-optimised set of
raster icons, largely due to issues that could conceivable be addressed. e.g.
When the SVG icon was scaled, the lines defining the shape also scaled up in
thickness so that they appeared far too chunky in the largest version. What if
line-width were kept constant as the SVG was scaled?

While that link makes me appreciate that SVG speficially might be hard to work
with and that simply scaling everything proportionally might not make for good
icons across all sizes, I remain unconvinced that vector icons are hopeless.
Perhaps SVG's have the ability to do what I describe above, or perhaps we need
a more powerful vector graphics format to work with.

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

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.

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

~~~
ksherlock
Safari in iOS 6 and Mountain Lion allegedly have support for -webkit-image-set
to specify 1x and 2x imagesin your css.

background: -webkit-image-set( url(...) 1x, url(...) 2x) ... ;

~~~
WiseWeasel
That's 1) just for CSS, 2) incompatible with border-image and list-style-image
properties and 3) horribly inefficient, with ugly syntax and a bunch of
duplicated effort for developers (since filenames for 1x and 2x image variants
are typically identical except for a few extra characters used site-wide for
all 2x versions, there should be a way to allow developers to specify only
these unique characters one time and avoid that extra work when possible).

------
hapless
This is hilarious. Pro tip: not all your _users_ 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.

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.

I expect that to be the case for some years to come.

~~~
swombat
Speak again in 3 years.

Today, I am a geek (not really a designer) and 2 out of 3 of my devices have
retina displays already (iPhone and iPad). Within much less than 3 years, all
my devices will. Within 3 years, there will be no Apple device being sold that
doesn't have a Retina display. Will other vendors follow suit? If they don't,
they'll be left in the dust, so I imagine they will have to, if they can.

It's usually a good idea to skate where the puck is going, rather than where
it is now. In 3 years, the puck will be retina. My Macbook Air is not Retina,
so I can't be arsed to design for Retina... yet. Once my Mac has a Retina
display, I will design for Retina, and let the lower-res experience be
inferior. By then, most of the people who care about such things will have
Retina displays anyway.

~~~
Swizec
Just so you know, a whole bunch of laptops have been coming with "retina"
displays for years now.

They'd call it a "Full HD" laptop so it doesn't sound as shiny, but it's still
a 15 or 17 inch screen with a 1920x1080 resolution.

~~~
2muchcoffeeman
To put it into better perspective, put the resolutions into google:

(1920 * 1080) / (2880 * 1800) = 0.4

Your 1080p 15" display contains just 40% of the pixels of a single Retina 15"
display. They even showed this in the demo. They edited a 1080p video in Final
Cut at full resolution and there was plenty of room left for UI elements.

Apple is definitely the first to put a display of this _density_ into a
consumer product, or maybe _any_ product.

~~~
FireBeyond
No, definitely not. IBM sold a 22" 3840x2400 (205ppi) LCD monitor over a
decade ago.

<http://en.wikipedia.org/wiki/IBM_T220/T221_LCD_monitors>

Panasonic has also launched a 20" 3840x2160 IPS LCD display, too.

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

~~~
Synaesthesia
That should really not be a problem. Websites and apps can detect and load
appropriate images for 2x or 1x displays. Same for apps. You design for 2x,
and downsample for 1x.

~~~
orta
They can, but that's a huge additional bandwidth/size cost for both web and
native apps.

~~~
Macha
Native apps, maybe, since you'd probably have to include both versions in your
download. But surely its a bandwidth saving for web apps? You just let the
browser download the right size image. Now your low res users get low res
icons, while high res users get high res icons. Less bandwidth than just
sending everyone the high res icons, or both sets.

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

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

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.

Proof:

[http://web.archive.org/web/19970404064352/http://www.apple.c...](http://web.archive.org/web/19970404064352/http://www.apple.com/)

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.

Final point: The shift from CRT to LCD was much more dramatic than this shift,
and we all made it through. Scaremongering is pointless.

~~~
wonderzombie
Like someone else says downthread
(<http://news.ycombinator.com/item?id=4253475>):

(1920 * 1080) / (2880 * 1800) = 0.4 Your 1080p 15" display contains just 40%
of the pixels of a single Retina 15" display. They even showed this in the
demo. They edited a 1080p video in Final Cut at full resolution and there was
plenty of room left for UI elements.

\---

Retina stuff isn't supposed to be remarkable just because the resolution is
higher. It's remarkable because there are _drastically_ more pixels in the
same size screen.

The reason why folks are talking about this as if it's different is because
cramming that many more pixels in the same amount of space requires some
technology for it not to get all screwed up. It's not a modest jump from, say,
1024 to 1280, the progression you're describe. It's from 1920 to 2880. That's
big. You might not like it because it came from Apple and Apple people like it
but it does matter.

~~~
SwellJoe
The first display I browsed the web on was 640x400 (an Amiga) at 14" (but it
was a 5:4 display, so it was bigger in surface area than a 14" 16:9 or 1.85:1
widescreen display, closer to 15" or 16" today). I'm currently browsing the
web on a 15" 1080P display.

(640 * 400) / (1920 * 1080) = 0.123

As I mentioned, we have "gone retina" a few times since the beginning of the
web.

And, it's not that I don't _like_ it. Of course I like it. I just explained
that I went out of my way to obtain a 1080P laptop. I once went to great
lengths (custom cable, huge and complicated custom X configuration file) to
hook up a massive 75 lb workstation monitor to my PC because I wanted a really
high resolution display. It's just that I think it is ridiculous to freak out
about something that follows the natural progression of technology that we've
been following for decades.

------
mistercow
_2x scaled from 1x - Bicubic_

 _(Nearest Neighbor produced identical results)_

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.

------
ilaksh
Just to clarify, Retina is an Apple brand for a screen with a significantly
increased resolution and high pixel density.

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

<http://en.wikipedia.org/wiki/Retina_display>

~~~
ChuckMcM
This resonates with something I was thinking too. Basically everyone who has
had a web experience hooked up to their 1080p TV has been screwed for a long
time. Basically an '800px' layout has sucked for at least 5 years now on both
1920 x 1200 monitors and the aforementioned HD setup. There is no 'Retina'
war, there is only web design stuck between the same rock and the same hard
place. I feel for them but your tool box has to account for that.

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

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.

~~~
jsight
I agree... I think many of us have been saying that for years, too:
[http://www.codinghorror.com/blog/2007/06/where-are-the-
high-...](http://www.codinghorror.com/blog/2007/06/where-are-the-high-
resolution-displays.html)

Despite the fact that many people primarily associate "Retina" with the iPhone
(because that is where it was introduced first), I think this is the area in
which it has actually had the least impact. Other phones had high DPIs before
the iPhone 4, and the difference between the best Android displays and the
iPhone 4 display was not overly dramatic.

OTOH, pushing laptops and tablets out of low-DPI land is a truly remarkable
achievement. Other platforms are much farther behind in this area, IMO, and at
least on laptops have a much longer path to catching up.

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

------
Tyrant505
"but it won’t be long before Retina Cinema Displays replace their outdated
siblings"

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.

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.

Does the average kitchen need retina imacs and will the market speak?

~~~
rorrr
Search for "Catleap" or "Qnix" on e-bay.

2560x1440px 27" IPS displays at $295 (free shipping).

[http://www.ebay.com/itm/New-Qnix-27-LED-Monitor-Full-
HD-2560...](http://www.ebay.com/itm/New-Qnix-27-LED-Monitor-Full-
HD-2560x1440-high-resolution-S-IPS-DVI-dual-
link-/320937121255?pt=Computer_Monitors&hash=item4ab957d5e7)

[http://www.ebay.com/itm/New-Qnix-27-LED-Monitor-Full-
HD-2560...](http://www.ebay.com/itm/New-Qnix-27-LED-Monitor-Full-
HD-2560x1440-high-resolution-S-IPS-DVI-dual-
link-/200775098203?pt=Computer_Monitors&hash=item2ebf20df5b)

[http://www.ebay.com/itm/27-Inch-New-
Potalion-2710QW-2560x144...](http://www.ebay.com/itm/27-Inch-New-
Potalion-2710QW-2560x1440-WQHD-Quad-HD-
Monitor-/140757463591?pt=Computer_Monitors&hash=item20c5cc7227)

[http://www.ebay.com/itm/New-Tempered-Glass-27-Yamakasi-
Catle...](http://www.ebay.com/itm/New-Tempered-Glass-27-Yamakasi-
Catleap-2703-LED-IPS-2560x1440-WQHD-
Monitor-/130724901986?pt=Computer_Monitors&hash=item1e6fcfb462)

~~~
ScottBurson
But the Retina MBP is already past that resolution on a 15" screen
(2880x1800). If "Retina" means 2x the standard resolution, we'd need 24"
monitors at 3840x2400 and 27" monitors at 5120x2880. I wonder if even
Thunderbolt could drive that.

~~~
rorrr
These screens are insanely expensive, and wouldn't make much sense. Nobody is
looking at 27" monitors from such a small distance to distinguish between
retina and simply good resolution.

Plus, I don't think there are affordable video cards to drive resolutions like
5120x2880.

~~~
ScottBurson
Well, you make a good point. For comparison, my 17" MBP is at 133 ppi
(1920x1200), while the base 15" is 110 ppi, and so the Retina 15" is 220 ppi.
If you wanted the 17" screen to be around 220 ppi, you could go with
3072x1920, which would noticeably easier to make and to drive than 3840x2400.
Given that full-size screens are usually viewed from farther away than laptop
screens, I think it's fair to offer this as a "Retina" resolution for a 24"
8:5 screen.

Similarly, the 27" 16:9 screen could come in at maybe 3584x2016.

------
neya
This is a ridiculous post by some random guy who is pro-Apple.

Do you know how long it took for 1024x768 to significantly vanish? And you're
talking about retina's in 3 years. Lulz.

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.

Oh wait..its the same guy who wrote it..

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

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.

~~~
seanmcdirmid
I've been using the new iPad for a few months now and I'm always bothereed to
back to an iPad 2 for reading. I can just see the pixels on the iPad2 now, I
didn't before, but now they bother me. Blast Apple for raising my standards!

~~~
spaghetti
Same for me when going back to 2nd gen iPod Touch. What really bugs me about
the older iOS devices is the UI lag. It's not a huge deal if you use the
device here and there. But where you use it constantly the lag becomes
annoying. Hence my general desire to trade UI polish for decreased response
time.

Google studied the impact of very small delays on users' search behavior. iirc
reducing the search results loading time by 10 ms or so had a noticeable
effect. I wonder if something similar could be applied to smart phone UIs?
Might be an opportunity for a smart phone OS to substantially differentiate
itself from iOS and Android.

------
nchlswu
Does anyone else find the 1x and 2x conventions confusing? I never realized it
till I got a bit confused reading the article.

Also: I'm a bit surprised at the reverence Dustin Curtis is given for the
pixel fitting article.

~~~
ilaksh
Its not just confusing, its misleading. The marketing copy is being confused
for technical terminology.

At 2880 pixels wide, the new MacBook Pro resolution is about 1.5 times as many
pixels across the screen as a typical high resolution display at 1900 pixels.

~~~
AlexandrB
> At 2880 pixels wide, the new MacBook Pro resolution is about 1.5 times as
> many pixels across the screen as a typical high resolution display at 1900
> pixels.

A typical high resolution display of what physical size? Using the resolution
is meaningless, it's the DPI that's important in this case.

Also, the 2x is not really marketing copy. It's the number of physical pixels
that make up each geometric "point" in an Apple retina display. Ideally
applications and operating systems would be truly resolution-independent and
this ratio could be any decimal number. In such a world, you could chose how
to use your screen's resolution - for more space or for smoother rendering of
on-screen elements.

Apple's solution is a hack that uses an integer ratio to make backwards
compatibility easier. With a 2x ratio you can blow up a point from a non-
retina app to exactly 4 pixels, avoiding some hairy rendering issues.

~~~
scotty79
Resolution is only thing that matters. It tells how much information you can
cram into a screen. If pixels are too large move back. If they are too small
move closer. If your screen is glued to the keyboard. Detach it. Like in asus
transformer.

~~~
stan_rogers
The point of these displays is to (eventually) get away from slavery to the
pixel. Just because a printer can render, say, 4800 dpi, doesn't mean you want
to render your body copy in a 1pt text (which it can do with better letter-
shape fidelity than any of my old dot-matrix impact printers); you still print
at 9 or 10 points and enjoy sharper and better-defined type. Moving to high-
linear-resolution screens does the same thing—you don't cram more stuff into
the screen, you cram a better version of the same stuff into the screen.

~~~
scotty79
Decorative visual information is still information and how much you can fit in
a screen depends on it's resolution not dpi. To enjoy smoother visuals you
just have to move away a bit from big screen.

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

~~~
Zirro
"...hit their data caps more quickly on their mobile plan merely because they
are downloading more pixels."

Surely the caps will increase in size as a consequence of improved mobile-
data-pushing-technologies and to keep up with the need, just like the speeds
of broadband-connections have since they were introduced?

~~~
mitchty
It should also help at getting those caps increased. In a major city cell
phone providers not having capacity in 2012 should be lambasted for not
expecting usage to increase. This is only the harbinger of things to come, we
need to provide pressure on the providers to drop the (when technically
unnecessary) data caps. They don't fix the congestion problem and only
exacerbate these problems.

Also, its about damn time we have high dpi displays, we've been stuck at
72/96dpi for far too long on regular computers. I welcome this change and all
it brings.

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

------
pdmccormick
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:

    
    
      1) 1080p as a least common denominator
      2) composite analog video feeds
      3) low bitrate MPEG/JPEG/iDCT compression artefacts
    

Let the reader understand.

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

Author probably forgot to turn off color indexing or something trivial.

------
comex
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. :)

------
rbanffy
I really think the @2x hack is absolutely revolting.

sigh...

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

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

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

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

