A Period of Transition
4 likes3,513 views
The document discusses the evolving landscape of web development, emphasizing the importance of content accessibility over relying solely on modern techniques that may not function across all browsers. It advocates for adapting workflows to accommodate a diverse range of user environments while employing strategies such as polyfills and graceful degradation. Additionally, it highlights the significance of usability, semantic HTML, and the need for thorough testing of implemented techniques to ensure consistent user experiences.
A Period of Transition
- 1. A Period of Transition
- 2. Jens Grochtdreis ‣ Frontend Developer ‣ 10 years experience in internet agencies ‣ 13 years of work in and for the Web ‣ Founder of Web standards community „ Webkrauts“ ‣ Blogger ‣ Technical reviews for O'Reilly and other publishers
- 3. We are in a period of transition
- 4. New techniques and old browsers http://technbuzz.com/5-ways-ie-will-be-adored-by-people/
- 5. Our classic question Does it work in IE? http://www.sts.tu-harburg.de/projects/WEL/0911/images/Der%20Schrei.jpg
- 6. The question should be: How can I make my content accessible even if $technique isn´t available?
- 7. Not the rounded corners are important, the content is!
- 8. Two strategies Get it done - somehow Relax http://blog.crusy.net/wp-content/uploads/2008/09/macgyver.jpg
- 9. We produced the problem ‣ For years we tried to fill the technical gaps in IE with tricks. ‣ CSSZengarden was a whole site dedicated to such tricks and techniques. ‣ But now the browsers of the majority of our visitors don‘t need those tricks. ‣ Our mindset and that of our clients and co- workers should adjust.
- 10. Polyfilling the gaps ‣ We can use JavaScript to „fill the gaps“ (polyfills). ‣ If you mimic a JavaScript-technique with JavaScript it is okay. ‣ If you mimic CSS with JavaScript you should care for the „no-JS“-case. ‣ You should be aware of performance problems.
- 11. With a simple hack you can get closer to a technique.
- 12. Some examples http://blogs.sitepointstatic.com/images/tech/121-ie6-mod-orange.jpg
- 13. Rounded corners ‣ with the help of JavaScript and VRML ‣ with the help of JavaScript and extra images ‣ with extra images
- 14. Gradient ‣ with the help of an IE-filter
- 15. rgba() ‣ with the help of an IE-filter http://jsfiddle.net/Flocke/wsmxD/
- 16. box-shadow ‣ with the help of JavaScript ‣ with the help of an IE-filter http://jsfiddle.net/Flocke/FSH99/
- 17. Don´t pretend everyone uses the internet like you!
- 18. Nightly builds of browser X may be interesting. But think about their usage!
- 19. cutting edge technology is seldom for broader usage
- 20. 3D-transforms Chrome http://jsfiddle.net/Flocke/ZmGtA
- 21. 3D-transforms hovering in Firefox http://jsfiddle.net/Flocke/ZmGtA
- 22. 3D-transforms only the front is readable in Opera http://jsfiddle.net/Flocke/ZmGtA
- 23. 3D-transforms IE8: perfect for graceful degredation http://jsfiddle.net/Flocke/ZmGtA
- 24. Think about fallback ‣ Sometimes you can spare modern browsers with JavaScript and use CSS3 instead. ‣ But don‘t forget: although you don‘t use IE 8 and IE 7, Millions out there do. They must! ‣ Microsoft starts to get modern with IE9.
- 25. Think about fallback modern browsers IE8 http://jsfiddle.net/Flocke/BEJRM/
- 26. Good fallback modern browsers IE8 This demo works with a CSS3-selector. So you can help oldIE with JavaScript and have a working fallback. http://jsfiddle.net/Flocke/VzSHG/
- 28. Dont fall in love with tools and techniques and loose the sight for the user.
- 29. ‣ Look for useful purposes of techniques. ‣ Don´t do everything with this technique because it is possible. ‣ Don´t forget semantics, it´s an important buliding block for accessibility and for better maintainable code. ‣ Searchengines read the content of your HTML, not that of CSS or JavaScript.
- 31. The three most important best practices Think Research Experiment http://goo.gl/NYGeI http://goo.gl/HbFx0 http://goo.gl/LohPq
- 32. Dont pretend a technique to work unless you have tested and confirmed it!
- 33. There can be layouts where the JavaScript-driven rounded corners won´t show.
- 34. Example with HTML5-video ‣ A linklist on top of a HTML5-video works in all desktop browsers. ‣ On iPad no link is clickable. ‣ On Android they are. ‣ To get iPad working you must delete the „controls“-attribute and create your own controls.
- 35. We should change our workflow
- 36. Reduce time in Photoshop
- 37. it is http:// not psd://
- 38. Work early on a HTML- prototype with the designer and the client!
- 39. Demonstrate the difference between browsers
- 40. Example for extra effort ‣ Define the extra efforts for simulating modern techniques in oldIE. ‣ rounded corners and shadows for a site ‣ with CSS3: 30 minutes, 1 front-end dev ‣ for oldIE: appr. 4 to 5 hours front-end dev plus minimum the same amount for designer and back-end dev
- 41. Clients and colleagues should understand, that front-end development isn´t easily done!
- 42. We work in a hostile environment. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
- 43. Our colleagues and clients don´t know this feeling.
- 44. ‣ A web-page doesn´t look the same in different browsers on different OS on different machines etc. ‣ Our clients and colleagues work with software that has a direct output into ONE state: ‣ Photoshop, Word, Powerpoint ‣ Even a back-end developer knows one concrete CMS or interpreter.
- 45. Our websites are interpreted by many programs that can easily be changed.
- 46. ‣ at least 6 different browsers ‣ different platforms (OS and machines) ‣ mobile ‣ responsive or not ‣ performance ‣ maintainability ‣ special „features“ of $cms
- 47. Good demos ‣ Show a page designed with webfonts on a Mac and on Windows XP ‣ Show on both systems a page with unstyled form-controls ‣ Try on both systems to give a checkbox and a radio-button a padding or a bigger size. ‣ Lay a linklist above a HTML5-video on a desktop-browser and on an iPad.
- 48. In the end ... ‣ you won‘t see, which CMS drives the site, ‣ you won‘t see if the page was designed in Photoshop, Fireworks or Corel Draw. ‣ But you will see and feel, if the frontend- developer knows his craft and had the time to make a good job.
- 49. The web IS flexible
- 51. „Responsive Design“ is no new invention - it´s designing for the webs true nature
- 52. The user can consume our pages in the way he likes. We have no control.
- 54. Our layout is only a recommendation!
- 56. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de http://slideshare.net/Flocke669 This presentaion is licensed with Creative Commons licence „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/ http://creativecommons.org/licenses/by-sa/2.0/de/