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 OReilly and other publishers
New techniques and old browsershttp://technbuzz.com/5-ways-ie-will-be-adored-by-people/
Our classic question Does it work in IE?http://www.sts.tu-harburg.de/projects/WEL/0911/images/Der%20Schrei.jpg
The question should be: Howcan I make my content accessibleeven if $technique isn´t available?
Not the rounded cornersare important, the content is!
Two strategies Get it done - somehow Relaxhttp://blog.crusy.net/wp-content/uploads/2008/09/macgyver.jpg
We produced the problem ‣ For years we tried to ﬁll 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.
With a simple hack you canget closer to a technique.
3D-transforms hovering in Firefoxhttp://jsﬁddle.net/Flocke/ZmGtA
3D-transforms only the front is readable in Operahttp://jsﬁddle.net/Flocke/ZmGtA
3D-transforms IE8: perfect for graceful degredationhttp://jsﬁddle.net/Flocke/ZmGtA
Think about fallback modern browsers IE8http://jsﬁddle.net/Flocke/BEJRM/
Think about usabilityhttp://wordpress.org/extend/plugins/wp-cirrus/
Dont fall in love with toolsand techniques and loose the sight for the user.
The three most important best practices Think Research Experimenthttp://goo.gl/NYGeI http://goo.gl/HbFx0 http://goo.gl/LohPq
Dont pretend a techniqueto work unless you have tested and conﬁrmed it!
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.
Example for extra effort‣ Deﬁne 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
Clients and colleagues should understand, that front-enddevelopment isn´t easily done!
We work in a hostile environment.http://bradfrostweb.com/blog/web/mobile-ﬁrst-responsive-web-design/
Our colleagues and clients don´t know this feeling.
‣ 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.
Our websites are interpreted by many programs that can easily be changed.
‣ at least 6 different browsers‣ different platforms (OS and machines)‣ mobile‣ responsive or not‣ performance‣ maintainability‣ special „features“ of $cms
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.
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.