Introduced some HTML5 features on mobile and how to build and design the mobile web page from the perspective of 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/

25. Responsive 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”/>
• …

27. Mobile Web Applications

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