The Retina War is upon us.
blog.wells.ee
blog.wells.ee
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.
http://simurai.com/post/19895985870/icon-sharpness-limbo
http://www.pushing-pixels.org/2011/11/04/about-those-vector-...
I liken this situation a lot to adapting a site to multiple devices with media queries. Does it help? Oh hell yes. Would a unique mobile site be better? Probably, if you had the time and resources to commit to it.
Of course custom raster will look better, but I don't think it's realistic for most teams. If you didn't handcraft the pixels of your favicon you're not a candidate. Vector solves much of the problem and will continue to, even when new densities come out.
<img src="logo.png">
<embed src="http://upload.wikimedia.org/wikipedia/en/4/4a/Commons-logo.svg" type="image/svg+xml" />
(fails in IE8- and IE9 quirks)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.
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.
The beauty of high pixel density screens is that we can literally output our vectors/high resolution rasters to the output size and not have to worry about massaging individual pixels for the best clarity. The advent of high pixel density screens allows us to exclusively think in terms of the end size on screen, instead of being bogged down with pixels dimensions. This high density makes design easier, not harder. Also the concept of different pixel densities is not new, screens have always had different pixel densities.
The reliable thing about 'retina' screens is that we can think of the pixel problem as 'solved' and just prepare artwork to pass the retina test, instead of trying to match it perfectly for every higher pixel density out there. (A level of accuracy that won't be easily seen by the user.) The same thing is done in print everyday, 300 dpi, 600 dpi, 800 dpi, it doesn't matter, past a certain point the end user isn't going to casually notice the extra detail.
Designers that have been working in print would see the analogy to various print device resolutions which are each measured in lines per inch. Again the approach is to think in terms of the final dimensions, and not get bogged down with the individual device resolutions.
I understand that designing for 1x can be problematic, but it's the same workflow as designing for any foreign pixel ratio/pixel density (such as non square pixels used in certain types of film.) It's just another step in the work flow and testing often on a device is useful way for the designer gets the hang of it.
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?
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.
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.
So maybe that will simply add to the "tough for non-Retina users" momentum...
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.
background: -webkit-image-set( url(...) 1x, url(...) 2x) ... ;
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.
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.
Said the designer. People were still buying SD TVs years after HD ones came out. I don't disagree that it is good to skate where the puck is going, but it's still too early to worry about it now. A lot of the web design we do right now won't even still be used in three years time.
Once my Mac has a Retina display, I will design for Retina, and let the lower-res experience be inferior.
Terrible, terrible idea. It was only a few days ago that someone posted how ignoring Windows cost them dearly. Don't ever design for the machine you're using, design for your customer. This applies to screen resolution, processing power, everything.
I don't.
P.S. Does Windows even have a pixel doubler for legacy apps on "retina"-type displays?
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.
That is different, though. 1080p on a 15" display is 146PPI; a "Retina" display (2880x1800) is 226PPI. That's a significant difference.
(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.
http://en.wikipedia.org/wiki/IBM_T220/T221_LCD_monitors
Panasonic has also launched a 20" 3840x2160 IPS LCD display, too.
In fact, Apple's way of scaling by internally doubling the resolution on retina displays is the most useful way of scaling I've seen so far. It gives you an -almost- crisp image for 3 different scaled settings and one perfectly crisp image for the retina resolution.
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...
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.
(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.
(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.
Display pixel density (some call it resolution, a term that is bit overloaded these days) has been hovering at 100 PPI for a long time. There has been almost zero development in that area. Even in the old CRT days, 19" screens were used at 1600x1200 (roughly 100PPI), and almost all desktop monitors since have been <100 PPI (or close to that). And now Apple is doubling the pixel density to >200 PPI. I'd call that a fundamental technological shift.
> Final point: The shift from CRT to LCD was much more dramatic than this shift, and we all made it through. Scaremongering is pointless.
Did you live an alternative history? There was almost no change in the outputted picture in CRT->LCD transition. And especially very little change that required attention of software developers.
"Did you live an alternative history? There was almost no change in the outputted picture in CRT->LCD transition. And especially very little change that required attention of software developers."
My guess is you never worked on games, video, or graphics software, during the switch from CRT to LCD. The way these display types behave is quite different. Colors are different. The speed at which pixels change state is (or was) vastly different. If you cared about how your software looked, and it tickled any of these differences, you tested on both and you tried to find a happy middle ground.
The change from 5:4 to 16:9 was also somewhat serious for developers.
I'm not saying a doubling of display resolution isn't awesome (it is!). Just that it is not a "sky is falling!" situation, and it's overly dramatic to act like it is. We've seen all of this before; or at least, those of us who've been around for a little while have seen all this before. Those who are too young to remember it should probably look to the past for guidance rather than acting like this is an unprecedented historical moment requiring heroic efforts to overcome.
My first display for browsing the web was 14" at 640x400. I currently browse on a 15" 1080P display.
(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.
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
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.
(BTW, LCD != LED.)
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.
We're only just now reaching the point where I can count on my friends having 64-bit CPUs.
Intel's first 64-bit mobile processor was released in mid-2006. That is only six years ago. The manufacturing transition itself was pretty quick - only a year or two until all their currently-manufactured CPUs were 64-bit [AFAIK], if we ignore Atom. Many of my friends have 6-7 year old laptops because they still work and that's all they need.
64-bit was chiefly engineering work: the CPUs didn't cost more to make because of Moore's law [I believe]. I hope that Retina screens are similarly not-more-expensive when made in large quantities. But what if they are a bit more expensive? We'll be cursed with budget 72/96 screens for maybe five more years on top of the length of time people keep their devices!
And it really will be a curse to us, personally, web designers. The Web uses images, and everyone uses the Web.
[1] https://en.wikipedia.org/wiki/X86_64#Intel_64_implementation...
[Disclaimer: I am writing a science game that uses lots of 64-bit integers, so it runs noticably faster when compiled for x86_64 than for x86.]
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?
Does the average kitchen need a 21" screen, 2.5GHz quad-core CPU, 4GB of RAM and a 500GB hard drive? (That's the base iMac.)
Does the average garage need a 4x4 SUV with cruise control, climate control, 6-disc CD, sat nav, heated seats, flip down DVD screens, etc. etc. ?
Of course not.
The developed world stopped caring long ago about what average people "need", and has long since focused on what people "want". Or at least what advertising can convince us we "want", before we even know we do.
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-2560...
http://www.ebay.com/itm/27-Inch-New-Potalion-2710QW-2560x144...
http://www.ebay.com/itm/New-Tempered-Glass-27-Yamakasi-Catle...
Plus, I don't think there are affordable video cards to drive resolutions like 5120x2880.
Similarly, the 27" 16:9 screen could come in at maybe 3584x2016.
It can't.
http://www.marco.org/2012/06/22/predicting-mac-desktops
"" - If a 27” Retina Display is a “2X” version of the current panel, that’s a 5120x2880 panel — running that at 60 Hz requires more bandwidth (over 21 Gbps for 24-bit color) than Thunderbolt offers today (up to two 10 Gbps channels).""
But then again, I thought the retina MacBook Pro was impossible. So perhaps I'm not the best judge of these things.
1. http://www.geeky-gadgets.com/eizo-showcasing-its-35000-4k-lc... 2. http://www.engadget.com/photos/viewsonic-vp3280-led-31-5-inc...
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..
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.
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.
Also: I'm a bit surprised at the reverence Dustin Curtis is given for the pixel fitting article.
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.
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?
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.
1) 1080p as a least common denominator
2) composite analog video feeds
3) low bitrate MPEG/JPEG/iDCT compression artefacts
Author probably forgot to turn off color indexing or something trivial.
sigh...