Web Development for Mobile Devices

An increasing percentage of traffic to websites and web applications is coming from mobile devices.

We encourage you to make use of these recommended frameworks and other resources to ensure that visitors to your site using mobile devices have an optimal experience.

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.