Your SlideShare is downloading. ×
Modern web development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Modern web development

4,568
views

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 …

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

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,568
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
20
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×