Absolute Orange

Mobile web development

Written on Sat, 26th March 2011
By Amy Varga

Set with the task of developing a mobile website for all mobile devices including low-end, mid-end, high-end, smart phones and tablets, this is my strategy for developing a usable user experience (UX) and user interface (UI).

Defining device capabilities

Wireless Universal Resource File (WURFL) will be used for identifying and defining mobile device capabilities. There are others but this one is free.

The capabilities to be defined are:

1. Browser type and version

   Apache Tiles has been set up such that one can create a subset of alternate attributes which can be swapped out from the default attribute if one has been set for the browser type and / or version e.g. common/Safari/5.5/footer.jspx

2. Mobile resolution
   

   My defined device groups have been set as:

   1. Xsmall - less than 128px
   2. Small -less than 240px
   3. Medium - less than 320px
   4. Large - less than 480px
   5. XLarge - less than 600px
   6. XXLarge - less than 768px

   The medium device group is the default reference design with groups below it degrading gracefully and groups above it being enhanced progressively.

   22nd June : I am implementing a 'global' design for all devices greater than 240px and another design for all devices smaller than 240px.

3. User agent
   

   Since this is included in the header so one has this by default.

Markup

HTML pages will be written in XHTML 1.0 MP with a MIME type of text/html as this is the most compatible Doctype for mobile devices. In time an HTML5 version of each page will be implemented once the original deadline has been achieved.

Meta data

Meta data includes the viewport tag and handheld friendly tag:

<meta content="True" name="HandheldFriendly" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

22nd June : Additionally <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

Images

Images that form part of the content of the page

Image widths will be set as a percentage (of the page) in the CSS (with height set to auto) so that they can resize automatically. To ensure that the size of the image downloaded is relative to the device width i.e. if the image width is 50% of the page and the device is defined as 'small' the image downloaded should have a maximum width of 64px. If the device is defined as 'large' then the image downloaded should have a maximum width of 160px.

The maximum width of the device as defined in my device group small = 128px
The percentage of the page the image width will be = 50%
Therefore the image downloaded should be 50% x 128 = 64px

The maximum width of the device as defined in my device group small = 320px
The percentage of the page the image width will be = 50%
Therefore the image downloaded should be 50% x 128 = 160px

22nd June : I use the device width to implement tabbed menus and so to improve the website’s performance I am now using the device width to determine exactly the size of my website images.

The device width I use is in fact the device height since this (in most cases) the maximum device width based on a landscape orientation. I am still setting my images to be a 100% width however, my image containers are now calculated on based on the device width.

Presentation images

All presentation images including icons, buttons and background images will be stored in the CSS as background images converted to base 64 string representations. This will ensure increased performance for delivering images to the device. Where possible all presentation images will be cached in the device browser.

I am not implementing base 64 string representations as my images need to be resized according to the device width. For mobiles that support touch screens all icons, buttons and links have a minimum height of 25px.

CSS

The CSS allows one to tailor the website to specific devices.

Separate CSS files will be included for background images (static icons and images) for each device group. These will also be swapped out for a base-64 encoded versions of the CSS where supported.

In order to overcome the pixel per inch (PPI) dilemma, CSS device-pixel-ratio media queries will be implemented to allow targeting of high resolution and medium resolution devices. Interestingly, attempts to use the CSS dpi media queries failed as they only worked on the desktop Firefox browser (version 3.6.6).

JavaScript

The website will be developed to work without JavaScript. For devices that support JavaScript, native JavaScript (simple form validation and AJAX) will be written as this will save the website having to download an entire framework.

Styling for web applications

To ensure that the website's UX and UI is consistent with the iPhone, Android or Blackberry native behaviours I prototyped jQuery mobile and Sencha.

Whilst Sencha provided the best UI and UX on the iPhone's native browser it completely failed (was unusable) on the Opera Mini browser (on the same device). Furthermore the implementation of Sencha's API has a huge learning curve. Sencha uses JavaScript to create HTML pages at run time.

Both jQuery mobile and Sencha inserted non-semantic divs within the HTML page to implement its UI and UX.

I am not completely convinced by either of these technologies but for the sake of ease of development, control of markup and speed jQuery Mobile would be chosen over Sencha.

To allow iPhone users to bookmark the website on their device an apple icon link is included as a link in the header:
<link type="image/x-icon" href="images/ icon.png" rel="apple-touch-icon"/>

Minification and combining

Google's closure compiler will be used to minify and compile JavaScript. CSS and JavaScript files will be combined to ensure faster download.

Comments

Make your comment

* Full name

* Email

* Comment enter your comment

* Captcha

* denotes required fields