Making an existing site mobile friendly [closed]

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

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 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.