The Mobile Web Development Guide for Legal Aid

 

This guide should be considered as an updated version of of the original guide written by David Bonebrake and Scott Friday in 2009. While there is a lot of overlap, this version includes information about new mobile technologies and legal aid projects that have developed in the last two years.

This guide provides an overview of the mobile web and mobile web development for the legal aid community. 

  • Sections I and II explore the growing importance of this emerging technology and discuss the existing mobile landscape.
  • Section III focuses on how legal aid programs can develop an effective mobile web strategy and properly convert existing legal content to a mobile site. 
  • Sections IV, V and VI walk readers through the technical side of mobile web development, including the different approaches legal aid sites can take to establish a mobile presence..
  • The guide concludes with a list of resources for further research.


Throughout the guide, the authors have tried to identify special considerations that differentiate the building of mobile-optimized legal aid websites from general mobile web development. Legal aid websites are often more robust than other categories of legal sites, such as law firm pages or legal blogs, and also have a different target audience: low-income people in need of legal assistance. We welcome feedback from the legal aid community on how to improve this resource, especially as it relates to developing sites that meet the needs of legal aid clients and advocates.

A Serbo-Croation translation of this page by Jovana Milutinovich is available here.

 

AttachmentSize
mobilewebdev.JPG58.37 KB
Tech Library: 

I. Why Mobile Technology Matters for Legal Aid

Why should legal aid offices pay attention to mobile technology? There are two major reasons:

  1. The overwhelming majority of American adults use mobile technology, including a significant amount of legal aid clients.
  2. Mobile use will only continue to increase over the next few years as the technology and user experiences improve and becomes more accessible.

The mobile web will play a very significant role in Americans' lives going forward. The challenge for the legal aid community is to create mobile user experiences that effectively connect low-income individuals to new or existing delivery systems.  

Mobile is already a transformative technology as 84% of American adults now have a cell phone. The emergence of basic cell phones and feature phones has changed the way we make calls and exchange messages. Furthermore, smart phone technology is becoming more and more prevalent with 35% of American adults owning a smart phone, a percentage that grows by leaps and bounds every year. Not only are smart phones becoming more accessible, they are also growing more powerful and capable. In the future, it is expected that the majority of Americans will carry phones with Internet capabilities and run a large library of applications. This means that people will have access to the information they need whenever they need it and wherever they go.
 
Follow along the guide to learn about the unique benefits of the mobile web, about how the mobile web can ease the digital divide, and how mobile technology continues to expand.

The Mobile Web's Unique Benefits

Mobile provides several benefits for users and developers.

  • Mobility: Mobile devices allow individuals to access the information they need from essentially any location at anytime. Phones are the most portable Internet-capable devices available, and most users are already comfortable and accustomed to carrying their phones wherever they go. Although laptops and tablets offer significantly more portability than desktop computers, most users do not carry them at all times (nor would they want to) as they do not comfortably fit in one’s pocket. Also, most laptops and tablets demand that the user be connected to the Internet through either a LAN or Wi-Fi connection, which is not always an option, especially when one is on the go.  
     
  • Fast, targeted access: Because most phones users always keep their phones on, access to the web on mobile devices is nearly instantaneous. Users do not have to wait through a long boot-up process, and the impact of immediate web access from almost any location is significant. For legal aid programs, this means that clients will be able access an organization's website at critical moments. Users can simply enter a URL into their phone's browsers as their legal issue emerges or as they take steps to try and resolve it.  Mobile also provides more opportunities for legal aid offices to engage in "preventative legal help," where users receive important legal information that helps prevent a legal problem before it fully emerges. The new Statewide Lawhelp mobile sites, for instance, will include mobile adapted content specific to the most commonly asked legal questions in their area. The idea is that potential clients will use their mobile devices in case of emergencies or in situations in which they are unable to call a legal helpline or look up content via a computer.  Mobile provides many other opportunities to assist clients. Important appointment reminders can be sent directly to users' mobile devices, and more sophisticated phones allow users to access resources such as consumer legal aid instructional videos while they are on the go. Also, providers may be able to use location-based information to provide important resources to communities that have a high occurrence of a particular legal issue. For example, CitizenWorks has a SMS based initiative that customizes legal resources based on the zip code that the user texts their database.
     
  • Privacy: Although portability and instantaneous access are probably the most significant mobile benefits, phones also provide a more personal user experience than other Internet-enabled devices. Many people share desktop computers with family members or co-workers, which may make these individuals reluctant to access information they feel is private or embarrassing, such as websites dedicated to solving legal problems. Mobile devices, however, are often only used by the owner and might provide a better solution for accessing more personal information. 

  • GPS and phone-specific features: Mobile also offers features that are generally not available through the desktop web. For instance, many mobile sites include a directory that allows users to locate a particular phone number and then automatically call it using their phone. More sophisticated devices might also allow sites to tap into the phone's geolocation system and provide detailed directions to a specific destination, such as a courthouse or legal aid office.  

  • Technological momentum: The mobile web has the advantage of being an innovative, emerging field that is attracting talented developers. The last few years saw a huge influx of talent into mobile development and mobile apps are playing an ever-growing role in mobile usage. Illinois Legal Aid Online has gone so far to release their own mobile app in 2011 that is now available for the iPhone and Droid.

