Download - HTML5 and Web Trends in 2013

Transcript
Page 1: HTML5 and Web Trends in 2013

HTML5 & Web Trends in 2013Teerasej JiraphatchandejUser Group ManagerThai Adobe Developer Community

facebook.com/thaiadc@teerasej

Page 2: HTML5 and Web Trends in 2013

TRENDS.

Page 3: HTML5 and Web Trends in 2013
Page 4: HTML5 and Web Trends in 2013

thaiadc.com

HTML5 & CSS3

Page 5: HTML5 and Web Trends in 2013

thaiadc.com

Closing Gap between Native & Web

Page 6: HTML5 and Web Trends in 2013

thaiadc.comhttp://www.flickr.com/photos/shemp65/5958374472/

Page 7: HTML5 and Web Trends in 2013

thaiadc.com

Page 8: HTML5 and Web Trends in 2013

thaiadc.com

More Framework = More Focus on Idea

Page 9: HTML5 and Web Trends in 2013

thaiadc.com

Page 10: HTML5 and Web Trends in 2013

thaiadc.com

Languages and frameworks pop up, become fashionable, and die out quicker than I can actually keep up.

- Ian Hickson, HTML5 Specification Editor

Page 11: HTML5 and Web Trends in 2013

thaiadc.com

Edge of CSS

Page 12: HTML5 and Web Trends in 2013

thaiadc.comhttp://www.flickr.com/photos/thomashawk/156398965/

Page 13: HTML5 and Web Trends in 2013

•CSS Region

•CSS Exclusion

•CSS Shader

Page 14: HTML5 and Web Trends in 2013

thaiadc.com

Demo.

Page 15: HTML5 and Web Trends in 2013

thaiadc.com

More Responsive Pattern

Page 16: HTML5 and Web Trends in 2013

thaiadc.com

Mobile-first& Content-first

Page 17: HTML5 and Web Trends in 2013

thaiadc.comhttp://www.flickr.com/photos/johanl/4375773612/

Page 18: HTML5 and Web Trends in 2013

thaiadc.com

Tiny Screen Challenge

Page 19: HTML5 and Web Trends in 2013

thaiadc.com

What’s Next Screen?

Page 20: HTML5 and Web Trends in 2013

thaiadc.com

Page 21: HTML5 and Web Trends in 2013

thaiadc.com

Bandwidth focus

Page 22: HTML5 and Web Trends in 2013

thaiadc.comhttp://www.flickr.com/photos/72389825@N02/6536235177/

Page 23: HTML5 and Web Trends in 2013

thaiadc.com

Page 24: HTML5 and Web Trends in 2013

thaiadc.com

Page 25: HTML5 and Web Trends in 2013

thaiadc.com

WIFI EDGE 3G 4G

Page 26: HTML5 and Web Trends in 2013

thaiadc.com

More Simplification

Page 27: HTML5 and Web Trends in 2013

thaiadc.com

Simplified information

Page 28: HTML5 and Web Trends in 2013

thaiadc.com

Page 29: HTML5 and Web Trends in 2013

thaiadc.com

Page 30: HTML5 and Web Trends in 2013

thaiadc.com

Simplified Interaction

Page 31: HTML5 and Web Trends in 2013

thaiadc.comhttp://www.flickr.com/photos/lucianvenutian/1142630637/

Page 32: HTML5 and Web Trends in 2013

thaiadc.com

Era of Flat Design

Page 33: HTML5 and Web Trends in 2013

thaiadc.com

Page 34: HTML5 and Web Trends in 2013

thaiadc.com

Page 35: HTML5 and Web Trends in 2013

thaiadc.com

Content Strategy

Page 36: HTML5 and Web Trends in 2013

thaiadc.com

Web App build on single cores

Page 37: HTML5 and Web Trends in 2013

thaiadc.com

140

Page 38: HTML5 and Web Trends in 2013

thaiadc.com

Page 39: HTML5 and Web Trends in 2013

thaiadc.com

End of Pages,Era of information chunks

Page 40: HTML5 and Web Trends in 2013

thaiadc.comhttp://www.flickr.com/photos/imuttoo/2631466945/

Page 41: HTML5 and Web Trends in 2013

thaiadc.com

Page 42: HTML5 and Web Trends in 2013

thaiadc.com

<div>

Page 43: HTML5 and Web Trends in 2013

thaiadc.com

<header><footer><article><section><figure><...>

Page 44: HTML5 and Web Trends in 2013

thaiadc.com

When your web shows in cars or eyeglasses. You’ll not talk about resizing browser’s width for iPhone or Android

- Karen McGrane, User Experience Strategist

Page 45: HTML5 and Web Trends in 2013
Page 46: HTML5 and Web Trends in 2013

Conclusion

Page 47: HTML5 and Web Trends in 2013

Conclusion

• Web VS. Native: Get more heat

• Mobile Design: Goes more experiment

• Visual Design: More simplified (please)

• Content Strategy: More seriously important

Page 48: HTML5 and Web Trends in 2013

More info

• html.adobe.com

• www.thaiadc.com

Page 49: HTML5 and Web Trends in 2013

ขอบคุณครับ :)Teerasej JiraphatchandejUser Group ManagerThai Adobe Developer Community

facebook.com/thaiadc@teerasej