Making a 'mobile/cell' version of a PHP/Javascript website?

Question

I'm about to potentially start work on a website, but the client has a requirement that the website should also be accessible from mobiles/cell phones. He hasn't mentioned which mobiles he wants to support in particular but I assume it would be smart phones like iphone, blackberry, android, etc.

My question is, how much work will this take? For example:

1) Will I need to make two copies of the site, one for computers and one for the mobiles? Or even build 2 copies of all the html files?

2) Are there any special considerations I need to keep in mind when using javascript/ajax? Such as any features which may not be supported on cell phones (such as jquery)?

3) Is there an easy trick for supporting the site on both computers & cell phones? Like just showing a different stylesheet for cell phones and everything else would just work?

Thanks.

Answer 1

Here are some answers

1. By coding your HTML smart you might only be required to serve a separate css file for mobile devices.
2. You should always start with the assumption that no one has javascript, make your site work, then add the javascript and ajax as an extra feature. If you do that there won't be any problem accessing the site using a mobile device without javascript or a browser without it.
3. As long as the mobile device is reasonably modern you should not have any problem.

Answer 2

Use a templating engine such as Smarty and develop separate templates where this makes sense.

Use the User-Agent header to detect what type of device is being used, but allow manual selection of which site to use.

Answer 3

many sites that use generally portable html and css will simply look fine as-is, with no modifications, on the latest generation of mobile browsers.

for highly-trafficed properties tho, you might want an optimized interface for mobile users that gives them exactly what they want with no extraneous images or added content that might increase latency. for instance, browse to http://m.gmail.com or http://m.yahoo.com and you see a completely stripped down version of those sites for mobile users.

if you happen to be using a cms there are plugins that automatically mobilize a lot of the content, e.g.:

• Wordpress Mobile Edition (WP)
• Mobile Joomla (joomla)
• Osmobi (drupal / joomla)

if not using an existing CMS, the technique usually involves detecting the mobile browser and swapping in a different stylesheet (and theme potentially) for mobile content.

most of the latest and greatest smartphones support javascript, but it's not necessarily on by default. client should expect that some advanced functionality might not be available on every mobile due to configuration, lack of support, or compatibility issues.

Answer 4

Loading a different stylesheet on top of the HTML will get you onto the iphone and comparable devices, but you might as well not bother at all in that case (probably the iphone already runs your web app).

If you really want to go mobile, you're going to have to look at two aspects:

• Which subset of devices to target.
  You can target just the richest devices, using something like jQTouch. Or, you can target a wider spread of devices, using XHTML Mobile Profile and Wireless CSS (= the WAP 2.0 spec), which will get you onto any phone that claims it does HTML.
• How to optimize the functionality of the app for small screens and clumsy input.
  Here again it strongly depends on what device you're targetting. Generally speaking though, mobile apps have different features than their desktop equivalents. Optimizing for mobile means focusing on the basics and redesigning the experience so it doesn't require complex mouse and keyboard interactions.

I went for a wide target, and got much mileage out of the dotMobi mobile developer's guide. YMMV.