5.11 Websites for Mobiles: Design in Practice

Websites catering for mobile devices present the web designer with many challenges, because:

1. Screen varies considerably in size, definition and orientation.
2. Different mobiles use different markup languages, somewhat incompatible with each other and/or still under development.
3. Small screen requires hard decisions on what to include and what leave out.

The client has therefore to:

1. Decide what groups of mobiles (types and models) is used by their market sector.
2. Build a separate sub-website for each mobile group.
3. Automatically identify the mobile group on a 'catch all' index page and transfer the visitor to the appropriate sub-website.

An illustration of choices an advertiser must make is the US market for mobile phones, which is age-segmented. The 2009 picture was as follows, {3} where terms refer to dates of birth, approximately: Boomers 1945-60, Generation X-ers 1960-85, Millenials 1980-2000.

Website Build

1. Decide whether to have:
       a. A separate mobile site, using one of the mobile domain names (iphone.yoursite.com, m.mysite.com, mobile.yoursite.com, pda.yoursite.com, xhtml.yoursite.com, wap.yoursite.com, wml.yoursite.com or wireless.yoursite.com). Clear to visitors but does not benefit from the ranking of the customer's main site,
      b. A mobile subdomain or subdirectory on the main site. Easier to find and benefits from a main site ranking, or
      c. Mobile-traditional hybrid pages on a main site using CSS for layout. Logical but Netfront and Mobile Internet Explorer can cause display problems.

