What are the quickest and easiest ways to ensure existing web pages display well on mobile platforms?

Question

The pages in question contain a lot of javascript and CSS. How well are these supported by mobile platforms generally?

Is there a browser emulator (or equivalent tool) to assist testing?

Answer 1

Opera has an option to view pages as through a mobile device. I've found it useful in the past.

Answer 2

I can tell you that Apple's Mobile Safari on the iPhone renders Stack Overflow perfectly, which I find rather amazing.

This is a site for programmers, not average users, so we accepted a lot of JavaScript dependencies.

I do wish more mobile devices had browsers as powerful as Mobile Safari. I hear good things about Opera Mini as well.

Answer 3

You can install Opera Mini on an emulator like the Java WTK and test mobile rendering on a PC. One drawback is that Opera Mini still works through a proxy, so debugging local files/sites won't work - you have to upload your site to a world-accessible server.

Just google it.

Answer 4

Someone should make a browsershots for mobile...

Answer 5

One example: The standard BlackBerry browser on my BlackBerry 8130 (Pearl) seems to ignore both CSS and JavaScript when loading my home page.

I also installed Opera Mobile on this device, which renders the CSS but not my jQuery hover effects. It does understand some jQuery - for example, I have a form validation that does a show() of error messages if validation fails. That works in Opera, although without the animation effect.

The safest thing to do for mobile browsers is to design pages that degrade gracefully without JS or CSS. It's up to you whether that's worth the effort or not.

In a few years, hopefully the only rendering differences will be the screen size limits of the phones.

Answer 6

It depends entirely on the phone. If you want to support every single device out there, don't even bother with CSS or JavaScript since neither will work (or will do something completely non-standard) on 99% of devices. If you are only targeting high-end devices, like the iPhone or the latest Series 60 Nokias, you should be able to get away with limited JS and CSS.

Some browser emulators that I know of:

• Openwave.
• Nokia tools

There are many more manufacturers that simply do not have any tools at all (I dare you to try and find a developer site for LG) so you need to get access to the physical handsets if you want to be sure the site appears as it should.

DeviceAnywhere is a superb tool if you have the cash. It was extremely laggy the last time I used it about a year and a half ago. Plus it is pure Java so is a dog on any machine. But it is arguably the single best mobile development tool available and, believe you me, I've tried a lot.

Answer 7

BlackBerry devices with OS 4.5 or older will not handle Javascript or CSS very well, if at all. Devices with OS 4.6 and higher (Bold, Pearl Flip, Storm, etc..) come with a new rendering engine which has much better support for Javascript, DOM, and CSS. It's not perfect but it should render most pages quite well. You can download the BlackBerry simulator for these devices from their developer website and try it out. Since it runs the same code as on the actual device it's an excellent representation of what you can expect to see on-device.