Aspect Ratios

http://www.tbray.org/ongoing/When/201x/2011/09/01/Screen-Sizes

by alexandros • 15 years ago

92 34 15 years ago

adamjernst• 15 years ago

Speaking as an iOS developer—yep, right on.

crenshaw• 15 years ago

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

peng• 15 years ago

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.

mortenjorck2• 15 years ago

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• 15 years ago

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.

kenjackson• 15 years ago

Why do you need to know the exact distance? If the aspect ratio is fixed, it seems like exact distance is just a function of resolution. But you can define things exactly where you want them stil..

rudiger3• 15 years ago

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• 15 years ago

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

rudiger3• 15 years ago

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.

ugh2• 15 years ago

I don't really understand why that is an advantage. You might prefer one or the other – but an advantage?

orangecat• 15 years ago

You can get an Android phone with a small screen. You can't get an iPhone with a large screen.

hollerith3• 15 years ago

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.

wysiwtf• 15 years ago

It would be nice if Apps allowed you to adjust the text size of the entire UI to enlarge it. On a related note iOS has a Zoom feature in the Accessibility options which will make the entire OS larger (you just pan around using three fingers).

hollerith3• 15 years ago

Thanks. I am hoping that there is a solution that does not require me to scroll back and forth horizontally for every line of text, though.

zmmmmm• 15 years ago

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.

hollerith3• 15 years ago

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

vaporstun2• 15 years ago

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.

bruceboughton• 15 years ago

If you were to squash the iPad's pixels onto a smaller screen, the real problem would be the tap targets. They either scale down with the resolution and become physically too small, or you keep the same physical size and what have you gained? On a touch device, higher res can only really mean finer graphics, not more screen space.

jleader• 15 years ago

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

vaporstun2• 15 years ago

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

cpr• 15 years ago

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• 15 years ago

Exactly, drawing/layout is cheap, cheap, cheap on iOS devices.

_frog• 15 years ago

Autolayout in Lion does something similar to this, it's quite nice after the springs and struts we were stuck with in previous versions of OS X.

johnrob• 15 years ago

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

cbs• 15 years ago

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.

verisimilitude• 15 years ago

"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/

jamesrom• 15 years ago

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?

Aspect Ratios

Related Stories