Lessons learned with HTML5

1,394 views

Published on

This short talk is about using HTML5 for making websites.

I'll mention libraries that make day-to-day work and compatibility a bit easier.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,394
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • some web sites - native apps on a few platforms\n\n
  • this short talk is about using HTML5 for making websites. \nlibraries that make day-to-day work and compatibility a bit easier.\n
  • So just a reminder: what is HTML5?\n
  • New version of the markup, CSS3 with new features and animation, Javascript\nUmbrella term - better than trying to sell 5 terms to a client\nSo - we need up to date browsers!\n\n
  • All of these browsers support HTML5 - getting better with every release\nbut not everyone is up-to-date!\nWhich browser causes the mode headaches? IE!\nIE8 on XP - end of life!\n
  • Let’s not forget the mobile browser -All very advanced\nPeople update their phones every 1 or 2 years\nOTA updates!\nNow we’re ready for HTML5!\n
  • Let’s start with the markup - it’s a set of new tags to use\ngone are the days of DIV ID = HEADER\nmicroformats - it’s great\nBUT older browsers\n\n
  • What happens when you try to style a HTML5 tag in an older browser - it doesn’t work?!\nText should be BIGGER and ORANGE... but it’s not\nThat’s IE7 on Vista\n
  • For our first fix: HTML5shim or shiv\nAdd to your page - code as normal - and it works in IE6, 7 and 8\nLets see that first page again...\n
  • The CSS has been applied correctly!\nThat’s just one example - what about the rest of HTML5, CSS3, Javascript ???\n\n
  • That’s where modernizer comes in - feature detection - then YOU decide\n
  • write your CSS with and without support for a certain feature\n\n
  • JS has 2 options\n\n
  • All these new features are great - but what if HAVE TO use a certain feature such as WebGL?\nor you’d prefer a newer browsers to view your site when possible?\n
  • Browser plugin - uses Google Chrome engine\nOpt-in\n
  • \n
  • \n
  • Web fonts a great - no longer are we tied to the operating system of the user for fonts!\n\n
  • \n
  • Caching rules, fixes for older browsers, unit tests, browser fav icons.\njQuery + Modernizer - cut out what you don’t need\n
  • \n
  • \n
  • A great example of both good design and CSS3 technology\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Lessons learned with HTML5

    1. 1. Lessons learned with
    2. 2. Neil Turnerweb & mobile developer
    3. 3. Lessons learned with
    4. 4. What is ?
    5. 5. HTML5 markup + CSS3 + Javascript APIs
    6. 6. The browsers
    7. 7. Don’t forget mobile!
    8. 8. <header> HTML5 markup </header>
    9. 9. <article> Hello </article> *taken from wikipedia
    10. 10. html5shim (or html5shiv)
    11. 11. <article> Hello </article> *taken from wikipedia
    12. 12. Exceptions?
    13. 13. Chrome Frame
    14. 14. Chrome Frame
    15. 15. What about fonts?
    16. 16. Use the WebFont Loader!
    17. 17. A solid foundation?
    18. 18. + + kitchen sink
    19. 19. Desktop? Tablet? Mobile?
    20. 20. CSS3 Media Queries
    21. 21. Responsive Web Design
    22. 22. http://mediaqueri.es
    23. 23. Adapt.js
    24. 24. Performance
    25. 25. Reduce the number of HTTP requests
    26. 26. Combine + CompressJavascript and CSS les
    27. 27. Page Speed YSlow
    28. 28. HTML5 gives us a TON of new features There’s a poly ll for that! Use HTML5 Boilerplate Make your site device responsive don’t forget about speed!
    29. 29. Thank you! @theothernt
    30. 30. Thank you! @theothernt

    ×