Modern web development

Modern Web Development

A new world... HTML5 != Desktop Exciting new opportunities New browsers with one goal Taking this show on the road

Demo time:HTML5 magic built-in

Memo time: HTML5 is backwards compatible and robust by design That doesn’t mean we should rely on that - it just means we can move forward safely HTML5 has a lot of in-built client side functionality we do not need to write in JavaScript ourselves.

Developing for the unknown http://www.ﬂickr.com/photos/smemon/5547552978/

http://www.ﬂickr.com/photos/oufoufsworld/2274372737/ Progressive enhancement

Progressive Enhancement Start with something that works Then hijack it to become better Test for support, then add on No broken promises

Gracefuldegradation

Graceful degradation Start with a complex matter Develop a fallback for other environments Maintain both Broken promises

Demo time:Progressive Enhancementvs. Graceful Degradation

Memo time: Be flexible and nothing will cause you grief in the future Don’t make end users suffer for your mistakes Understand the basics Don’t bother with PE when you are in a fixed environment

Responsive Designhttp://www.ﬂickr.com/photos/indyplanets/5693612984/

Mediaqueries Apply CSS for certain scenarios Also available in JavaScript One design, many views

Demo time:Responsive design demos

Memo time: Mediaqueries allow for granular design changes No need for JS sniﬃng Possible performance issues :( matchMedia() can help Queries for connection speed needed

What about legacy browsers?http://www.ﬂickr.com/photos/tallkev/256810217/

Polyﬁlls http://www.ﬂickr.com/photos/bramus/7255025512/

http://modernizr.com/

http://html5please.com/

http://html5boilerplate.com/

http://stuﬀandnonsense.co.uk/projects/320andup/

Rule of thumb:Giving legacy browsers aworking solution is better thana full one that means a lot ofwork and doesn’t perform.Be future friendly!

http://easy-readers.net/books/adaptive-web-design/

http://futurefriend.ly

http://hacks.mozilla.org	650
http://christianheilmann.com	536
http://feeds.feedburner.com	71
http://www.newsblur.com	35
http://thewebdesign.collected.info	34
http://mozilla.org.uk	28
http://www.jeffpalladino.com	21
http://htmlfive.collected.info	10
http://webdesigning.collected.info	8
https://hacks.mozilla.org	8
http://newsblur.com	4
http://127.0.0.1	3
http://www.hanrss.com	3
https://quality.mozilla.org	2
http://html55.collected.info	1
http://www.mozilla.org.uk	1
http://1kpl.us	1
http://www.ofelio.com	1
http://amplifize.com	1
http://translate.googleusercontent.com	1
http://xianguo.com	1
http://embedded.dreamwidth.net	1

Modern web development

by Christian Heilmann on Jun 11, 2012

Accessibility

Categories

Upload Details

Usage Rights

22 Embeds 1,421

Statistics

Modern web development Presentation Transcript