Creation of a mobile site

Question

So, I plan to make the existing mobile site mobile. The good part is that it is entirely based on text with multiple images that can probably be omitted from the mobile version of the site.

The bad part is that it is a VERY complicated site with tons of pages (and each page can vary depending on the data and the user accessing the site). Many of them are also obsolete code (like, for example, old html which DOES NOT check)

So, I would like to know what should be the best strategy for creating a mobile site? Creating a parallel version is out of the question, because it will be a huge task.

Separate CSS is obvious. But what about the best practices / recommendations for the development of mobile devices to ensure the website is up and looking decent?

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

Edit: To be more clear, I would like some advice on the design aspect. What are the best design methods for mobile devices?

Answer 1

A few quick design tips for mobile devices:

• Vertical scrolling only, not horizontal.
• Make the links large enough to easily click with your finger (if it's a touch device).
• Keep pages small (less than 20KB) - including any images or css files
• Accept that some devices will display some element differently.
• Make sure you xhtml really
• Choose color schemes that work even in bright daylight.
• Include only what matters - make the most of the limited screen real estate.
• Try to avoid complicated navigation.
• Do not use absolute size in CSS
• Use minimal CSS and Javascript - check carefully when you use
• Use the features that are part of the phone (click to call, etc.).
• Mobilize, not just minimize
• Avoid user input where possible (selecting from a drop-down list is preferable to entering text - if possible)
• Test, test, test! (first emulators, then borrow the phones of your friends and colleagues so that they can test a wide variety of options).
• Design for short periods of user interaction - make it quick and easy for the person to complete the task.
• Be consistent - follow design guidelines and defacto standards.
• Use access keys for links

I hope for this help.

Answer 2

Answer on iPhone:

For the iPhone, I would decide not to optimize. Safari for iPhone is very capable of displaying web pages as they are. Check out this answer and question for more information on optimizing the iPhone.

General answer:

I would agree with mr-euro for technical optimization. The design is reasonable, that you need to accept a small resolution (for example, 320x240). I would leave a drop-down album or some fancy javascripting for that matter. Most mobile devices are not very scripted and less lethargic .

Answer 3

If you manage to convert the site to W3, verified by XHTML 1.1, it will display correctly in the mobile phone browser.

Answer 4

You can try setting up another server that proxies the request from mobile browsers to the real server and sends them to a program such as tidy , which can create valid (X) HTML from pretty ugly HTML. This may allow you to use the existing service without any changes at a certain processing cost.

Here you can find a small example of ruby ​​( which uses a local proxy).

Answer 5

I think you should be more specific. Mobile browsers for regular mobile phones are really primitive. If you aim them, you have to make sure that there is nothing "heavy". The page should basically only have short fragments of text with full-width images.

If you are aiming for iPhone / any touch, you only need to kill flash / java, hang up and other irreconcilable things that you most likely do not have at all. Mobile Safari really likes his older brother, you really do not need anything specific.

For a blackberry and all of this, I'm not sure, but look at the wsj mobile site as an example.