IV. Replicating the Pine Tree Mobile Site - Custom Coding A Legal Aid Mobile Site

There are several approaches to developing a mobile-optimized website, including custom coding and more automated solutions. For their initial mobilization project, PTLA chose to hand code their mobilize optimized site. Although some may see this as a return to much earlier web development practices, this approach allowed PTLA to create a simple, mobile-optimized site fully-designed for the mobile environment. Pine Tree has since abandoned it’s hard-coded mobile site in favor of a Drupal generated mobile site. There are some trade-offs, as you can see from the following section.

Is hand coding the best approach for your site? Probably not. A list of advantages and disadvantages is included below, but in general, programs should evaluate online mobilization services and CMS-based mobilization solutions before considering hand coding their site. Having basic understanding of coding for mobile sites, however, will be useful no matter what approach your organization chooses.
 

Advantages of custom coding include:

  • Effective evaluation. A major advantage of custom coding over some of the automated mobilization solutions is that hand-coding forces your website team to thoroughly evaluate whether each component of an existing site actually works in the mobile environment. Tools that mobilize sites by tweaking CSS and content might be sufficient for a simple website or blog, but might not work for some of the more complex websites in the legal aid community. Coding a website does take time, and it isn't cost effective for developers to invest time migrating portions of the desktop site that don't work in the mobile environment. Ultimately, this means a simpler website, which given the limitations of phones, is very likely a good thing.  
  • Minimizing compatibility issues.  Custom coding also makes developers more mindful of the underlying code of a website. If the site runs into compatibility issues with particular devices, it is easy to modify the codebase to compensate. Custom coding also allows developers to ensure that their site is consistent with the proper coding practices for mobile sites. In addition to being able to evaluate each line of code as they write it, developers can also easily plug their markup into a mobile compliance testing tool like mobiReady.

Disadvantages of custom coding include:

  • Development time.  At the same time, custom coding a mobile website does pose some challenges. The main disadvantage to hand-coding a website is development time. The PTLA site was built and refined over the course of many months by a professional web development shop - iKnow Web Design in Portland, Maine. Learning to develop a site in XHTML-MP (the XHTML subset used for phones) can be a time-consuming endeavor.
  • Future editing. Editing a custom coded mobile website once it launches can also be challenging, especially since most new websites utilize content management systems and WYSIWYG editors.



Click on the link below for a technical overview of custom coding for programs interested in using this approach to develop their mobile presence.
Technical Overview of Custom Coding a Mobile Site

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