Real solutions, no tricks

1,772 views
1,721 views

Published on

English version of a talk given at SAE Alumni Convention 2011 in Berlin, covering modern web development with HTML5 and CSS3

Published in: Technology, Design
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
1,772
On SlideShare
0
From Embeds
0
Number of Embeds
471
Actions
Shares
0
Downloads
16
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Real solutions, no tricks

  1. 1. Real solutions, no tricks!
  2. 2. Jens Grochtdreis‣ Frontend developer‣ 10 years work in agencies‣ 12 years work in and for the web‣ Founder of the Webkrauts‣ Blogger‣ Author for several developer-magazines‣ technical book-editor for Galileo, OReilly, Pearson
  3. 3. http://www.wait-till-i.com/2011/03/14/html5-moving-from-hacks-to-solutions-my-talk-at-confoo-in-montreal/
  4. 4. Less documents,more applications
  5. 5. Missing controls
  6. 6. What can we do with CSS 2?
  7. 7. ‣ text formats‣ colours for fore- and background‣ positioning‣ floats‣ images are needed for many solutions‣ sometimes extra markup is needed for image- based solutions‣ transparence with side effects
  8. 8. HTML5-Highlights
  9. 9. One Doctype to rule them all<!DOCTYPE html>
  10. 10. Links around block elements
  11. 11. New semantic elements
  12. 12. New HTML5-Elementshttp://html5doctor.com/designing-a-blog-with-html5/#comment-17535
  13. 13. New semantic elements‣ On many occasions a replacement for DIV.‣ Based on the actual practise on the web.‣ No special functions in the browser. Just new elements.‣ WAI-ARIA inclusive!
  14. 14. New semantic‣ fine structure of the content‣ Browser takes on the headline hierarchy. On complex pages this is great! Outline-algorithm
  15. 15. http://html5doctor.com/
  16. 16. The outline-algorithm
  17. 17. Headlines‣ HTML4/XHTML: 6 headlines‣ HTML5: endless headlines
  18. 18. ‣ Each content inside the <body>-element is part of a "section". Sections can be nested.‣ The <body>-element is the main section. Further sections are implicitely (h1 - h6) or explicitly defined.‣ These elemens are defining explicitely a section: ‣ <body>, <section>, <article>, <aside>, <footer>, <header>, <nav>
  19. 19. Each section has its own headings-hierarchyhttps://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document
  20. 20. the outline - uncertainty from an MDN-article Online-Outliner-Toolhttp://gsnedders.html5.org/outliner/process.py
  21. 21. Does this threaten us?https://github.com/cboone/hypsometric-css/blob/master/html5/html5-defaults.css#L426
  22. 22. Think of the consequences!
  23. 23. ‣ HTML5-pages work in old browsers only via javascript. This concerns mainly IE including version 8.http://code.google.com/p/html5shim/ http://www.modernizr.com/
  24. 24. With Javascript
  25. 25. Without Javascript
  26. 26. HTML5-formelements
  27. 27. HTML5-formelements
  28. 28. Appropriatescreen keyboard
  29. 29. http://wufoo.com/html5/
  30. 30. Date Chrome 15 dev Firefox 5Opera 11.5
  31. 31. The placeholder-attributehttp://wufoo.com/html5/attributes/01-placeholder.html
  32. 32. What if a browser doesn‘tknow the new elements?
  33. 33. Then all new input-elements are rendered as <input type=“text“> and attributes get ignored.
  34. 34. Built-in Validation Opera 11.5 Mac Firefox 5 Mac Chrome 15 dev MacChrome doesn‘t play well with scaled pages and validation.
  35. 35. What if a browser doesn‘t know the validation? ‣ Ignore it! ( = Progressive enhancement) ‣ Load JS-alternatives with Modernizr (http://modernizr.com) ‣ Use polyfills ‣ https://github.com/Modernizr/Modernizr/ wiki/HTML5-Cross-Browser-Polyfills
  36. 36. Which gap is filled by CSS3?
  37. 37. new layout-modelmore possibilities with borders and backgrounds Less images animations new selectors
  38. 38. transparency with rgba() rounded corners gradientstransitions media-queries calc() multiple columns
  39. 39. The pros‣ Less decorative images are needed‣ Less Javascript is needed.‣ Animations and transitions via CSS are faster than via Javascript.‣ The sourcecode will be leaner and better readable as HTML is rarely used for decorative purpose.
  40. 40. http://maddesigns.de/teaserboxen-komplett-ohne-bilder-css3-adventskalender-tag-9-489.html
  41. 41. The consThere are none!
  42. 42. Okay, a small one!
  43. 43. modern selectors
  44. 44. ‣ Old IE (including version 8) don‘t understand them!‣ Those browser can be helped via Javascript.‣ If those selections aren‘t „vital“ the use of Javascript is okay.
  45. 45. http://jsfiddle.net/Flocke/VCSEB/
  46. 46. Can I useCSS3 and HTML5 today?
  47. 47. yes and no
  48. 48. Some new properties aren‘timplemented in any browser.
  49. 49. Does this work in IE, too?http://www.sts.tu-harburg.de/projects/WEL/0911/images/Der%20Schrei.jpg
  50. 50. http://www.findmebyip.com/litmus/
  51. 51. http://www.findmebyip.com/litmus/
  52. 52. http://www.findmebyip.com/litmus/
  53. 53. Progress depends on theslowest because of its wide distribution.
  54. 54. Old IE-versions ...http://blogs.sitepointstatic.com/images/tech/121-ie6-mod-orange.jpg
  55. 55. The Web is inherently flexible
  56. 56. „Responsive Design“is no new invention, despite the hype!
  57. 57. The consumer can useinformation from the Internet as he likes.
  58. 58. http://mediaqueri.es/
  59. 59. http://www.webdesignshock.com/responsive-design-problems/
  60. 60. important insight:There can not be THE ONE form of representation!
  61. 61. http://shouldwebsiteslookthesameinallbrowsers.com/
  62. 62. Our Layout is only a recommendation!
  63. 63. Agree early on thedevelopment strategy
  64. 64. IE ≠ modernhttp://css3generator.com/
  65. 65. Progressive Enhancement ‣ Focus is on the contenthttp://www.alistapart.com/articles/understandingprogressiveenhancement/
  66. 66. Graceful Degredation ‣ Focus is on the most modern browsers ‣ old browsers get a downgraded versionhttp://stuffandnonsense.co.uk/
  67. 67. Brutal Degredation including IE8 modern browsershttp://www.fillerati.com/
  68. 68. http://workdiary.de/
  69. 69. How to deal with IE
  70. 70. Fallback
  71. 71. ‣ Microsoft participates at the technical improvement of the internet starting with IE9.‣ For most techniques it doesn‘t matter if we talk about IE6 or IE8.‣ Some may be simulated by Javascript.‣ Some may be simulated by IE-filters.‣ Apart from that: graceful degredation / progressive enhancement
  72. 72. Even with moderntechniques you can do nonsense!
  73. 73. CSS3 ≠ always usefulhttp://codepo8.github.com/CSS3-Rainbow-Dividers/
  74. 74. http://csszengarden.com/?cssfile=http://www.brucelawson.co.uk/zen/sample.css
  75. 75. Frameworks/Tools
  76. 76. http://html5boilerplate.com/
  77. 77. http://www.modernizr.com/
  78. 78. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  79. 79. http://www.css3.me/
  80. 80. http://www.css3maker.com/
  81. 81. http://css3.mikeplate.com/
  82. 82. http://css3buttongenerator.com/
  83. 83. http://www.sciweavers.org/i2style
  84. 84. http://www.colorzilla.com/gradient-editor/
  85. 85. http://www.display-inline.fr/projects/css-gradient/
  86. 86. http://leaverou.me/demos/nth.html
  87. 87. The three most important best practices Think Investigate Experimenthttp://goo.gl/NYGeI http://goo.gl/HbFx0 http://goo.gl/LohPq
  88. 88. Twitter: @FlockeSlideshare: Flocke669
  89. 89. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de http://slideshare.net/Flocke669Diese Präsentation steht unterder Creative Commons Lizenz„Attribution-ShareAlike 2.0“http://creativecommons.org/licenses/by-sa/2.0/de/

×