a period of transition
DESCRIPTION
Talk held on a Smashing Magazine Meetup February, 27th 2012 in Frankfurt (Germany) about current problems with developers, designers and clients in front-end developmentTRANSCRIPT
![Page 1: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/1.jpg)
A Period of Transition
![Page 2: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/2.jpg)
‣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
Jens Grochtdreis
![Page 3: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/3.jpg)
We are in a period of transition
![Page 4: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/4.jpg)
New techniques and old browsers
http://technbuzz.com/5-ways-ie-will-be-adored-by-people/
![Page 5: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/5.jpg)
Does it work in IE?
http://www.sts.tu-harburg.de/projects/WEL/0911/images/Der%20Schrei.jpg
Our classic question
![Page 6: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/6.jpg)
The question should be: How can I make my content accessible even if $technique isn´t available?
![Page 7: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/7.jpg)
Not the rounded corners are important, the content is!
![Page 8: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/8.jpg)
Two strategies
RelaxGet it done - somehow
http://blog.crusy.net/wp-content/uploads/2008/09/macgyver.jpg
![Page 9: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/9.jpg)
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.
![Page 10: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/10.jpg)
‣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.
Polyfilling the gaps
![Page 11: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/11.jpg)
With a simple hack you can get closer to a technique.
![Page 12: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/12.jpg)
Some examples
http://blogs.sitepointstatic.com/images/tech/121-ie6-mod-orange.jpg
![Page 13: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/13.jpg)
‣ with the help of JavaScript and VRML
‣ with the help of JavaScript and extra images
‣ with extra images
Rounded corners
![Page 14: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/14.jpg)
‣ with the help of an IE-filter
Gradient
![Page 15: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/15.jpg)
‣ with the help of an IE-filter
rgba()
http://jsfiddle.net/Flocke/wsmxD/
![Page 16: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/16.jpg)
‣ with the help of JavaScript
‣ with the help of an IE-filter
box-shadow
http://jsfiddle.net/Flocke/FSH99/
![Page 17: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/17.jpg)
Don´t pretend everyone uses the internet like you!
![Page 18: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/18.jpg)
Nightly builds of browser X may be interesting. But think
about their usage!
![Page 19: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/19.jpg)
cutting edge technology is seldom for broader usage
![Page 20: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/20.jpg)
3D-transforms
http://jsfiddle.net/Flocke/ZmGtA
Chrome
![Page 21: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/21.jpg)
3D-transforms
http://jsfiddle.net/Flocke/ZmGtA
hovering in Firefox
![Page 22: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/22.jpg)
3D-transforms
http://jsfiddle.net/Flocke/ZmGtA
only the front is readable in Opera
![Page 23: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/23.jpg)
3D-transforms
http://jsfiddle.net/Flocke/ZmGtA
IE8: perfect for graceful degredation
![Page 24: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/24.jpg)
‣ 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.
Think about fallback
![Page 25: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/25.jpg)
Think about fallback
modern browsers
IE8
http://jsfiddle.net/Flocke/BEJRM/
![Page 26: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/26.jpg)
Good fallback
http://jsfiddle.net/Flocke/VzSHG/
IE8
modern browsers
This demo works with a CSS3-selector. So you can help oldIE with JavaScript and have a working fallback.
![Page 27: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/27.jpg)
Think about usability
http://wordpress.org/extend/plugins/wp-cirrus/
![Page 28: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/28.jpg)
Dont fall in love with tools and techniques and loose
the sight for the user.
![Page 29: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/29.jpg)
‣ 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.
![Page 31: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/31.jpg)
The three most important best practices
Think Research
http://goo.gl/HbFx0http://goo.gl/NYGeI
Experiment
http://goo.gl/LohPq
![Page 32: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/32.jpg)
Dont pretend a technique to work unless you have tested and confirmed it!
![Page 33: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/33.jpg)
There can be layouts where the JavaScript-driven rounded
corners won´t show.
![Page 34: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/34.jpg)
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.
![Page 35: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/35.jpg)
We should change our workflow
![Page 36: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/36.jpg)
Reduce time in Photoshop
![Page 37: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/37.jpg)
it is http:// not psd://
![Page 38: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/38.jpg)
Work early on a HTML-prototype with the designer
and the client!
![Page 39: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/39.jpg)
Demonstrate the difference between browsers
![Page 40: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/40.jpg)
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
![Page 41: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/41.jpg)
Clients and colleagues should understand, that front-end
development isn´t easily done!
![Page 42: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/42.jpg)
We work in a hostile environment.
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
![Page 43: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/43.jpg)
Our colleagues and clients don´t know this feeling.
![Page 44: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/44.jpg)
‣ 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.
![Page 45: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/45.jpg)
Our websites are interpreted by many programs that can
easily be changed.
![Page 46: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/46.jpg)
‣ at least 6 different browsers
‣ different platforms (OS and machines)
‣ mobile
‣ responsive or not
‣ performance
‣ maintainability
‣ special „features“ of $cms
![Page 47: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/47.jpg)
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.
![Page 48: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/48.jpg)
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.
![Page 49: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/49.jpg)
The web IS flexible
![Page 50: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/50.jpg)
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
![Page 51: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/51.jpg)
„Responsive Design“ is no new invention - it´s designing
for the webs true nature
![Page 52: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/52.jpg)
The user can consume our pages in the way he likes.
We have no control.
![Page 54: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/54.jpg)
Our layout is only a recommendation!
![Page 55: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/55.jpg)
http://www.flickr.com/photos/gavinbell/558733303/
![Page 56: A Period of Transition](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54b39c6b4a795944738b4869/html5/thumbnails/56.jpg)
Jens Grochtdreishttp://grochtdreis.de
http://twitter.com/Flockehttp://webkrauts.de
http://slideshare.net/Flocke669
This presentaion is licensedwith Creative Commons licence „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/http://creativecommons.org/licenses/by-sa/2.0/de/