HTML5 and Web Trends in 2013

49
HTML5 & Web Trends in 2013 Teerasej Jiraphatchandej User Group Manager Thai Adobe Developer Community facebook.com/thaiadc @teerasej

description

A presentation that I used on stage in Web technology seminar at Mahidol University (Salaya), Thailand. Created by Teerasej Jiraphatchandej. All great photo credited to whoever linked to with the link under the photo.

Transcript of HTML5 and Web Trends in 2013

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