Use JQuery Mobile Framework
The JQuery Mobile framework is fully built in HTML5. It has extensive support for most modern mobile devices and desktop browsers, and is supported by a growing community. You can also easily convert your website or web application to a native ‘app’ for the major mobile platforms via PhoneGap. Here’s an example website built using JQuery Mobile Framework
Use A ‘Responsive’ Layout For Your Website
Using a responsive layout using the grid system accommodates both mobile and desktop sites on initial build with minimal work.
Resources:
- http://960.gs/
- for Drupal 7 and above: http://drupal.org/project/omega
CSS (Cascading Style Sheets) Media Queries
CSS media queries enable you to provide the optimal layout and presentation of your website or web application regardless of screen size.
Resource:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
General practices:
- Avoid use of Flash.
- Have fallbacks to deal with Javascript and AJAX requests.
- Take care when using Javascript. Depending on what you do you may significantly impact performance on some mobile platforms.
- Optimize speed of page loads from server page generation and webpage retrieval times especially for a mobile audience.
- Design webpages for optimal readability.
- Optimize for one-column layouts and avoid CSS floats that may be problematic on narrow displays.
- Avoid Javascript events that rely on mouse interaction but do not work for touch interfaces.