getting started: designing html5 web apps

• 1. Getting Started with Mobile Web Apps Ray Matsilwww.infostretch.com | info@infostretch.com | +408.727.1100 | 2880 Lakeside Drive, Ste 200, Santa Clara, CA

2. InfoStretch is a leading provider of mobile and enterprise QA servicesand solutions. Our offerings range from enterprise QA, mobile applicationdevelopment, testing, and automationto certification and sustenance.www.infostretch.com | info@infostretch.com | +408.727.1100 | 2880 Lakeside Drive, Ste 200, Santa Clara, CA 3. 3You may have to compromiseShort Video 4. RAY MATSILbiojob title User Interface Designer, Infostretch Corporation supported platformsview websitehttp://www.raymatsil.comsend emailray.matsil@infostretch.comview profilehttp://www.linkedin.com/in/raymatsil 5. 5Why HTML5? 6. Whos Using HTML5?6 7. By 2015, 60% of mobileapplications and 40% of consumerapplications will be web basedapplications.www.infostretch.com | info@infostretch.com | +408.727.1100 | 2880 Lakeside Drive, Ste 200, Santa Clara, CA 8. 60% of developers worldwide will start using HTML5 by end of 2012.www.infostretch.com | info@infostretch.com | +408.727.1100 | 2880 Lakeside Drive, Ste 200, Santa Clara, CA 9. Form FactorOne of the biggest challenges is going to be thehundreds/thousands of different devicesizes/resolutions Droid X2Droid Charge iPhone 4 10. The Android Developer Guide is a great place to startAndroid Normal Android LargeiOS Retina 11. Validate your designs on the actual target devicesDesktop BrowserDroid Charge 12. You cant properly test touch gestures on a desktop browser 13. Browser CompatibilityNot every browser is going to support everyfeatureHTML5Test.commobilehtml5.orgwww.infostretch.com | info@infostretch.com | +408.727.1100 | 2880 Lakeside Drive, Ste 200, Santa Clara, CA 14. FrameworksFigure out what you want to achieve, then decide if youcan do so with a framework (Not actually a framework)www.infostretch.com | info@infostretch.com | +408.727.1100 | 2880 Lakeside Drive, Ste 200, Santa Clara, CA 15. Quick to get started Nice feature set Takes a little longer to learn Robust Feature set Not Really a Framework Template Modify it to fit your own needs 16. Some transition animations dont work on certainbrowsers Use fallback transitions Transitions can also look choppy on partially supported browsers (Android and Windows phone) Show Demos on iPhone Gives you the flexibility to really give your web based apps a native feel Some nice plug ins available Such as datepickers and other controls Quick to learn if you are familiar with JQuerywww.infostretch.com | info@infostretch.com | +408.727.1100 | 2880 Lakeside Drive, Ste 200, Santa Clara, CA 17. Touch EventsConsiderations Platform Some touch events which work on iOS and Android wont work on Windows Phone Frameworks Different frameworks capture different touch events www.infostretch.com | info@infostretch.com | +408.727.1100 | 2880 Lakeside Drive, Ste 200, Santa Clara, CA 18. What to watch out for after you start designing Design with Caution 19. Screen Orientationwww.infostretch.com | info@infostretch.com | +408.727.1100 | 2880 Lakeside Drive, Ste 200, Santa Clara, CA 20. Detect orientation and use a different style sheet forlandscape and portrait 21. Generate as many of the assets you can fromthe code. 22. Screen Real EstateConsiderations Size of on-screen elements Font Size Graphical assets Interactive elements (input fields, buttons, etc) 23. Font size should generally be setto medium A good way to maximize yourreal estate is to get creative 24. When sizing interactive elements you shouldconsider touch target size Different platforms recommend different sizes: 44 x 44 34 x 34 7-10 mm (26-37px) 25. HTML5 FormsNew form input types Color Date Email Month Tel Time URLThink beyond enhanced validation www.infostretch.com | info@infostretch.com | +408.727.1100 | 2880 Lakeside Drive, Ste 200, Santa Clara, CA 26. Enhancing the UX for a form goes beyond poppingup the right keyboardMobile.delta.com 27. HTML5 validation will not look the sameacross all browsersDepending on your target you will likely need to use a framework tohelp validateh5validate www.infostretch.com | info@infostretch.com | +408.727.1100 | 2880 Lakeside Drive, Ste 200, Santa Clara, CA 28. NotificationsConsider screen size and real estate 29. The importance of the notification shoulddictate how you notify users 30. Frameworks offer a way to stylize your pop upsJQM DialogNative Device Pop Up 31. Geo-LocationConsiderations: When should you ask? How can you avoidalienating users? 32. Try to only ask for a users location once If a user receives multiple notifications it can become irritating and they may decide to deny access Ask in context Only ask if you are going to enhance the users experience Make sure you are clear about who isasking 33. Compatibility with older devicesConsiderations: What are you allowing the user to do? Does it make sense to allow users with less advanceddevices to access the same content? How important is the task?www.infostretch.com | info@infostretch.com | +408.727.1100 | 2880 Lakeside Drive, Ste 200, Santa Clara, CA 34. If you want to support older devices you will have todetect what device the user is viewing from You will probably need to have a separate stylesheet for less advanced devices Design for the least advanced device Users who are on less advanced devices may not beas open to performing that task on a mobile device 35. Useful Links HTML5test.com http://ericleads.com/h5validate/ iOS Developer Library Android Design Patterns Android Developer Guide www.Phonegap.com jQuerymobile.com http://www.sencha.com/products/touch/ Touch Target Size Calculator Mozilla Blog W3schools Does your webpage need to look the same in everybrowser http://www.adobe.com/devnet/devices/articles/design_tips_mobile_ria.html http://www.mobilehtml5.orgwww.infostretch.com | info@infostretch.com | +408.727.1100 | 2880 Lakeside Drive, Ste 200, Santa Clara, CA 36. Questionswww.infostretch.com | info@infostretch.com | +408.727.1100 | 2880 Lakeside Drive, Ste 200, Santa Clara, CA 37. If you have any questions orwould like more information onservices, contact us.www.infostretch.cominfo@infostretch.com +408.727.1100