Making an existing site mobile friendly

Question

So I am planning to make an existing website mobile friendly. The good part is that it is entirely text based with a few images which can likely be omitted from the mobile version of the site.

The bad part is that it is a VERY complex site with a ton of pages (and each page can vary based on the data and the user accessing the site) A lot of it is also legacy code (as in, old html which does NOT validate)

So I would like to know what should be the best strategy to make the mobile friendly site? Creating a parallel version is out of the question because that would be a huge task

A separate CSS is obvious. But what about the best practices/guidelines to design for mobile devices to ensure that the site is usable and looks decent?

For reference, the backend is in PHP + MySql and Front end in htmls + CSS and bits of JS (the JS is degradable)

Edit: To be more clear, I would like advice on the design aspect. What are the good practices in designing for mobile devices?

Answer 1

If you manage to convert the site to W3 validated XHTML 1.1 then it would render properly in a mobile phone browser.

Answer 2

iPhone specific answer:

For the iPhone, I'd choose not to optimize. Safari for iPhone is very capable of displaying webpages as they are. Check this answer, and the question for more about iPhone optimization.

General answer:

I'd agree with mr-euro for the technical optimization. Design wise you'd have to take into consideration a small resolution (like 320x240). I'd leave the drop down out or any fancy javascripting for that matter. Most mobile devices aren't very good at handling scripts and tend to become sluggish.

Answer 3

You could try to setup another server which proxies the request from mobile browsers to the real server and feed them to a program such as tidy, which can build valid (X)HTML from pretty ugly HTML. This may let you use the existing service with absolutely no change, at some processing cost.

You can find a small ruby example here (which uses a local proxy).

Answer 4

A few quick tips for designing for mobile:

• Vertical scrolling only, not horizontal.
• Make links large enough to easily press with a finger (If it's a touchscreen device).
• Keep pages small (under 20KB is best) - including any image or css files
• Accept that some devices will render some element differently
• Make sure you're XHTML is valid
• Choose colour schemes that work even in bright daylight
• Only include what is relevant - make the most of limited screen real estate
• Try and avoid complex navigation
• Don't use absolute sizing in CSS
• Use minimal CSS and Javascript - test thoroughly when you do use
• Take advantage of features that are part of the phone (click to call, etc.)
• Mobilize, don't just minimize
• Avoid user input where possible (selecting from drop down is preferable to entering text - when possible)
• Test, Test, Test! (emulators first, then borrow your friends and colleagues phones to enable testing on a wide variety)
• Design for short periods of user interaction - make it quick and easy for the person to complete a task.
• Be consistent - follow design guidelines and defacto standards
• Use accesskeys for links

Hope these help.

Answer 5

I think you have to be more specific here. Mobile browsers for regular cellphones are really primitive. If you target them, you have to make sure there is nothing "hard". The page basically should be just short pieces of text with full-width images.

If you target iPhone/whatever touch, you only need to kill flash/java, hovers and other non-touchable things you most likely don't have at all. Mobile Safari is truly like his big brother, you don't really need anything specific.

For Blackberries and the stuff, I'm not sure, but check out wsj mobile site as an example.