iPhone 6 Screens Demystified(paintcodeapp.com) |
iPhone 6 Screens Demystified(paintcodeapp.com) |
A good part of my career has been being the "Android guy" in organisations where for better or worse the products would de facto lead on iOS. The number one headache was designers pushing "pixel perfect design" which is doable on Android, but is a pointless headache when your tiny screen is 720p or higher.
The fact Apple have a phone coming out for which it is actually impossible is going to send a lot of these people into a confused fit. If this was how Android worked it would be criticised to the hills, but because it's Apple they can't.
I have seen android devices advertised with 4k displays at a 4-5" diagonal form actor. That doesn't make sense to me, because beyond 300dpi there isn't much point in higher pixel density. Yes, it makes sense for Apple to choose this size display (as 1080p is a commodity size).
The real issue is, if you want to compare the platforms, which platform has better resolution independence support.
I won't criticize android on this, but I will say that the iOS reliance on PNGs has gone on way too long. 2x was a decent solution for photographs... but we should have moved to SVG or some vector format as a native format in iOS several years ago.
Heh. Yes there will be, most notably on webpages, for example those with box borders defined as "1px solid" lines. The lines will look fuzzy and unequal. Check the last image at http://www.paintcodeapp.com/content/news/2014-09-11_iphone-6... : it shows a "1 CSS pixel" line rendered as 2 black lines + 2 grey lines (one of the greys is very, very light). Some lines will not be interpolated the same way: some will be 2 black lines + 1 grey line, some will be 1 black line + 2 grey lines, and the shade of the 2 greys will be unequal and will vary depending on their precise alignment on the 1080p physical grid. The end result is that some lines will look slightly thinner/lighter or slightly thicker/darker than others. Heck, on my Nexus 5 which has an even higher PPI (445 PPI) than the iPhone 6+ (401 PPI) I can still clearly notice this effect, when holding the phone at arm's length (and I don't even have 20/20 vision), when simulating the downsampling that the 6+ is going to have to do. I can do it by zooming out[1] to simulate an effective pixel ratio of ~2.61, which is equivalent to what the iPhone 6+ is really doing graphically (1080 physical pixels wide / 414 logical pixels wide = ~2.61).
Contrast this with most Android devices where it is possible to get pixel perfect rendering because most (but not all) of them use a non-fractional pixel ratio (1.0, or 2.0, or 3.0, or 4.0) and to my knowledge none do downsampling (though with thousand of devices on the market I am sure 1 or 2 obscure models do it).
[1] If you have a 1080p Android device with a pixel ratio of 3.0 (eg. Nexus 5, LG G2, Galaxy S4, HTC One M7, etc), you can simulate the downsampling of the iPhone 6+ by zooming out in your browser by a factor of 360/414 = 0.8696
Edit: I did NOT downvote you. I agree that for many apps it won't be noticeable, but it will be in some apps. Many users spend a lot of time in the browser, and many sites use 1px lines, and they will be a distracting artifact (unless Apple implemented a special hack to interpolate 1px lines in the browser - maybe Safari bypasses downsampling and forcibly rounds them up to 3 physical pixels, but then what about other browsers?)
Vector icons were the new hot well before the original iPhone was released. Here's an article about OSX 10.4 Tiger released in 2004, 3 years before the first iPhone[1].
[1] http://forums.appleinsider.com/t/45544/mac-os-x-tiger-to-sup...
Are we sure that this is how it's implemented? They could just as well have the frame buffer be 1080p and adjust the device matrix of the rendering engine(s).
> but we should have moved to SVG or some vector format as a native format in iOS several years ago.
Like PDF?
I have a small online business. I have neither time nor patience to do this shit myself, but it'd probably take one person for the app only to maintain it properly through all these nasty upgrades all the time. Oh, and this person now needs at least 4 different iPhones to test that stuff properly.
Good for you that you were the Android guy. I'm the guy required to have an Android guy and an iOS guy. Which sucks ;)
How many different O/S and model variants do you need, to feel safe on Android? Or does your app not do anything complex with the graphics?
Very nice visualization in the OP, by the way!
Especially in Metal, but probably in OpenGL, I'm sure you get access to the actual resolution buffer you can render into.
The 6+ has an extra 39 points in height and 69 in width the 6; about 10% more real estate in each direction. Sure, it's not that much, but it's not nothing. It's an even bigger jump over the screens of the iPhone 5 and 4.
Edit: The 1x version looks fine: http://www.paintcodeapp.com/content/news/2014-09-11_iphone-6... So this post only looks broken on retina screens, which is a bit ironic :-)
If Apple can release two new phones with greater disparity and seemingly get the app experience right, why can't Amazon? I don't use an iPhone but seeing these explanations that break down how they pull off such a feat really impresses me.
Or put another way, when you play a video, you let the OS take over the full screen and there's no need for downsampling.
Its not like the downsampling is a permanent stage of some rendering pipeline to the display.
A 1080p video stream doesn't need rasterizing -- it already consists of pixels. Any sane video player would simply show the original 1080p video mapped on the 1080p screen in full screen mode.
(2) Will Apple aim to re-enable pixel-perfection in next year's iPhone release? Was this just a stopgap measure due to yield challenges inherent to display manufacturing?
2- I think this is doubtful. The first time I saw a WWDC presentation about Resolution Independant graphics was in 2003 (maybe 2002.) Apple's been preparing for this time for a over a decade. The iPhone just was a bit too skeumorphic in its early versions resulting in a focus on raster assets rather than vector.
Either we're all going the Paintcode way (authors of this post) or Apple is going to have to start taking CSS or SVG or some vector format for its assets.
I think this is more likely than tying displays to a rigid multiple of the original iPhone screen size.
See my other post in this thread: https://news.ycombinator.com/item?id=8308194
Since there is more than one point resolution anyway.
And also, how is it different for android devices?
Displays are cut from larger pieces of display material at a given PPI. So Apple focused on perfecting a 163PPI display material and then tended to use it on multiple products. They'd do the same thing for the retina display material as well (I think at one point the iPhone and iPad used the same display material and it was just cut to different sizes in making the display)
Apple could do this because they work so closely with their display manufacturers and they care so much about fidelity. It just happened that doing rigid multiples of the original display size was convenient for software as well.
However, displays have become more commoditized, especially retina resolution ones (at the time it was introduced, Apple was the only one shipping these kinds of displays in such volume) and Apple's volume has only increased over the years.
So we're seeing a shift to more commodity display production, I believe, because the commodity market has caught up with Apple's standards. Beyond 300 pixels per inch there isn't much advantage to higher density.
But there is a huge advantage to unit volumes of a display also used in portable TVs or whatever.
The software cost of downscaling isn't significant at this point so it is an economic change.
My best guess is because this would then be smaller than the iphone 6 size (in points) at a larger physical size so everything would look "too big"...
(This would also give them back a minor marketing advantage that they had briefly when they introduced Retina, as I'd guess most mainstream Android's will stick at 1080p)
I believe the 326 PPI for the original iPhone is incorrect. Should be 163, I think.
Nice diagram!
http://www.paintcodeapp.com/content/news/2014-09-11_iphone-6...
What part of this do you think breaks other displays, though?
1: http://www.anandtech.com/show/5996/how-the-retina-display-ma...
Also, look at it this way: with the diminishing returns of resolutions above 300 dpi, is it really a big deal that you won't get the absolute best use of the iPhone 6+'s 400 dpi? Seems like a pretty reasonable trade-off to use that extra resolution in a way that makes resolution-independence easier for developers.
The other reason why I think this might be a good thing is since 1080p is more of a standard than the other resolutions they're playing with, which might help unify things moving forward.
Tying the size and density of your display to software needs-- especially points that are arbitrary to begin with (as they are based on the original iPhone) seems silly and outdated.
My first MPB was one of the "high resolution" ones that ran at 1680x1050 and I loved it. So when I first got my 15" retina MBP was miffed that now it felt like I was running a 1440x900, just with double (well, quadruple) pixel density. So I opened scaling preferences and set it so the retina screen would "emulate" a 1680x1050 display. It was terrible. Blurry and SLOW. Good lord it was slow. And impossible to do any design work on. I went back to normal 2x scale.
So sure, this kind of scaling has been available for a long time but the reality is most people don't scale their MPB retina displays to anything other than 2x.
This is the polar opposite of Amazon, which I worked for in the past.
Amazon is perceived as a high tech company but it is a retailer and its management is the management of a retailer. Amazons engineering is overseen by non-engineers and the company culture is highly political and focused on making a show more than making a product. Quality is the last thing they actually care about (when it comes to software.) You get ahead at Amazon with press releases-- it never matters if your product makes no sense. (EG: Movie listings on amazon.com, mail-order catalogs, literally scanned, and posted to amazon.com, innumerable initiatives and features that were put up there getting someone a promotion, only to have the team disappear in the next quarterly company wide reorg and the result to just rot.)
This is why I would never buy a tech product from Amazon. They really don't give a damn as a culture, and any engineer who gives a damn will not survive long there (and will be punished).
Giving a damn about design and quality doesn't play well with stack ranking.
What plays into stack ranking is kissing your bosses peers butts, playing political games and making splashy new features.
I am old enough to remember where this came from...
I used to do C for quite a while, then I made my hobby (Perl and scripting) my day job.
If given a certain size of a problem while working alone, I used to sit down and think for 1/2 a day or so, then develop (coding and also thinking more) for a week or two.
After I went scripting, this didn't work.
Since I could over an afternoon throw together a solution to the same size of problem which took a week in C, it was just not realistic to think first!
The best solution was to throw something together, look at it and then rewrite it if I didn't like it. The sheer development speed felt like I had gotten a sports car.
My Android-app is a lot less complex. The visually complex part (a custom chart that cannot be done with a default charting library) wasn't implemented in the Android-app.
We're working on a new version. I plan to test it on probably 3-4 devices as well, but with the assumption that Android is far better at handling different screen sizes than iOS currently (because maturity).
So yes, in the end, I'll have to test on 4 different devices for both platforms. With Android, I can mostly borrow devices from friends. Not so with iPhones. I might skip on the large iPhone 6 though. It's just too ugly to care about ;)
I was referring more to the concept that the entire substrate is built as a huge 163 dpi display and then it's a matter of customer preference how the glass is cut.
This way, all existing buttons that were designed with 44px tapable height in mind or any existing text could have more details in it while not appear larger or smaller than any other iPhones and will have more space to display content. I believe non-mini iPad is the only product in the iOS family that recommended 44px is physically larger than the rest.
Well...any raster format needs to be read from disk, decoded and drawn, though there are special optimizations for the drawing step.
Here's the web page with the 1 pixel line: http://jsfiddle.net/k0xep8pL/embedded/result/
On my PC, the line is just a single pixel. On my Nexus 5 -- as you can see -- it's actually three lines, which are (from top to bottom): grey (RGB=134), black (RGB=0), grey (RGB=156).
The impression I get, when looking at it on my phone, is a solid black line. Bear in mind, that the width of the display is 61 millimeters, which means that these three pixels take up only 0.17 millimeters on the screen.
With a modular approach, it also becomes easier to scale horizontally either in the same server/system or a separate server/system. Either via HTTP, TCP, 0mq or another abstraction, if the interfaces are the same, the modular layers can be replaced. This gets easier with async by default environments (node.js, golang, etc), and I find it to be much harder with classic N-Tier (.Net, Java). I'd rather use 0mq with node than wcf with .Net any day of the week.
