Mobile Web Development

Presented by: Dave Wilson, SunPass

Web-enabled mobile phone growth

• There were 302 million wireless subscriber connections in the US in December 2010.

• In 2011 over 85% of new handsets will be able to access the mobile web.

• 25% of mobile web subscribers in the US are mobile-only.

• In North America 3G handset penetration was 38% in 2009, and is projected to be 74% in 2014.

• There are 65 million text- and web-enabled phones in the US.

statistics from mobithinking.com and cellsigns.com

Terminology

• Mobile application vs. mobile web applicationo A mobile application is a "rich client" o A mobile web application is a web application

optimized for mobile devices• Desktop vs. Mobile

o A desktop site is a traditional websiteo A mobile site is optimized for small screens and

low bandwidth

• SunPass.com 12 years old

• Originally released as an outsourced ColdFusion site

• Brought in-house and rewritten in Java in August 2010 as an exact duplicate of the ColdFusion site

History and Motivation (Part I)

• Updated in December 2010 with a new look and feel, including Wizards for complex account operations

• Used external web design firm because there were no in-house design resources

History and Motivation (Part II)

History and Motivation (Part III)

• SunPass.com access logs show 255,640,407 hits for March 2011

• SunPass.com had 49,516 credit card transactions totalling $8,129,472 for March 2011

• The tollbyplate.com violation document payment website handles an additional $500,000 per month

Based on the size of the mobile market and the activity on the SunPass website, management

decided they wanted a mobile website.

NOW!

Mobile Design Principles

• We are not mobile experts• Covered in Firtman’s Programming the Mobile

Web and at Code Camp seminar • Three types of mobile device: Web,

medium, and dumb phone• Simplicity• Progressive enhancement • Device detection so users are routed to correct

version of site

Requirements

• Mapped every flow before start of work

• Selected subset of desktop functionality

• Initial mockups on paper• Next step was simple

HTML mockups

Add/Update Credit CardCC Confirm

ScreenInfo validated Success Screen

Requirements (cont’d)

• Next we developed headers and footers

• At the final signoff meeting we presented complete site mocked up with clickable static pages

Experimenting with graphics

• Once functionality was approved, we called in a design firm

• Resulting pages looked great but weren’t quite right for mobile

• Header too large• Extraneous graphics• No space for

header/footer navigation

Requirements Complete

• Actually got to follow the ideal requirements/development process

• Or did we??

Scheduling

• Three options• Based on the mockups• Management chose the

middle option• Oh yeah – plus the

mobile document payment site

Scheduling Formula:

S x P = S

M

S = Schedule Length P = Developer Padding M = Management Truncation

Design

• Decided to use existing structure:• Struts2 and Tiles framework• SunToll web service framework

• HTML/web service strategy for security and reuse

Tiers

Development Tools

• Eclipse, JBoss, Solaris• Tiles• Subversion (this was huge

for team development)• WURFL (not Danny Wuerffel!)

WURFL

• WURFL is an XML configuration file with data on many mobile devices

• Wireless Universal Resource File• Checks User-Agent tag against 4000-entry

database to determine device capabilities• Device information includes screen size,

pointer type, JavaScript support, OS• Java API provides access to the WURFL data

Surprise! (¡Que lastima!)

• Additional requirements for Spanish

• Use of text tags and resource bundles for i18n

• Piggybacked on existing Spanish initiative for outsourced translation

Resource BundlecreditCardEnterNew.pleaseMessage=\Please enter your credit card information.<br/>\All fields must be completed.<br/>\Your credit card information will be securely <br/>\stored so you will not need to reenter it for <br/>\future transactions.

creditCardEnterNew.name=Name:creditCardEnterNew.cardType=Card Type:creditCardEnterNew.cardNumber=Card Number:creditCardEnterNew.expDate=Exp. Date:creditCardEnterNew.cvv2Code=CVV2 Code:creditCardEnterNew.billingZipCode=Billing Zip Code:creditCardEnterNew.submit=SubmitcreditCardEnterNew.cancel=Cancel

