How to make a simple site render correctly on multiple mobile browsers?

Question

We have a rather simple site (minimal JS) with plain html and CSS. It is a simple mobile interface for our main application.

We are running into trouble because we have more than one column and several browsers seem to force single columns.

Through some searching I ran into 2 meta tags.

<meta name="MobileOptimized" content="220" />
<meta name="viewport" content="width=320" />

With these we have a good 'scaled' view for IE Mobile and the iPhone. We have not run into any problems with palm's Blazer. But Blackberry is another matter.

Does the Blackberry have a simple way to control the view of the browser as well? By simple I mean without making a special page for that device.

Answer 1

My recommendation would be to create two or three versions of the site:

• Full blown site for modern desktop browsers (if it's a very heavy application)
• Site with minimal JS and CSS for good mobile browsers and Desktop browsers (IPhone and SkyFire come to mind)
• Site with no JS, single column and mostly just plain text.

The reason is that coding for 3-4 desktop browsers is hard enough. Don't kill yourself over another hundred devices to code for and create a simple page that just puts out information.

Remember the basic design principle of web development: Users don't care. They want information, or functionality. It will look a whole lot better for you if you had a simple, clear layout for bad mobile browsers (IE or Blackberry) then try to hack up something that eventually becomes a maintainability nightmare and potentially make you look bad if somebody uses yet another mobile browser and you have not written the phone-specific site for yet.

Answer 2

I wouldn't bother making a "medium" version for the iPhone etc, iPhone users can just look at your real web page easily enough. Have your full version and a single column version, and you'll reach the largest audience with minimal work.

To answer your question though, there's no good way to make the Blackberry do anything other than 1 column views. You can get it to look fairly professional, as CSS and simple javascript still apply, but you'll have to lose a lot of your horizontal real estate.

Answer 3

BlackBerry (from OS 4.6 and higher) supports both the meta-viewport tag as well as the meta-HandheldFriendly tag. See the "Content Design Guidelines" document at http://na.blackberry.com/eng/support/docs/subcategories/?userType=21&category=BlackBerry+Browser for details.