|
» Whoa there! » Radical Simplicity and Complexifiers » Dedicated Hardware Considered Unlikely » Web location and Physical location » Autoscrolling and Reading |
|
Subscribe RSS 2.0 feed |
Subscribe Atom feed If you wish to receive email notification, please here » |
« Design with Depth | Main | Internal Web Pages »
Designing a website for a mobile browser means you’re working with some additional constraints. To focus on an obvious one, the display is tiny. With such a small display, you have very little margin of error in page layout.
Just for the sake of discussion, let’s say you want to place a navigation bar at the bottom of your pages. If you need that navigation bar visible as soon as the page opens, that means you’re limited to fewer than 10 lines of text per page. And they’re short lines, too. It depends on the screen size of the user’s device, the font size they prefer, and last but certainly not least, the browser in use. Let’s make it easy and assume your users all have, say, Nokia N80 phones (we should be so lucky) and use our browser with the default font size setting. That means if you don’t want them to have to scroll, you have only about 70 words per page, at best. And no room for graphics other than in the background.
It doesn’t take long to conclude that scrolling is going to be quite necessary on mobile pages. 70 words is not very many; it took me over 150 just to find my way out of the previous paragraph. So if you really can’t design pages to both fit a tiny display and be more than minimally useful, what to do?
In any mobile browser you’re going to see the whole page as a series of tiny "pieces" of a page. One of the things you have to work with, then, is time. You know the user’s first view of a page is going to be the upper left corner. The same page, when viewed on a ponderous screen, still has that upper left corner, but it’s nowhere near as important. That makes the upper left corner the "hot corner" of your page; you know the user's attention is going to be concentrated there at first.
How about making use of that corner in a way that benefits the mobile user without hindering the desktop user? A small site map, or table of contents, would give the mobile browser an immediate way to navigate to the choicest content. The little map would still be available to the desktop user, but it's out of the way. It won't spoil your page design, and it probably won't be used. After all, you’ve got pixels to burn in a desktop situation, and can highlight what you want in many different ways.
I can't affect the overall layout of this site (at least I don't think I can), but I've done some informal tests and I think the "hot corner" has some potential.
In the next installment, more ideas for mobile designers.
Comments
The software this comapy produced is awesome. tried it works great.
Posted by: kkmediaI found that something like this works fine:
Posted by: Eugenia | November 27, 2006 05:42 PMhttp://www.mobits.com/images/s60browsers.png
You put the menu in the beginning of the page and at the bottom of the page. This way, if the user has scrolled down to read a page, he won't have to scroll all the way up to find the menu again.
The design seen in the shot above, works pretty well with all phones with resolution 120x120 and above and if the user uses a 160x160+ screen, it is guaranteed to not have horizontal scrollbars either (depends how big fonts each system uses by default -- something that web developers can't always control as not all browsers support CSS).