html5 on mobile(for designer)

HTML5 on Mobile (For Designer)

Adam Luhttp://adamlu.com/

Mobile Will Be Bigger Than Desktop Internet in 5 Years

http://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdf

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 Feature• Performance

HTML5 for Mobile

• CSS3 Support• Canvas and Video• GeoLocation API• Advanced Forms• Offline Support• Multimedia• Storage

PNG Alpha Transparency

• Semi-transparent areas in PNG files• http://www.w3.org/Graphics/PNG/inline-alph

a.html

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/

Rounded Corner

• CSS3 Border Radius

Shadows

• Box Shadows• Text Shadows

Font

• Support for the TrueType (.ttf)and OpenType (.otf) outline font formats in @font-face

• http://www.zenelements.com/blog/css3-embed-font-face/

Gradient

• CSS3 Gradient• http://css-tricks.com/examples/CSS3Gradient

Layout

• CSS3 Multiple Column• http://www.zenelements.com/blog/css3-multi

ple-columns/• CSS3 Flexible Box Layout• http://www.html5rocks.com/en/tutorials/flex

box/quick/

Background

• Multiple Background Image • http://www.css3.info/preview/multiple-backg

rounds/

• Background Size• http://www.css3.info/preview/background-siz

e/

Border

• Border Image• http://www.zenelements.com/blog/css3-bord

er-image/

Transform

• Rotate• Skew• Scale• http://www.zenelements.com/blog/css3-trans

form/

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 used for storing data in a web browser.

Graphic

• Canvas - Method of generating fast, dynamic graphics using JavaScript

• SVG - Method of displaying basic Vector Graphics features using the embed or object elements

Geolocation

• Method of informing a website of the user's geographical location

Media

• Video (MP4/H.264)• Audio (AAC/PCM/MP3)• http://blog.gingertech.net/wp-content/upload

s/2011/01/LCA_MM_AVProc2011/#slide1

Forms

• Placeholder/Autofocus/AutoCapitalize/Type=email, 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 user’s behavior and environment based on screen size, platform and orientation. http://www.alistapart.com/articles/responsive-web-design/

Responsive Design

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”/>

• …

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 Patterns

http://mobile-patterns.com/

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/

HTML5 is the future of Mobile!

Thanks!

@adamlu