Modern web development

  • 4,384 views
Uploaded 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.

More in: Education , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,384
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
18
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