HTML5 on Mobile (For Designer)              Adam Lu        http://adamlu.com/
Mobile Will Be Bigger Than         Desktop Internet in 5 Yearshttp://www.morganstanley.com/institutional/techresearch/pdfs...
iPhone Users Use Data / Internet Far More       than Average Mobile Users
Why Mobile Web?• Web App vs. Native App• Web App to Native App
Think about Mobile User Interface•   Screen Size•   Interaction•   Usage Scenarios•   Network Environment•   Hardware Feat...
HTML5 for Mobile•   CSS3 Support•   Canvas and Video•   GeoLocation API•   Advanced Forms•   Offline Support•   Multimedia...
PNG Alpha Transparency• Semi-transparent areas in PNG files• http://www.w3.org/Graphics/PNG/inline-  alpha.html
CSS3 Colors• Method of describing colors using  Hue, Saturation and Lightness (hsl()) rather  than just RGB, as well as al...
Rounded Corner• CSS3 Border Radius
Shadows• Box Shadows• Text Shadows
Font• Support for the TrueType (.ttf)andOpenType  (.otf) outline font formats in @font-face• http://www.zenelements.com/bl...
Gradient• CSS3 Gradient• http://css-tricks.com/examples/CSS3Gradient
Layout• CSS3 Multiple Column• http://www.zenelements.com/blog/css3-  multiple-columns/• CSS3 Flexible Box Layout• http://w...
Background• Multiple Background Image• http://www.css3.info/preview/multiple-  backgrounds/• Background Size• http://www.c...
Border• Border Image• http://www.zenelements.com/blog/css3-  border-image/
Transform•   Rotate•   Skew•   Scale•   http://www.zenelements.com/blog/css3-    transform/
Transition• http://www.zenelements.com/blog/css3-  transition/
Local Storage• Web storage and DOM storage (document  object model) are web application software  methods and protocols us...
Graphic• Canvas - Method of generating fast, dynamic  graphics using JavaScript• SVG - Method of displaying basic Vector  ...
Geolocation• Method of informing a website of the users  geographical location
Media• Video(MP4/H.264)• Audio (AAC/PCM/MP3)• http://blog.gingertech.net/wp-  content/uploads/2011/01/LCA_MM_AVProc2  011/...
Forms• Placeholder/Autofocus/AutoCapitalize/Type=e  mail, tel, url…• http://www.miketaylr.com/code/input-type-  attr.html
Forms
Responsive Design• Responsive Web design is the approach that  suggests that design and development should  respond to the...
Responsive Design
Mobile Web Applications• AppCache: Method of defining web page files  to be cached using a cache manifest  file, allowing ...
Mobile Web Applications
Usage of HTML5 in Mobile Web
Usage of HTML5 in Mobile Web
Usage of HTML5 in Mobile Web
Usage of HTML5 in Mobile Web
Mobile Design Patternshttp://mobile-patterns.com/
Instrumentation•   http://haz.io/•   http://caniuse.com/•   http://css3test.com/•   http://css3generator.com/•   http://cs...
HTML5 is the future of Mobile!
Thanks! @adamlu
Upcoming SlideShare
Loading in...5
×

HTML5 on Mobile(For Designer)

5,545

Published on

Introduced some HTML5 features on mobile and how to build and design the mobile web page from the perspective of designer.

Published in: Technology, Design
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,545
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
84
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

HTML5 on Mobile(For Designer)

  1. 1. HTML5 on Mobile (For Designer) Adam Lu http://adamlu.com/
  2. 2. Mobile Will Be Bigger Than Desktop Internet in 5 Yearshttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdf
  3. 3. iPhone Users Use Data / Internet Far More than Average Mobile Users
  4. 4. Why Mobile Web?• Web App vs. Native App• Web App to Native App
  5. 5. Think about Mobile User Interface• Screen Size• Interaction• Usage Scenarios• Network Environment• Hardware Feature• Performance
  6. 6. HTML5 for Mobile• CSS3 Support• Canvas and Video• GeoLocation API• Advanced Forms• Offline Support• Multimedia• Storage
  7. 7. PNG Alpha Transparency• Semi-transparent areas in PNG files• http://www.w3.org/Graphics/PNG/inline- alpha.html
  8. 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. 9. Rounded Corner• CSS3 Border Radius
  10. 10. Shadows• Box Shadows• Text Shadows
  11. 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. 12. Gradient• CSS3 Gradient• http://css-tricks.com/examples/CSS3Gradient
  13. 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. 14. Background• Multiple Background Image• http://www.css3.info/preview/multiple- backgrounds/• Background Size• http://www.css3.info/preview/background- size/
  15. 15. Border• Border Image• http://www.zenelements.com/blog/css3- border-image/
  16. 16. Transform• Rotate• Skew• Scale• http://www.zenelements.com/blog/css3- transform/
  17. 17. Transition• http://www.zenelements.com/blog/css3- transition/
  18. 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. 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. 20. Geolocation• Method of informing a website of the users geographical location
  21. 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. 22. Forms• Placeholder/Autofocus/AutoCapitalize/Type=e mail, tel, url…• http://www.miketaylr.com/code/input-type- attr.html
  23. 23. Forms
  24. 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/
  25. 25. Responsive Design
  26. 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”/>• …
  27. 27. Mobile Web Applications
  28. 28. Usage of HTML5 in Mobile Web
  29. 29. Usage of HTML5 in Mobile Web
  30. 30. Usage of HTML5 in Mobile Web
  31. 31. Usage of HTML5 in Mobile Web
  32. 32. Mobile Design Patternshttp://mobile-patterns.com/
  33. 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. 34. HTML5 is the future of Mobile!
  35. 35. Thanks! @adamlu
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×