Modern web development
Upcoming SlideShare
Loading in...5
×
 

Modern web development

on

  • 4,907 views

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 ...

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.

Statistics

Views

Total Views
4,907
Views on SlideShare
3,273
Embed Views
1,634

Actions

Likes
3
Downloads
17
Comments
0

25 Embeds 1,634

http://hacks.mozilla.org 706
http://christianheilmann.com 572
https://hacks.mozilla.org 124
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
http://newsblur.com 4
http://www.hanrss.com 3
http://127.0.0.1 3
http://schoolofweb.org 2
https://quality.mozilla.org 2
https://www.linkedin.com 2
http://www.linkedin.com 1
http://1kpl.us 1
http://translate.googleusercontent.com 1
http://xianguo.com 1
http://www.mozilla.org.uk 1
http://html55.collected.info 1
http://www.ofelio.com 1
http://amplifize.com 1
http://embedded.dreamwidth.net 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Modern web development Modern web development Presentation Transcript

  • 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.flickr.com/photos/smemon/5547552978/
  • http://www.flickr.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.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 issues :( matchMedia() can help Queries for connection speed needed
  • 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 perform.Be future friendly!
  • http://easy-readers.net/books/adaptive-web-design/
  • http://futurefriend.ly