mobile web development
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 PresentationTRANSCRIPT
![Page 1: Mobile Web Development](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/1.jpg)
Mobile Web Development
Presented by: Dave Wilson, SunPass
![Page 2: Mobile Web Development](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/2.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/3.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/4.jpg)
• 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](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/5.jpg)
• 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](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/6.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/7.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/8.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/9.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/10.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/11.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/12.jpg)
Requirements Complete
• Actually got to follow the ideal requirements/development process
• Or did we??
![Page 13: Mobile Web Development](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/13.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/14.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/15.jpg)
Tiers
![Page 16: Mobile Web Development](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/16.jpg)
Development Tools
• Eclipse, JBoss, Solaris• Tiles• Subversion (this was huge
for team development)• WURFL (not Danny Wuerffel!)
![Page 17: Mobile Web Development](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/17.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/18.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/19.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/20.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/21.jpg)
Deployment
• Soft launch• Enterprise configuration• Web statistics (User-Agent)• So easy a Labrador could do it (almost)!
![Page 22: Mobile Web Development](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/22.jpg)
Enterprise Environment Configuration
![Page 23: Mobile Web Development](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/23.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/24.jpg)
The final product
Use the browser on your phone to navigate to:www.sunpass.comorwww.tollbyplate.com
![Page 25: Mobile Web Development](https://reader035.vdocuments.site/reader035/viewer/2022070500/56816859550346895dde8bd7/html5/thumbnails/25.jpg)
Questions?¿Preguntas?