User login

Technical Overview of Custom Coding a Mobile Site

The following sections provide a technical overview of custom coding for programs interested in using this approach to develop their mobile presence. All sections assume a basic understanding of XHTML, but users who lack coding experience can find excellent resources throughout the web.

Mobile Web Standards
Mobile sites use XHTML-MP (Mobile Profile), which is a subset of XHTML. XHTML itself is simply a cleaned up version of standard HTML that developers have used to create websites for years. XHTML has a few key requirements that differentiate it from HTML:

  • XHTML elements must be properly nested - <div><span></span></div> is correct, <div><span></div></span> is not.
  • XHTML elements must always be closed - <br /> is correct, <br> is not.
  • XHTML elements must be in lowercase - <p></p> is correct, <P><P> is not.
  • Attribute values must be quoted.
  • XHTML requires an XML declaration and doctype.
  • XHTML documents must have one root element - Follow the basic document structure shown below:

Images 
As discussed in previous sections, images on mobile sites should be small and used sparingly. Follow these rules to ensure your images display properly on your mobile site and don't adversely affect usability:

  • Minimize the use of images. The majority of mobile devices have small screens and flaky connections. Adding too many images to a site makes it significantly more difficult for the average mobile user to access it. If you must use images, make sure they are relevant and always supply meaningful ALT text so that mobile devices can use the text descriptions. Some mobile browsers allow users to disable downloading images, which some may elect to do because of slow connections. Having ALT text ensures that context for the image is always provided.
  • Make images smaller than 100 pixels. Specify the image height and width in the source code. Images larger than 100 pixels won't work well on small-screen devices and will take longer to load.
  • Don't use background images. Gradients, images, and distracting color are not recommended. Mobile screens do not have the contrast that bigger monitors have, so white background with black text is recommended.   

CSS
Cascading style sheets control style and presentation on mobile sites. Style sheet support varies significantly on mobile devices - high-end mobile browsers like the iPhone Safari offer robust CSS support while some features phones don't support CSS at all. Consequently, developers should stick with relatively simple style sheets and ensure that contents of the webpage are readable without style sheets.  As a general rule, mobile sites should should use external style sheets to control presentation. Use the link element to link to an external style sheet. Some handhelds don't recognize @import or @media.
 
Client Side Scripting (JavaScript)

  • Avoid client side scripting if possible and ensure that content is readable even if scripts are disabled. Client side scripting refers to script embedded into a web page which causes the end users browser to engage is a particular action.  Many mobile browsers are not capable of interpreting this script and the practice should generally be avoided.
  • Place repeated scripts in external files. Calling all scripts being used on the page through a single script file will provide cleaner code and a more efficient webpage. Example: Scripts.js file that calls jQuery.js and other javascript files.

Forms

  • Limit the use of forms (particularly text elements). It is difficult for mobile users to input information into a form.

Links

  • Limit site links, particularly to non-mobile sites, and consider using phone links that allow mobile users to call legal aid offices directly through their phones.

Interface
As discussed in previous sections, creating a usable interface for mobile devices can be very challenging. Make sure to follow these rules when designing your site interface:

  • Design your mobile site for maximum readability.
  • Use one column layouts and avoid floats. Horizontal overflow can be a problem on handhelds, so make sure wide elements fit the narrow screen.
  • Design with document order in mind.
  • Add skip anchors. 'Skip to content' and 'Back to top' anchor links are vital when using a mobile device.
  • Be consistent. Use similar alignment, color, and layout on pages.
  • Align content to the left.
  • Place non-essential links and other marginal content at the bottom of the pages.
  • Set margins and padding to 0. Widths and margins are detrimental to good handheld display.
  • Take advantage of ordered lists of links and accesskeys (see example below). If you have eight links, put them in an ordered list and assign an accesskey of 1 to the first link, 2, to the second link, etc. This will enable users to navigate more easily.
  • Use a nowrap class for long links that might go over one line (see example below). This class can then be styled so the long link actually scrolls horizontally when selected allowing people to read the the entire link more easily.The example below illustrates the use of the accesskey attribute and the nowrap class to improve navigation and display in a mobile site.

<ol> <li><a href="dir/" _fcksavedurl="dir/" _fcksavedurl="dir/" _fcksavedurl="dir/" class="nowrap" accesskey="1">Directory</a></li> <li><a href="maps/index.html" class="nowrap" accesskey="2">Campus Maps</a></li> <li><a href="https://mail.austin.utexas.edu/oma/" class="nowrap" accesskey="2"> Outlook Mobile Access to web.austin.utexas.edu</a></li> </ol>  /** Nowrap class style definition **/  .nowrap { white-space:nowrap; }

In the example above, users can press the number 2 to select the Campus Maps link. If they select the third item, text will scroll horizontally (like a marquee) to display the entire item.

  • Limit text size. Default sizing of text should be consistent with individual devices' standard font sizes. Large type should not be larger than twice the size of paragraph text.
  • Use text rather than images for navigation labels and headers, but be sure to keep textual descriptions as short as possible.
  • Minimize white space on the page.
  • Limit the number of different colors used on a page.

What to Avoid
The following are common in desktop website development but do not translate into the mobile environment. Unless a site is only targeting high-end devices, developers should avoid:

  • Frames
  • Image maps
  • Tables
  • Pop-ups
  • Dynamic effects that specifically require mouse or keyboard for navigation
AttachmentSize
Image icon xhtml-mp.jpg42.86 KB