Reaching Clients: How the Mobile Web Reduces the Digital Divide

The latest research from the Pew Internet and American Life Project shows that more and more Americans are using cell phones. In 2011, 84% of U.S. adults have a cell phone compared to 55% of the same demographic who own a laptop. Additionally, the percentage of cell phone users who are turning to their mobile devices to access the Internet is on the rise. As it stands, 44% of adult cell phone users use their phone to access the Internet and 76% use their phone to send and receive e-mails.

According to a 2009 report from the Pew Internet and American Life Project, nearly half of all African-Americans and English-speaking Hispanics are using mobile phones or other hand-held devices to surf the Web and send e-mail.  There are several reasons why mobile adoption among Blacks and Latinos is higher. Perhaps most relevant to the legal aid community, some lower-income individuals are turning to the mobile web because they perceive it as a cheaper alternative to home broadband internet access, which requires both a wire-line connection and a personal computer. When users compare the costs of home broadband to a new mobile device and data plan, the mobile web appears to be winning out as the latest 2011 statistic shows that 22% of low-income people have a smart phone (<$30k household income). Blacks and Latinos also start to use mobile devices much younger than whites, and young people have been one of the key demographics driving adoption of the mobile web.  These adoption statistics have very important implications for the legal aid community. Programs must consider increased mobile web adoption when developing strategies for reaching clients through the web. Some early mobile web adopters use the mobile web as their primary (and sometimes only) means of connecting to the Internet. 5% of all cell phone users say they use their cell phone for most of their Internet browsing and 32% of these users lack high-speed Internet access at home. Developing a mobile-optimized page helps ensure that this growing group of mobile-only Internet users is able to effectively access an organization's web-based services.

Our Mobile Future: Expanding Usage and Improved Technology

The mobile web will only become more important over the next few years. Tens of millions of Americans already access the mobile web, and adoption rates are expected increase exponentially faster in upcoming years. One simple explanation for near-term growth is that many current users of more basic phones are tied into two-year device upgrade cycles because of their carrier contracts. Many of these users already know they will upgrade to an advanced phone and are just waiting for their current contract to expire.

More importantly though, mobile is exploding because significant technology improvements are driving Americans to the mobile web. Phones are being released with more sophisticated hardware and software. Over the past few years, technology commentators have made a habit of comparing the hardware found in advanced smartphones to that of desktop computers from a decade earlier. Their point was that powerful hardware, sufficient to accomplish all the tasks of a desktop computer from 10 years ago, could now fit into a small mobile phone. As a point of reference, an iPhone today has more computing power than all of NASA at the time of the first moon landing.
 
At the start of 2010, however, these "ten years behind" comparisons are no longer as apt. The most advanced mobile devices are now less than eight years behind desktop computers. Right now the most powerful touch phone available, the iPhone 4S, contains hardware more powerful than a 2002 iMac G4. Below is a breakdown of the two devices' basic specifications: 

 

 

Phone 4S (released 2011)

iMac G4 (released 2002)

Processor Speed

800MHz

700 MHz

RAM

512 MB

256 MB

Storage

32 GB

40 GB


