mobile web development

25
Mobile Web Development Presented by: Dave Wilson, SunPass

Upload: ania

Post on 25-Feb-2016

60 views

Category:

Documents


1 download

DESCRIPTION

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. - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Mobile Web Development

Mobile Web Development

Presented by: Dave Wilson, SunPass

Page 2: Mobile Web Development

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

Page 3: Mobile Web Development

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

Page 4: Mobile Web Development

• 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)

Page 5: Mobile Web Development

• 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)

Page 6: Mobile Web Development

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

Page 7: Mobile Web Development

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

decided they wanted a mobile website.

NOW!

Page 8: Mobile Web Development

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

Page 9: Mobile Web Development

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 Card CC Confirm ScreenInfo validated Success Screen

Page 10: Mobile Web Development

Requirements (cont’d)

• Next we developed headers and footers

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

Page 11: Mobile Web Development

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

Page 12: Mobile Web Development

Requirements Complete

• Actually got to follow the ideal requirements/development process

• Or did we??

Page 13: Mobile Web Development

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

Page 14: Mobile Web Development

Design

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

• HTML/web service strategy for security and reuse

Page 15: Mobile Web Development

Tiers

Page 17: Mobile Web Development

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

Page 18: Mobile Web Development

Surprise! (¡Que lastima!)

• Additional requirements for Spanish

• Use of text tags and resource bundles for i18n

• Piggybacked on existing Spanish initiative for outsourced translation

Page 19: Mobile Web Development

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

Page 20: Mobile Web Development

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

Page 21: Mobile Web Development

Deployment

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

Page 22: Mobile Web Development

Enterprise Environment Configuration

Page 23: Mobile Web Development

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

Page 24: Mobile Web Development

The final product

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

Page 25: Mobile Web Development

Questions?¿Preguntas?