2. Give some thought to creating a mobile portal round a theme of interest: examples: Live Search, Winksite and M4u.
      a. Include these in the page coding: HTTP header, User-Agent Profile, User-Agent Header, Cache Control, Content-Type, Content Disposition.
      b. Precise coding: mobile languages are not forgiving. Validate the code with the free W3C service and/or CSS Validator.
      c. Use Javascript intelligently. The iPhone limits Javascript to 5 seconds of execution time.
      d. AJAX (a XHTML and Javascript mixture) is not fully implemented on mobile phones.
      e. Employ simple and intuitive forms.
      f. Remove Traditional Flash, which does not work on mobile phones, (and even Flash Lite, a streamlined version, does not work on all devices).
      g. Consider Microsoft's Silverlight, which works on Windows Mobile phones, on the iPhone and Nokia S60.
      h. Many rich media content files are possible on mobile devices, but the MIME must be specified. The safest file formats are currently MPEG4, MP4 (QuickTime) AVI, H.264/AVC, 3GP, and 3GPP.
      g. Not have rich media on the first page but provide a link to it.
      h. Add a manual link on the first page if problems arise with the automatic device detection script (see below).
      i. Remove frames, that generally cause problems.
      j. Transcoding (traditional webpages automatically slimmed down to mobile webpages) does work, but needs to be carefully checked. Consider the Squeezer (http://skweezer.com/s.aspx?q=http://yoursite.com) and Google transcoding services.
      k. Hosted mobile services like Mobify.me operate like transcoding, but again results need to be checked on all the common mobile phones.
      l. Display sizes need to be specified for each device or device grouping.
      m. Compress image files, to individually not exceed 20K, and not be used in page architecture.
      n. Employ traditional fonts, e.g. Arial, Times New Roman, Courier, Helvetica, and Verdana. The iPhone also supports American Typewriter, Arial, Arial Rounded MT Bold, Courier, Courier New, Georgia, Helvetica, Helvetica New, Marker Felt, Times New Roman, Trebuchet MS, Verdana, and Zapfi.
      o. Make the coding as compact as possible.
      p. Display the most up-to-date and compelling information.
      q. Divide the content into blocks of information, and display these one at a time.
      r. Allow for vertical scroll

3. Build new web pages, generally using a more specific HTML editor (such as those listed on WYSIWYG and Visual Editing Tools and Site Builders), after checking what CSS (cascading style sheet) tags are supported in the various markup languages listed on the W3C and OMA sites. An Internet search will also locate specific articles and tutorials: e.g. 

    a. Markup Languages: Listing and brief descriptions, as of 2004.
    b. Creating Web Content for Mobile Phone Browsers. A worked example: much more available on the main (Wireless DevCenter) site.
    c. XHTML Mobile Profile / XHTML MP Tutorial . Detailed, free tutorials.
    d. Mobile markup — XHTML Basic 1.1. Technical article for Opera (browser) developers: site has extensive articles and listings.

4. Create sets of webpages, one set for each of the devices being catered for, plus a general set that acts as a possible 'catch-all' for the remainder. The optimal layout will depend on the website type: online banks, newspages, customer services, music downloads, etc. all have different requirements. Coding can be from scratch, or through a transcoding service.

5. Check how these pages will display with device emulators: Agent Switcher, Small Screen Renderers, dotMobi, DeviceAnywhere, Keynote, Apple Safari, Google Chrome, Mozilla, Firefox XHTML Mobile Profile, WMLbrowser, Firebug, Ningx, iPhone SDK, iPhone Tester, Palm, Android SDK, Blackberry, Opera, Yospace Smartphone or WinWAP Simulator.

  6. Add code to detect the device being used and automatically direct the viewer to the appropriate set of webpages. The code needed is available on these sites: WURFL, tera-WURFL and/or Andy Moore's Solution.

7. First test the site on a PC with device emulators, and then with the actual mobile devices.

Importance of Mobile Commerce

Mobile ecommerce has only recently caught on the States, but a 2011 Internet Retailer survey (of 54 web-only merchants, 31 retail chains, 17 catalog companies and 15 consumer brand manufacturers) noted:

1. Some 24.1% of merchants operate a mobile commerce site, and 16.4% have both an m-commerce site and mobile apps designed for specific devices.
2. Revenues were appreciable. Of such merchants:
    a. 54.8% were generating annual sales of more than $50,000.
    b. 40.6% were generating annual sales of at least $250,000, of which
    c. 9.5% were generating annual sales of $250,001 to $500,000
    d. 7% were generating annual sales of $750,001 to $1 million.
    e.14.3% were generating annual sales from $1.1 million to $10 million
    f. 4.8% were generating annual sales from $10.1 million to $50 million
    g. 5% were generating annual sales of more than $50 million.
3. Mobile commerce accounts for at least 3% of all web sales at 47.6% of merchants.
4. 16.7% of merchants found transactions from tablet computers accounted for at least 20% of mobile commerce revenues.
5. 85.7% of merchants saw mobile commerce as important to their future online business development, and 59.2% as very important. Some 7.1% plan to spend over $1 million in this development.
6. 59.1% will use an outside technology partner to help them build their mobile commerce site or applications.
7. Site maintenance is a problem and only 36.4% of online retailers have full-time staff devoted to mobile commerce.

Questions

1. What challenges do mobile web pages present to the designer, and how are they overcome?
2. Outline the seven steps in building web pages for mobile phones.
3. How can the designer ensure that the web page viewed is suitably designed for the mobile phone in question? What alternatives exist?
4. Provide some statistics for thinking mobile commerce is the next big frontier.

Sources and Further Reading

1. Build a Website for Free: Second Edition by Mark Bell. Que. 2010.
2. HTML & XHTML Pocket Reference: Fourth Edition by Jennifer Niederst Robbins. O'Reilly Media, Inc. 2009.
3. Web hosting types. W3Schools. Brief explanation, with pros and cons.
4. Mobile Marketing: Finding Your Customers No Matter Where They Are by Cindy Crum. Que. 2010.
5. Open source (i.e. free) programs are listed at Open Source Windows, Open Source Mac, Open Source as Alternative and Open Source Alternatives.
6. The Internet Retailer Survey: Mobile Commerce Retailers diving into mobile commerce are coming up with significant sales by Mark Brohan. Internet Retailer. September 2011.