Many are predicting that as mobile devices will soon become our primary computing device. Steve Rubel, a prominent technology commenter, outlines this vision for the future of mobile and computing:
"As processor speeds increase and full graphics systems get embedded onto single chips, the phones will soon be able to embody a PC experience as soon as they get near a flat screen TV and a keyboard. Some data will be locally stored but the rest will be in clouds - either your personal cloud or your employers. Want a clamshell keyboard and screen like a laptop? No problem, soon we'll see "dumb shells" that encase phones so they can do more on the go. And as we see more and more data being stored on the cloud, more and more apps are being released that allow mobile devices to access cloud storage via smart phones."
http://www.steverubel.com/the-apple-tablet-and-chrome-os-are-meaningles

In addition to hardware, software in mobile devices (especially web browsers) has improved significantly. Mobile browsers have long had a reputation for poor support of web standards and overall poor user experiences; however, newer devices now use the powerful WebKit engine to support web page rendering that is much closer to the desktop web.

Improved software and hardware are to creating better mobile user experiences, but mobile devices also require robust Internet connections. Fortunately, mobile carriers in the U.S. are beginning to deal with the large number of users that are adding mobile web data plans to their phone service and Internet speeds are improving for mobile devices across the country.

II. Understanding the Mobile Ecosystem

 

This section reviews various components that make up the mobile ecosystem -- phones, mobile network components, medium types, and challenges.  Having a good understanding of how the mobile world works is essential to developing quality sites for clients and advocates.


 

The Mobile Ecosystem - Phones

Although the mobile ecosystem consists of many different components, probably the most recognizable and important one is the mobile phone. All phones sold in the US today fall into one of three categories: feature phones, smartphones, or touchphones. 
 

  • Feature Phones: The vast majority of cell phone users in the US have feature phones. These are the basic flip phones that come free or at a low-cost with carrier contracts and pre-paid plans. Features phones get their name from the various features that come with the devices. These phones generally have camera, a handful of applications, and rudimentary web browsers. Prior to feature phones, cell phones only made calls and sent and received text messages.  
  • Smartphones:  They makeup a much smaller portion of the US market than feature phones, but smartphones are also very popular devices, especially among attorneys. The most recognizable smartphone is the Blackberry. In addition to all the capabilities of feature phones, smartphones typically run more applications and an operating system, have a larger screen size, and utilize a QWERTY keyboard input (standard keyboard format).
  • Touchphones: Since the introduction of the iPhone in 2007, the fastest growing category of phones in the US market have been touch phones. Touchphones can be thought of as the next generation of smartphones - they have larger screens, more robust web browsers, and more powerful applications. Touchphone users are also the mobile web’s power users. A recent UK study showed that 93% of iPhone owners use their device to access news and information on the mobile web.
  • Other mobile devices - iPads & tablets are also entering the mobile space and should be watched as their market share increases, especially considering that higher end models have built-in wifi capabilities.

The Mobile Ecosystem: Carriers, Networks, Platforms, and Operating Systems

The mobile landscape consists of several other components besides phones. These include carriers, networks, platforms, and operating systems. Again, a basic understanding of all these is helpful before beginning a mobile web project.

  • Carriers: Carriers (sometimes called operators) provide mobile service to customers. Customers typically sign up for a contract or prepaid plan.
  • Networks: Carriers provide mobile service over a network of cellular towers. Networks are commonly differentiated by generation. Right now, most users browse the mobile web on third generation (3G) technology. The growth of 3G and the rise of fourth generation (4G) technology is improving mobile browsing significantly.
  • Platforms: Platforms are the programming frameworks upon which all software for devices are developed. The most ubiquitous platform in mobile right now is Java ME. Blackberr, iPhone, and Android each run their own proprietary platforms.
  • Operating Systems: Just like other computer devices, many phones now run some type of operating system. Going forward, many commentators believe that the majority of phones will use Apple's iPhone OS X, RIM's Blackberry OS or Android. Current market trends show Blackberry on the decline and Android and iPhone on the rise.

Right now, there is a great deal of confusion and fragmentation surrounding many of these mobile web components. Thankfully, a major advantage of the the mobile web is its interoperability. An effective mobile website will reach a significant portion of mobile users, regardless of their carrier, network, platform or operating system.

The Mobile Ecosystem - Mobile Application Medium Types

