Aspect Ratios | Hacker News Reader

Aspect Ratios

tbray.org

92 pointsalexandros34 comments

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.

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.

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.

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.

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

Easier on you could mean that it doesn't grind you. For example, android apps that don't look right on my odd Atrix screen.

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

I would think it would be to make sure to control the actual physical distances. You are more concerned that two buttons are 10mm apart then 10px apart. If they become too close physically, then the higher the chance to miss click or other difficulties.

Exactly. UI distances are indeed a function of resolution, but a user's hand is not so scalable.

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?

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

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.

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.

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.

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

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

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.

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

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.

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.

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

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

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.

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

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.

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

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

I don't think it's very likely that Apple will sell two devices with (significantly) different screen sizes and exactly the same UI.

They would either increase the size or stick to it, not do both at the same time (at least if the UI remains as unflexible as it is).

I think one iPhone with a larger screen size (3.7-4.0 inches) but same pixels (960x640) is most probable.

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?

Speaking as an iOS developer—yep, right on.

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

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

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.

Reply on news.ycombinator.com