
Aspect Ratios - alexandros
http://www.tbray.org/ongoing/When/201x/2011/09/01/Screen-Sizes
======
vaporstun
Another thing which the author seems to leave out is the usability paradigms
for different sized screens.

As far as Apple goes, with their 2 formats for their mobile devices(x), iPhone
and iPad. Things that work on one device wouldn't necessarily work on the
other. I can't remember what Gruber said on this subject or if it was Steve
Jobs himself, but I think they both said some variation.

On the iPhone, it makes sense for many UI elements to take up the entire
screen, for example a list of contacts. But on a device with the form factor
of the iPad, that looks stupid. Likewise for the opposite - with a device the
size of the iPad, it makes sense to have multiple panes and popovers such as
in the Mail application. If that were on a device the size of the iPhone, it
would be simply unusable. So things formatted for one device wouldn't work on
the other and vice versa.

So, on a device in between those 2 primary form factors Apple has chosen,
which approach makes the most sense? I would posit that neither really works.
The iPhone's "take up the whole screen with a single thing" seems too large
and the iPad's "multiple pane" approach would likely not be usable on a
smaller device. Maybe that size screen is fine for such things if the pixel
density is raised such that the resolutions match, but I would guess it would
feel very crowded if you just took the iPad UI and crunched it down
significantly.(y)

So it's hard to develop good UI for these 'tweener screens because in some
contexts the UI paradigms from the iPhone fit better and in others an iPad
approach would be better. Sure, developers could have logic saying that, in
some contexts on a 7" iOS device, use the iPhone UI layout and in others use
the iPad UI layout, but that further complicates things.

I won't say that no one could design a UI for such a device, in fact I think
the Blackberry Playbook has the best UI of the devices I've seen at this size,
but I think it's difficult for Apple because it doesn't naturally fit either
the iPhone or iPad UI scheme. And it seems like most Android devices pick
which paradigm to use by the OS - those devices which have a Tablet factor use
Honeycomb (Android 3.x) and those which just scale up the phone version use
Gingerbread or earlier. (Android 2.x) It will be interesting to see how they
deal with this issue when they merge the two.

 _(x) Essentially anyway. Technically they have three when including the
iPhone non-Retina and iPhone Retina but since one is just double the other,
there is not a different form factor

(y) Remember, it seems like the difference between 7" and 9.7" is trivial,
"only 2.7 inches!" one may say, but note first that 2.7 is almost 1/3 smaller
than 9.7. Second, note that screen size is calculated on the diagonal. So by
the rules of Pythagoras, it is actually significantly smaller._

~~~
jleader
Regarding point x, it's not that screen size is calculated on the diagonal;
doubling the diagonal (and keeping the same aspect ratio) doubles the width
and height as well.

The key is that area is the square of any linear dimension (again, for fixed
aspect ratio). If you double the diagonal, you quadruple the area. If you
increase the diagonal from 7" to 9.7", you almost double the area (1.92x to be
precise).

~~~
vaporstun
"Regarding point x, it's not that screen size is calculated on the diagonal;
doubling the diagonal (and keeping the same aspect ratio) doubles the width
and height as well."

I assume you meant point y. Anyway, right you are! This is what I tried to
express by saying "By the rules of Pythagoras" because I was lazy and didn't
want to take the time to calculate it precisely. I also assumed most people
here would understand the implications, but on reading your comment I realized
they may not and what I visualize in my head is likely far different from what
everyone else does. Thank you for making it much more clear and explicit for
me!

------
peng
There's not enough emphasis put the fact that designing for one aspect
ratio/resolution is much easier on the designer. Not having to debug scaling
issues or 1-2px vertical borders saves metric boatloads of development time.

There are two main reasons fixed-width layouts are still so popular on the
web, even though responsive layouts are well-supported. One, fixed width maps
1:1 to Photoshop. Two, it's simple.

And three, it feels icky to have to add "margin-left: 3.448374%" to responsive
stylesheets because CSS really wasn't built to support complex, percentage-
based layouts.

~~~
mortenjorck
It's also much easier on the user (and in turn, easier on the designer to make
it easier on the user). Knowing the exact surface area each control will take
up, the exact distance between elements as they will appear in the real world,
gives the designer that much greater degree of precision in crafting a human-
centered UI.

~~~
Maascamp
Please elaborate on how it's easier on the user. I agree it's easier on the
designer (though I disagree that that's a good enough reason NOT to use a
fluid layout in this day and age), but I fail to see how a design that refuses
to conform to my monitor size is any easier for me.

