1 / 25

Mobile Web Development

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.

ania
Download Presentation

Mobile Web Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mobile Web Development Presented by: Dave Wilson, SunPass

  2. 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

  3. Terminology • Mobile application vs. mobile web application • A mobile application is a "rich client" • A mobile web application is a web application optimized for mobile devices • Desktop vs. Mobile • A desktop site is a traditional website • A mobile site is optimized for small screens and low bandwidth

  4. History and Motivation (Part I) • 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

  5. History and Motivation (Part II) • 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

  6. 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

  7. Based on the size of the mobile market and the activity on the SunPass website, management decided they wanted a mobile website. NOW!

  8. Mobile Design Principles • We are not mobile experts • Covered in Firtman’sProgramming 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

  9. Requirements • Mapped every flow before start of work • Selected subset of desktop functionality • Initial mockups on paper • Next step was simple HTML mockups

  10. Requirements (cont’d) • Next we developed headers and footers • At the final signoff meeting we presented complete site mocked up with clickable static pages

  11. 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

  12. Requirements Complete • Actually got to follow the ideal requirements/development process • Or did we??

  13. 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

  14. Design • Decided to use existing structure: • Struts2 and Tiles framework • SunToll web service framework • HTML/web service strategy for security and reuse

  15. Tiers

  16. Development Tools • Eclipse, JBoss, Solaris • Tiles • Subversion (this was huge for team development) • WURFL (not Danny Wuerffel!)

  17. 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

  18. Surprise! (¡Quelastima!) • Additional requirements for Spanish • Use of text tags and resource bundles for i18n • Piggybacked on existing Spanish initiative for outsourced translation

  19. Resource Bundle creditCardEnterNew.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=Submit creditCardEnterNew.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=Submit creditCardEnterNewConfirm.modify=Modify creditCardEnterNewConfirm.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 File creditCardUpdate.creditCard=Credit Card : creditCardUpdate.expDate=Exp Date: creditCardUpdate.newExpDate=New Exp. Date: creditCardEnterNew.pleaseMessage=\ Ingrese la información de sutarjeta. \ Debecompletartodos los espacios. \ La información se mantendrásegura y almacenada \ asíque no necesitaráreingresarlapara \ operacionesfuturas. creditCardEnterNew.name=Nombre: creditCardEnterNew.cardType=TipoTarjeta: creditCardEnterNew.cardNumber=Tarjeta #: creditCardEnterNew.expDate=Fecha Exp.: creditCardEnterNew.cvv2Code=CVV2: creditCardEnterNew.billingZipCode=Código Postal: creditCardEnterNew.submit=Enviar creditCardEnterNew.cancel=Cancelar creditCardEnterNewConfirm.cardNumber=Tarjeta #: creditCardEnterNewConfirm.expDate=Fecha Exp.: creditCardEnterNewConfirm.name=Nombre: creditCardEnterNewConfirm.cardType=TipoTarjeta: creditCardEnterNewConfirm.cardNumber=Tarjeta #: creditCardEnterNewConfirm.expDate=Fecha Exp.: creditCardEnterNewConfirm.cvv2Code=CVV2: creditCardEnterNewConfirm.billingZipCode=Código Postal: creditCardEnterNewConfirm.submit=Enviar creditCardEnterNewConfirm.modify=Modificar creditCardEnterNewConfirm.cancel=Cancelar creditCardUpdate.pleaseMessage=\ Ingrese la información de sutarjeta. \ Debecompletartodos los espacios. \ La información se mantendrásegura y almacenada \ asíque no necesitaráreingresarlapara \ operacionesfuturas. creditCardUpdate.useCreditCardOnFile=Use tarjetaalmacenada creditCardUpdate.creditCard=Tarjeta: creditCardUpdate.expDate=Exp.: creditCardUpdate.newExpDate=Fechanueva: creditCardUpdate.useNewCreditCard=Use nuevatarjeta de crédito

  20. 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

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

  22. Enterprise Environment Configuration

  23. 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

  24. The final product Use the browser on your phone to navigate to: www.sunpass.com or www.tollbyplate.com

  25. Questions?¿Preguntas?

More Related