creditCardEnterNewConfirm.cardNumber=Card Number:creditCardEnterNewConfirm.expDate=Exp. Date:creditCardEnterNewConfirm.name=Name:creditCardEnterNewConfirm.cardType=Card Type:creditCardEnterNewConfirm.cardNumber=Card Number:creditCardEnterNewConfirm.expDate=Exp. Date:creditCardEnterNewConfirm.cvv2Code=CVV2 Code:creditCardEnterNewConfirm.billingZipCode=Billing Zip Code:creditCardEnterNewConfirm.submit=SubmitcreditCardEnterNewConfirm.modify=ModifycreditCardEnterNewConfirm.cancel=Cancel

creditCardUpdate.pleaseMessage=\Please enter your credit card information. <br/>\All fields must be completed.<br/>\Your credit card information will be securely <br/>\stored so you will not need to reenter it for <br/>\future transactions.

creditCardUpdate.useCreditCardOnFile=Use Current Credit Card on FilecreditCardUpdate.creditCard=Credit Card : creditCardUpdate.expDate=Exp Date: creditCardUpdate.newExpDate=New Exp. Date:

creditCardEnterNew.pleaseMessage=\Ingrese la información de su tarjeta. \Debe completar todos los espacios. \La información se mantendrá segura y almacenada \así que no necesitará reingresarla para \operaciones futuras.creditCardEnterNew.name=Nombre:creditCardEnterNew.cardType=Tipo Tarjeta:creditCardEnterNew.cardNumber=Tarjeta #:creditCardEnterNew.expDate=Fecha Exp.:creditCardEnterNew.cvv2Code=CVV2:creditCardEnterNew.billingZipCode=Código Postal:creditCardEnterNew.submit=EnviarcreditCardEnterNew.cancel=Cancelar

creditCardEnterNewConfirm.cardNumber=Tarjeta #:creditCardEnterNewConfirm.expDate=Fecha Exp.:creditCardEnterNewConfirm.name=Nombre:creditCardEnterNewConfirm.cardType=Tipo Tarjeta:creditCardEnterNewConfirm.cardNumber=Tarjeta #:creditCardEnterNewConfirm.expDate=Fecha Exp.:creditCardEnterNewConfirm.cvv2Code=CVV2:creditCardEnterNewConfirm.billingZipCode=Código Postal:creditCardEnterNewConfirm.submit=EnviarcreditCardEnterNewConfirm.modify=ModificarcreditCardEnterNewConfirm.cancel=Cancelar

creditCardUpdate.pleaseMessage=\Ingrese la información de su tarjeta. \Debe completar todos los espacios. \La información se mantendrá segura y almacenada \así que no necesitará reingresarla para \operaciones futuras.creditCardUpdate.useCreditCardOnFile=Use tarjeta almacenadacreditCardUpdate.creditCard=Tarjeta:creditCardUpdate.expDate=Exp.: creditCardUpdate.newExpDate=Fecha nueva:creditCardUpdate.useNewCreditCard=Use nueva tarjeta de crédito

Mobile Testing

• No emulators (except Android)• Firefox plus User Agent Header add-on• No crowdsourcing• Firewall exposure for physical devices• HP Quality Center with traditional test cases, cycles • Adapted many existing test cases from desktop site• Testing overlapped development, three cycles• Native Spanish speakers from the call center to do

the Spanish QA in a focus-group format

Deployment

• Soft launch• Enterprise configuration• Web statistics (User-Agent)• So easy a Labrador could do it (almost)!

Enterprise Environment Configuration

Summary

Successful launch!

A major factor in our success was:High availability of the development environment to the business users during the development process, with frequent updates and lots of opportunity for feedback

The final product

Use the browser on your phone to navigate to:www.sunpass.comorwww.tollbyplate.com

Questions?¿Preguntas?