There are several mediums through which mobile devices can deliver information and content to users. In Mobile Design and Development (O'Reilly Media, 2009), Brian Fling identifies six different mobile medium types: SMS, mobile websites, mobile web widgets, mobile web applications, native applications, and games.

Although this guide focuses on the mobile web, programs should also be familiar with each of the following options:
 

  • Short Message Service (SMS) Most phone users probably know SMS as "texting" - sending and receiving short messages through through mobile phones. With SMS, a user can submit a single keyword to a five-digit code and then receive helpful information in return. Although SMS seems like it a useful tool for the legal aid community, there are some major limitations to the medium. SMS return messages are limited to 160 characters, so programs could only provide a limited amount of information to users. In addition, SMS can be a pricey service, both for message recipients and providers. 
     
  • Mobile Web Applications are another medium available to developers. As their name suggests, mobile web applications provide a more application-like experience through users' mobile web browsers. Most of us are probably familiar with desktop web applications like GMail, Basecamp, and Facebook. Developers are now applying the same ideas behind these applications -- using XHTML, CSS, and Javascript to build robust web-based apps -- in the mobile context.
     
  • Native Mobile Applications: Mobile web applications shouldn't be confused with native mobile applications. Native applications are built for specific devices, such as the iPhone or Android handsets. These applications have better exposure to the application's specific hardware and software, so they can more easily tap into the majority of devices features, including cameras and location systems. Native apps also work on and offline, and can pull needed data from the web quickly. The downside to native applications is that they only work on the devices for which they were designed. ILAO is currently taking the lead with legal aid app development, having developed and launched several apps for both iOS and Android.

 

 

The Mobile Ecosystem - Challenges

Although mobile web technology is improving, developing robust user experiences on phones remains a serious challenge. This sub-section explores the hurdles of developing in the mobile environment, and offers basic workarounds for site builders. (The technical details for many of the workarounds discussed here are laid out in greater detail later in the guide.)


Most of the major mobile challenges revolve around usability. Usability refers to the ease with which users can interact with a web interface and accomplish specific tasks on a site. As usability expert Jakob Nielsen noted in a recent Albertbox report, currently "it's neither easy nor pleasant to use the web on mobile devices." Several limitations exist in the mobile environment, Nielsen notes, that lead to a less than ideal user experience. These include small screens, awkward device inputs, flaky internet connections, and poorly designed sites.

Below we highlight a few of these limitations and provide some practical solutions:
 

  • Small Screens: The most significant limitation in phones is small screen size. Feature phones, which still make up the vast majority of the market, typically have a screen that's no larger than 2 inches, measured diagonally. Even the screen on the iPod is only 3.5 inches  - considerably smaller than the average screen size for a netbook (10 in) or laptop (15 in). As Nielson notes, "small screens mean fewer visible options" are available on mobile displays. Small screens also leave little room for the types of navigation menus to which desktop users have become accustomed, such as top and left marginal navigation displays.

    Solutions:
    To help improve legibility of sites on phones screens, developers should
    • Use fonts that are designed for easy reading on a screen, such as Verdana.
    • Keep margins and padding to a minimum to use all of the screen.
    • Use a large enough font size to allow users to be able to comfortably read the content.
    • Use short paragraphs: large paragraphs of text might work fine on a full site, but on a mobile device it helps to use more white space and keep paragraphs smaller. Testing of the site is needed to decide the right amount of white space versus the amount of scrolling required.
  • Awkward Inputs: For users accustomed to working with a full keyboard and mouse, the mobile web is quite an adjustment. Scrolling through a webpage with phone buttons or a tiny trackball makes almost any task on the site more difficult. Even touch screens, which were developed to address the limitations of previous input devices, are less precise than a desktop mouse. Typing on mobile devices presents another major usability hurdle, especially when phones only have numeric keypads.

    Solutions:  Developers should limit the need to use input devices on sites.
    • Simplify pages so that users do not have too many link options and make it clear to which links users are navigating.
    • Sort out links by order of popularity - this ensures that most users won't have to scroll through many pages to reach their destination.
    • Website forms should almost never be used on mobile sites, especially if a site's target audience is feature phone users. Instead of making users fill out a form or send an email, developers should utilize phone links that initiate a call to the legal aid office directly through the mobile device.

       
  • Download Delays: Although web connections on mobile devices are improving, much of the current mobile network infrastructure was not built to support robust web usage. Mobile websites generally load much much slower than sites being delivered through home or office wire-line broadband connections. Connections are also more likely to drop as a page is downloading.

    Solutions:  To account for slow connections, developers should create lightweight sites that load quickly. That means only small images and relatively small portions of text of each page. The PTLA mobile site does an especially good job of keeping pages light to ensure fast load time. Programs that model their pages off the the PTLA project can ensure relatively quick load times for users.

Nielson also says that there are two major guidelines that any mobile web developer needs to follow when creating a mobile website:

  1. Design a seperate mobile website
  2. Have a clear, explicit link from the full site to the mobile site and vice versa.

 

III. Creating A Mobile Web Strategy for Legal Aid Sites

Developing a useful mobile site requires a good deal of planning. Programs may be tempted to limit their mobilization efforts to changing the CSS and graphics on their existing desktop site so that it is sufficiently viewable on a phone screen. However, this approach creates a very poor mobile user experience. Desktop sites were designed for larger screens and higher-quality input devices - the desktop experience simply does not translate into the mobile environment. In user studies conducted by the Nielsen Norman Group in 2009 and 2011, mobile users' success rate on assigned web tasks increased significantly when users were on mobile optimized versions of a website. Success rates were better still when users were on mobile apps.  

Assess content for mobile browsing
A successful mobile conversion requires website teams to evaluate whether every component of their desktop site is appropriate for mobile, as well as whether entirely new features should be built for the mobile site. Some existing items, such as office directions and important phones contacts, clearly belong on the mobile site. Other parts, such as lengthy booklets and fillable court forms, should almost certainly be excluded. Much of a site's existing content probably falls somewhere in between: material that probably belongs on a mobile site but needs to be significantly repurposed to work properly on phones.

Content conversion was discussed extensively in Part I of the December 2009 NTAP-PTLA Mobile Web Training (materials here: http://lsntap.org/MOB100). The following images provide a comparison of desktop content, material optimized for the hard-coded PTLA mobile site and the same material on the current PTLA mobile site


 

Rights of Tenants in Maine, one of the most visited resources on the Pine Tree website has already been “chunked” for the new Drupal desktop site. Here you see the “Tips Before You Rent” chunk, complete with header, footer, text boxes, lots of internal links and side column. The text is in a fairly narrow column, difficult to read in a mobile device without re-sizing.




In the current Drupal mobile version the header, footer side column and text boxes have been stripped. The text appears in a single column. Internal links still appear, and the text scrolls for more than four screens.

In the original hard-coded mobile site there was only a small mobile header, no footer, no side column, no text boxes, and no internal links. The lack of side margins and internal links allowed only three pages of scrolling. There is a tradeoff, both in the use of scrolling and the density of internal links between the Drupal mobile site and the hard-coded site.
 

Tailor the site for specific mobile devices
Developers must also create sites that are usable on types of mobile devices they know or assume will access the site. A simple of way of figuring out what devices will access your mobile site is to evaluate the server access logs for your desktop site. This will tell you the top browser user agents that are accessing your current site.  The experience of Pine Tree Legal Assistance and Illinois Legal Aid Online suggest that a majority of mobile traffic in the neighborhood of 90 - 95 percent is from iOS and Android mobile devices.  A successful mobile web strategy involves targeting both the right user experiences and the right devices. Mobile developers need to optimize sites for the mobile users needs. Mobile users are often looking to get something very different out of a website than their desktop counterparts. In the legal aid context, that may mean directions to a field office or courthouse, a help line phone number, or quick guidance on an emerging legal problem. Successful mobile developers should constantly be asking themselves, "Under what circumstances would someone want to be using our mobile site?" All components of the mobile site should reflect the answer.  

Some general guidelines
Developers can make some assumptions about what users will be doing on their mobile site.

  • Almost no users will want to read text-heavy content. Content should be re-written for the mobile user by presenting content in small segments. (This is sometimes called "chunking.")
  • Multi-field forms are very difficult for users with awkward inputs.
  • Legal aiders should note that HotDocs and A2J Author don't work on mobile devices.
  • Interactive PDF forms are questionable and work only with specialized programs.] Even if they did work, document assembly in a mobile context is not a good idea.


Developers must also create sites that are usable on types of mobile devices they know or anticipate that users will utilize to access their site. A simple of way to figure out targeted devices is to check a site's server access logs and see which devices are currently reaching the site. Detailed instructions for checking logs on an Apache server are available on the Apache server website.

Nielsen recommends not attempting to write for low-end feature phones. The web browsing experience is so miserable that most people don’t try it. Mobile traffic to legal aid websites (now running about 16%) bears that out. Traffic is almost entirely iPhone and Android with a small presence for Windows mobile.

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
xhtml-mp.jpg42.86 KB

V. CMS-Based Mobile Sites

Almost all new websites use an underlying Content Management System as the base for the coding and managing the site. Generally, CMS applications can be used to build a mobile-optimized versions of a site as well, and many CMS's have specific tools to make this transition easier.
CMS-based mobilization solutions represent the future of the mobile web. They're much easier than hand coding and more flexible than mobilization services like MoFuse and Mippin. At the same time, CMS mobile tools are still new and best practices from creating sites in specific CMS's are still emerging.
In general, there are several benefits of using a CMS to build a mobile site, including:

  • A stable code base that will most likely be updated as new technology is introduced.
  • A learning curve that is not as steep as custom coding.
  • A site that's much easier for non-technical users to update and create content.
  • For many CMS, mobile-specific tools that make converting your site much easier.

Although modern CMS application have many benefits, there are a few drawbacks to using them to create mobile sites:

  • As discussed above, CMS-specific tools are new and best practices are still emerging. Check with your CMS's development community for more information.
  • Mobile support may not be included out of the box, and modifications might be necessary to make the site mobile-compatible.
  • Overall less control over the code base for the site - this can make troubleshooting mobile display options very difficult. 

As mentioned above, several CMS applications provide useful tools for creating mobile optimized sites. The Drupal CMS, used by a growing number of legal aid websites, has several tools available that will help with the conversion to mobile. These include:

Utilizing CMS tools is often not enough to make a usable mobile web. Very long articles still need to be “chunked.” Interactive PDFs, referral pages to HotDocs or other document assembly, and on-line intake should probably be excluded. The PTLA mobile site created a mobile subdomain, m.ptla.org to facilitate domain switching, simplified some content, provided some alternative content and eliminated interactive pdfs, references to HotDocs and other content inappropriate for mobile use. For video, the site switched to YouTube links and eliminated embedded video. There is a link to switch between mobile and desktop if desired by the user.

Currently several legal aid organizations use the DLAW template for Drupal. DLAW is going through a major update to move the template to Drupal 7. One of the options under consideration with the template upgrade is more mobile integration. More information on this should be available in early spring 2012.


For more information, see these resources
Drupal Mobile Overview
Drupal and Mobile are friends
Drupal Mobile Blog
Basics of Making Mobile Websites with Drupal
or visit Drupal.org’s Mobile Group

VI: Mobile Web Conversion Services

Websites looking for simpler way to establish a mobile web presence may consider mobilization services. These services automatically create a mobile version of a site by removing elements that commonly cause problems on mobile browsers. Some have had success using mobilization services to quickly launch a mobile optimized site. Legal technology commentator Dennis Kennedy recommended mobilization services in his ABA Journal column. Kennedy cites his own success converting his blog with MoFuse.com:

MoFuse.com gets a lot of mentions in this area, and my experience was great. You sign up for an account (one for blogs, and a premium one with extra features for businesses), enter information about your site, click a button or two and you have a mobile version.

Mobilization services are an attractive option for programs without a large budget or available web developer. These services can cost significantly less than hiring a developer and do not require much technical t
echnology to be used effectively. That being said, there are some drawbacks.

Many mobilizations sites charge a service fee, usually monthly, for hosting and maintaining sites. In addition, mobilization usually works best for less complex sites or blogs. Managers of more robust sites may find the lack of customization frustrating.

Besides MoFuse, there are several other mobilization services available. Mashable.com lists some in its Guide to Mobile Web Design Tips and Tricks. Since the mobilization field is rapidly growing and changing, programs should be sure to research available options and find a solution that is best for their site.

Additionally, several organizations are currently working on creating a template for both the LawHelp and DLAW CMS that should be available for legal aid organzations around the country starting in 2012.

LawHelp Mobile Template

MLSA is working with the Northwest Justice Project, ProBono Net, and Colorado Legal Services on a TIG to create a mobile template for the Lawhelp platform, which will then be made available to all 27 organizations that use Lawhelp at no extra cost. PBN is doing the technological design and development side of the project while NJP, MLSA, and CLS are doing the content template development and testing side.

As the cost of owning smart phones becomes less and less expensive, this initiative aims at using mobile technology to significantly increase access to online information and services at the moment a legal need arises, regardless of where the user is located at the time. The mobile LawHelp site takes full advantage of a smart phone’s ability to deliver online content anywhere the end user has cell phone reception.

On ProBono Net’s end, development consists of two things: the core web application delivery and the content delivery (i.e. resources and organization from LawHelp). In the LawHelp CMS interface, admins will have the option to tag and configure content for display on the mobile version. The idea is that the mobile content will largely be modified versions of existing content on the LawHelp websites.

MLSA plans on releasing their mobile LawHelp site in the near future and will act as sort of a beta test for the rest of the organizations. These four organizations hope to have the template finalized and released sometime in 2012.

Mobile Guide Authors

The Mobile Web Guide was originally prepared by David Bonebrake of Legal Services Corporation (LSC) and Scott Friday, an LSNTAP Contractor.

The updated Mobile Web Guide was prepared by Hugh Calkins with help from, Brian Rowe and Austin Kim of the Northwest Justice Project / NTAP.

The PTLA Mobile Team provided singificant input for this Guide. That team consisted of Hugh Calkins and Kathleen Caldwell and Brian Stewart of PTLA and for the original version, Dave Mallon of iKnow Web Designs.

To provide feedback, please email INFO at LSNTAP.org.

Mobile Discounts for the Legal Aid Community

This section of the Mobile Guide lists mobile discounts and promotions relevant to the legal aid programs and their clients. Please contact LSNTAP (INFO at LSNTAP.org) if you know of additional discounts we can add to this page.

Discounts for Legal Aid Offices and Attorneys
Sprint is now offering legal services organizations a new program that allows them to purchase broadband services (including 4G speed unlimited access) at reduced, GSA-level pricing. Please click here for more details.
Mobile Citizen provides mobile education and broadband service to education and nonprofit organizations. It currently offers low priced mobile internet access to nonprofits in many locations throughout the country.

Discounts for Legal Aid Clients
SafeLink Wireless is a government-supported program that provides a free wireless phone with several standard mobile features to eligible low-income individuals. The service -- provided by pre-paid wireless provider TracFone -- is currently available in about 35 states, Puerto Rico and the District of Columbia. SafeLink says it is coming soon to the rest. 
Similarly, Virgin Mobile's Assurance Wireless Program offers low-income individuals a free wireless phone and 200 free minutes of wireless service -- along with free 911, voicemail, and caller ID -- if they meet eligibility requirements. As of December 2011 this service was available in thrity-nine states and the District of Columbia.
Both Assurance and SafeLink charge for additional minutes and features. The costs of these add-ons are consistent with other prepaid services; however, they could make monthly charges too costly for some users.  
Statewide websites interested in adding content about these mobile programs to their client site -- something we highly recommend -- should consult MassLegalHelp's Free Cell Phones and Minutes. It provides a solid plain language model for this content.

Additional Resources

 

Watch & Listen - Multimedia Resources:

MIT Mobile Web and MIT's Vision for Mobility MIT's Mobile Platform Manager and Architect Andrew Yu discusses the development considerations that went into MIT's mobile sites. The MIT sites are widely-recognized as excellent mobile adaptations.

The Open Web Goes Mobile Part of the Google Tech Talks Series, developer Peter-Paul Koch discusses the challenges of developing mobile websites and proposes the creation of a universal W3C standard for creating small and large applications for the mobile web.

Going Mobile: The Rise of the Mobile Platform Technology lawyers Dennis Kennedy and Tom Mighell explore the significant growth of the mobile web in 2009. This podcast looks at the move from phones used primarily for calls and emails to application-based mobile computing.

NPR Technology: Young Latinos, Blacks Answer Call of Mobile Devices - an NPR report on the growth of mobile usage among Blacks and Latinos and the impact of mobile on the digital divide.

 

Dig Deeper - Mobile Web Books:

Mobile Design and Development O'Reilly Media's Guide for mobile provides a good starting point for mobile web design and development.


DLAW and Drupal Resources:

DrupalCamp NY 2009 - Basics of Making Mobile Sites (with Drupal
) Presentation notes from DrupalCamp Presentation.

Drupal.org's Mobile Group Discuss mobilization efforts in Drupal with a growing community of developers.


Coldfusion Resources:


General Mobile Development Resources:

XHTML vs HTML