Aspect Ratios

#1

Post by alexandros » Fri, Sep 02, 2011, 3:30 PM UTC

Aspect Ratios
tbray.org

Re: Aspect Ratios

#2

Post by adamjernst » Fri, Sep 02, 2011, 3:54 PM UTC

Speaking as an iOS developer—yep, right on.

Re: Aspect Ratios

#3

Post by crenshaw » Fri, Sep 02, 2011, 4:01 PM UTC

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

Re: Aspect Ratios

#4

Post by peng » Fri, Sep 02, 2011, 4:13 PM UTC

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.

Re: Aspect Ratios

#5

Post by rudiger » Fri, Sep 02, 2011, 4:49 PM UTC

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.

Re: Aspect Ratios

#6

Post by mortenjorck » Fri, Sep 02, 2011, 4:52 PM UTC

peng wrote: post #4

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 th…

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.

Re: Aspect Ratios

#7

Post by hollerith » Fri, Sep 02, 2011, 4:54 PM UTC

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.

Re: Aspect Ratios

#8

Post by wysiwtf » Fri, Sep 02, 2011, 5:01 PM UTC

hollerith wrote: post #7

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-t…

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

Re: Aspect Ratios

#9

Post by vaporstun » Fri, Sep 02, 2011, 5:05 PM UTC

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.

Re: Aspect Ratios

#10

Post by cpr » Fri, Sep 02, 2011, 5:06 PM UTC

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?