HTML5 on Mobile(For Designer)
Download as PPTX, PDF8 likes1,322 views
The document discusses the significance of HTML5 in mobile web development, noting that mobile internet usage is expected to surpass desktop within five years. It outlines key features of HTML5, including CSS3 support, multimedia capabilities, and responsive design strategies catered to mobile users. Additionally, it highlights various design patterns and resources for utilizing HTML5 effectively in mobile applications.
HTML5 on Mobile(For Designer)
- 1. HTML5 on Mobile (For Designer) Adam Lu http://adamlu.com/
- 2. Mobile Will Be Bigger Than Desktop Internet in 5 Years http://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_ 041210.pdf
- 3. iPhone Users Use Data / Internet Far More than Average Mobile Users
- 4. Why Mobile Web? • Web App vs. Native App • Web App to Native App
- 5. Think about Mobile User Interface • Screen Size • Interaction • Usage Scenarios • Network Environment • Hardware Feature • Performance
- 6. HTML5 for Mobile • CSS3 Support • Canvas and Video • GeoLocation API • Advanced Forms • Offline Support • Multimedia • Storage
- 7. PNG Alpha Transparency • Semi-transparent areas in PNG files • http://www.w3.org/Graphics/PNG/inline- alpha.html
- 8. CSS3 Colors • Method of describing colors using Hue, Saturation and Lightness (hsl()) rather than just RGB, as well as allowing alpha- transparency with rgba() and hsla(). • http://www.zenelements.com/blog/css3-rgb- rgba-color-opacity/
- 9. Rounded Corner • CSS3 Border Radius
- 10. Shadows • Box Shadows • Text Shadows
- 11. Font • Support for the TrueType (.ttf)andOpenType (.otf) outline font formats in @font-face • http://www.zenelements.com/blog/css3- embed-font-face/
- 12. Gradient • CSS3 Gradient • http://css-tricks.com/examples/CSS3Gradient
- 13. Layout • CSS3 Multiple Column • http://www.zenelements.com/blog/css3- multiple-columns/ • CSS3 Flexible Box Layout • http://www.html5rocks.com/en/tutorials/flex box/quick/
- 14. Background • Multiple Background Image • http://www.css3.info/preview/multiple- backgrounds/ • Background Size • http://www.css3.info/preview/background- size/
- 15. Border • Border Image • http://www.zenelements.com/blog/css3- border-image/
- 16. Transform • Rotate • Skew • Scale • http://www.zenelements.com/blog/css3- transform/
- 17. Transition • http://www.zenelements.com/blog/css3- transition/
- 18. Local Storage • Web storage and DOM storage (document object model) are web application software methods and protocols used for storing data in a web browser.
- 19. Graphic • Canvas - Method of generating fast, dynamic graphics using JavaScript • SVG - Method of displaying basic Vector Graphics features using the embed or object elements
- 20. Geolocation • Method of informing a website of the user's geographical location
- 21. Media • Video(MP4/H.264) • Audio (AAC/PCM/MP3) • http://blog.gingertech.net/wp- content/uploads/2011/01/LCA_MM_AVProc2 011/#slide1
- 22. Forms • Placeholder/Autofocus/AutoCapitalize/Type=e mail, tel, url… • http://www.miketaylr.com/code/input-type- attr.html
- 23. Forms
- 24. Responsive Design • Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. http://www.alistapart.com/articles/responsive-web-design/
- 26. Mobile Web Applications • AppCache: Method of defining web page files to be cached using a cache manifest file, allowing them to work offline on subsequent visits to the page • <meta name="apple-touch-fullscreen" content="yes"/> • <link rel="apple-touch-icon" href="/custom_icon.png”/> • …
- 28. Usage of HTML5 in Mobile Web
- 29. Usage of HTML5 in Mobile Web
- 30. Usage of HTML5 in Mobile Web
- 31. Usage of HTML5 in Mobile Web
- 32. Mobile Design Patterns http://mobile-patterns.com/
- 33. Instrumentation • http://haz.io/ • http://caniuse.com/ • http://css3test.com/ • http://css3generator.com/ • http://css3info.com/ • http://html5test.com/ • http://css3please.com/ • http://mobilehtml5.org/
- 34. HTML5 is the future of Mobile!
- 35. Thanks! @adamlu