~~~
DougBTX
He's assuming that the designer has a fixed amount of time to work on the
project, so less time spent faffing with pixel alignment means more time
getting the design right in the first place. I suppose there is also the
hidden assumption that if the designer spends more time on usability, then the
design will be easier for the user to use. Though from the hostility in your
message, I'd suspect that you might not believe that.

Finally, he was talking about designing for a small, fixed set of screen sizes
vs designing for a range of screen sizes, so your final point about your
monitor size does not apply.

~~~
chc
I think you mean "an insufficient amount of time." Some finite amount of time
should be enough to come up with something quite good for any finite interface
with reasonable requirements.

(And an infinite amount of time still probably wouldn't be enough to come up
with a good interface based on bad requirements.)

------
cpr
He's wrong about performance being a possible reason for iOS's fixed screen
sizes.

Even if they added adaptive layout a la Lion (truly general constraint-based),
imagine how much wildly more computation is going into the existing
UIKit/CG/CI/OpenGL graphics pipeline, with stellar results?

~~~
0x0x0x
Exactly, drawing/layout is cheap, cheap, cheap on iOS devices.

------
hollerith
This is a huge tangent, but I cannot resist asking: which of the mobile OSes
is best at allowing the user to customize text size? Suppose for example, the
user is old enough to need glasses to read small type, but would prefer not to
have to put on his glasses to use his smartphone. Let's leave the mobile
browser out of this (because it is more complicated) and focus on apps for
calendaring, plain-text email, plain-text notekeeping and texting.

A lot of it seems to depend on decisions by app developers. Unless I am very
much mistaken, most iOS apps written by Apple do not allow the user to change
the size of the text, but at least one iPad app (PlainText, which is similar
to Notes) give the user a choice between at least 2 text sizes.

~~~
zmmmmm
Curiously Android doesn't offer a way to fiddle with it directly but most
Android devices have a simple text file that declares the pixel density and
simply by modifying it you get larger (or smaller, if you want) fonts and
other UI elements. It's a pretty neat feature and baffles me why it isn't
given pride of place in the settings somewhere, since developers have to
basically account for all different densities anyway.

~~~
hollerith
Thanks! I am willing to modify a text file :)

------
verisimilitude
"But I’m sure as anything that somebody is gonna sell a buttload of tablets at
that size. [7-inch]"

He's right! That'll be Amazon with their forthcoming 7-inch color Kindle:
<http://techcrunch.com/2011/09/02/amazon-kindle-tablet/>

------
rudiger
I think Apple will be forced by market pressure to make the next iPhone with a
larger screen (somewhere between 3.7 and 4.0 inches, unlikely to be as much as
4.3 inches), but the same number of pixels, 960x640. Android has a key
differentiator with their larger displays, and Apple needs to nullify that
advantage. They dont't advertise the specific 326 PPI in their marketing for
the iPhone 4's Retina display; even with a slightly larger display, the eye
would be unable to distinguish individual pixels, keeping the "Retina"
moniker. I really doubt that the pragmatic designers at Apple really hold 3.5
inches to some Platonic ideal.

I also think Amazon is going to do a very successful 7-inch tablet.

~~~
kristiandupont
I wouldn't want mine to be bigger and I never heard anyone say they did. Is
this a common complaint?

~~~
rudiger
In the words of Steve Jobs, _"It isn’t the consumers’ job to know what they
want."_ But after testing some iPhone screenshots on a 4.0 inch, 800x480
Android display, I liked the look and feel of it.

------
jamesrom
So I just read this piece.. and I dont know what the point of it was.. Other
than to point out that the author made a wrong prediction, and to note that
iOS and Android software handle different screen sizes differently.

Seriously, did I miss some insight that wasn't self-evident?

------
adamjernst
Speaking as an iOS developer—yep, right on.

------
crenshaw
Good article. I was just thinking about this myself. I do find it
disappointing that neither Android nor WP7 has taken a resolution agnostic,
but aspect ratio deliberate approach. They both employ flexible layout
systems, and can require using vector graphics, rather than bitmapped for all
images (except those that are intended to actually be images, like for photo
apps).

------
johnrob
None of this matters, of course, on the mobile web... one of many reasons the
web won on the desktop.

~~~
cbs
Element layout doesn't matter on the web?

I refer you to any of the 80% of all websites I've ever visited, they look
like complete ass on my portrait-oriented monitor, if they even fit.

