Your SlideShare is downloading. ×
0
Modern Web Development
A new world...     HTML5 != Desktop     Exciting new opportunities     New browsers with one goal     Taking this show on ...
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 - i...
Developing for the unknown                      http://www.flickr.com/photos/smemon/5547552978/
http://www.flickr.com/photos/oufoufsworld/2274372737/                                                       Progressive enh...
Progressive Enhancement     Start with something that works     Then hijack it to become better     Test for support, then...
Gracefuldegradation
Graceful degradation     Start with a complex matter     Develop a fallback for other     environments     Maintain both  ...
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 m...
Responsive                                                      Designhttp://www.flickr.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 sniffing     Possible performance issue...
What about legacy browsers?http://www.flickr.com/photos/tallkev/256810217/
Polyfills           http://www.flickr.com/photos/bramus/7255025512/
http://modernizr.com/
http://html5please.com/
http://html5boilerplate.com/
http://stuffandnonsense.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 perfor...
http://easy-readers.net/books/adaptive-web-design/
http://futurefriend.ly
Upcoming SlideShare
Loading in...5
×

Modern web development

4,635

Published on

A presentation that was part of a video training course for Microsoft covering progressive enhancement, graceful degradation and responsive design. Full slides and code examples with information available on GitHub.

Published in: Education, Technology, Design

Transcript of "Modern web development"

  1. 1. Modern Web Development
  2. 2. A new world... HTML5 != Desktop Exciting new opportunities New browsers with one goal Taking this show on the road
  3. 3. Demo time:HTML5 magic built-in
  4. 4. 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.
  5. 5. Developing for the unknown http://www.flickr.com/photos/smemon/5547552978/
  6. 6. http://www.flickr.com/photos/oufoufsworld/2274372737/ Progressive enhancement
  7. 7. Progressive Enhancement Start with something that works Then hijack it to become better Test for support, then add on No broken promises
  8. 8. Gracefuldegradation
  9. 9. Graceful degradation Start with a complex matter Develop a fallback for other environments Maintain both Broken promises
  10. 10. Demo time:Progressive Enhancementvs. Graceful Degradation
  11. 11. 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
  12. 12. Responsive Designhttp://www.flickr.com/photos/indyplanets/5693612984/
  13. 13. Mediaqueries Apply CSS for certain scenarios Also available in JavaScript One design, many views
  14. 14. Demo time:Responsive design demos
  15. 15. Memo time: Mediaqueries allow for granular design changes No need for JS sniffing Possible performance issues :( matchMedia() can help Queries for connection speed needed
  16. 16. What about legacy browsers?http://www.flickr.com/photos/tallkev/256810217/
  17. 17. Polyfills http://www.flickr.com/photos/bramus/7255025512/
  18. 18. http://modernizr.com/
  19. 19. http://html5please.com/
  20. 20. http://html5boilerplate.com/
  21. 21. http://stuffandnonsense.co.uk/projects/320andup/
  22. 22. 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!
  23. 23. http://easy-readers.net/books/adaptive-web-design/
  24. 24. http://futurefriend.ly
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×