How to build the perfect Android tablet, part 4: Resolution and aspect ratio
#4: A high resolution display that is wide but not *too* wide
One of the top reasons to have a mobile internet-capable device, be it a tablet or smart phone, is to browse the web. Unfortunately the web doesn't look so great on most mobile displays unless the web site has been specifically formatted for the small screen. The reason is that the vast majority of web sites were created for desktop and laptop monitors which are both wide and tall.
What is the resolution of the monitor you are using right now? You're probably using it in landscape mode, which means the width is more than the height. According to one site, 96% of web users in 2010 have a display which is 1024 pixels wide by 768 pixels tall or bigger, and 69% use displays that are at least 1280 pixels wide. Web developers design their sites to look good on the majority of screens, so most web sites expect at least 1024x768. If you screen is smaller than that, then the result can often be hard to read. Either the text is too small, or you'll have to do a lot of scrolling to see it, or both.
For example, one of the sites I frequently visit is dzone.com (I used to run an Eclipse forum for them a few years ago). Unfortunately the site is almost unusable on my Nexus One, which has a resolution of 800x480. Try viewing this page on your phone to see what I mean. I know that with proper use of style sheets you can design a site that will be friendly to many different resolutions, but flexible sites like that are few and far between. Therefore, for best results on the real web, a width of 1024 pixels is pretty much the minimum you should accept in a tablet.
How about height? The ratio of width / height is called the aspect ratio. There's a great chart on Wikipedia showing all the standard aspect ratios, but here are some common screen sizes and ratios you might be familiar with:
| Device | Resolution | Ratio |
|---|---|---|
| Nexus One | 800x480 | 1.67 (5:3) |
| Droid 2 | 854x480 | 1.78 (16:9) |
| iPhone 4 | 960x640 | 1.5 (3:2) |
| Samsung Tab | 1024x600 | 1.71 |
| iPad, older laptops | 1024x768 | 1.33 (4:3) |
| TV Hi-def 720p | 1280x720 | 1.78 (16:9) |
| Apple MacBook | 1280x800 | 1.6 |
| MacBook Pro | 1440x900 | 1.6 |
| WSXGA+ | 1680x1050 | 1.6 |
| TV Hi-def 1080p | 1920x1080 | 1.78 (16:9) |
| Theatrical standard | n/a | 1.85 |
| Anamorphic wide screen | n/a | 2.39 |
Interestingly, the "golden ratio" is 1.618, which is right in the middle of my range. Who am I to argue with centuries of artists, architects, and mathematicians? Given a width of 1024 or 1280 pixels, and factoring in commonly available LCD panel sizes, I recommend picking one of the following screen sizes for your new tablet:
1024x600: A little on the wide side for my tastes, but should be adequate for web browsing. 1280x800: Tall enough to watch 720p video without scaling, and wide enough for any web site you're likely to encounter.
To summarize, avoid tablets that are 800 or even 854 pixels wide or less. I'm not saying they won't be functional and useful for some purposes, but we're talking perfection here, folks. Also, I'd avoid anything much above 1280 for now. Without zooming, you'll find that most of the web sites out there on the net will be too tiny to read.
Finally, don't get fixated on the 1.78 (16:9) ratio just because High Definition TV uses that. A little letterboxing while watching Avatar is a small price to pay for a much more generally usable device that can be viewed in any orientation. Your TV doesn't have to work on its side in portrait mode, but your tablet does.
See all the articles in the "Perfect Android Tablet" series:
What would you build into *your* perfect Android tablet? Share your thoughts in the comment area below. In a week or two, I'll have one final feature idea to share with you.