- 1. Getting Started with Mobile Web Apps Ray
Matsilwww.infostretch.com | [email protected] | +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 |
[email protected] | +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
[email protected]
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 | [email protected] |
+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 | [email protected] | +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 |
[email protected] | +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 | [email protected] |
+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 | [email protected] |
+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 |
[email protected] | +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 | [email protected] |
+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 | [email protected] | +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 | [email protected] |
+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 |
[email protected] | +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 |
[email protected] | +408.727.1100 | 2880 Lakeside Drive, Ste
200, Santa Clara, CA 36. Questionswww.infostretch.com |
[email protected] | +408.727.1100 | 2880 Lakeside Drive, Ste
200, Santa Clara, CA 37. If you have any questions orwould like
more information onservices, contact
[email protected] +408.727.1100
