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 OReilly and other publishers

3.
We are in a period of transition

4.
New techniques and old browsershttp://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: Howcan I make my content accessibleeven if $technique isn´t available?

7.
Not the rounded cornersare important, the content is!

8.
Two strategies Get it done - somehow Relaxhttp://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 canget closer to a technique.

12.
Some exampleshttp://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-filterhttp://jsfiddle.net/Flocke/wsmxD/

16.
box-shadow ‣ with the help of JavaScript ‣ with the help of an IE-filterhttp://jsfiddle.net/Flocke/FSH99/

17.
Don´t pretend everyoneuses the internet like you!

18.
Nightly builds of browser Xmay be interesting. But think about their usage!

19.
cutting edge technology isseldom for broader usage

20.
3D-transforms Chromehttp://jsfiddle.net/Flocke/ZmGtA

21.
3D-transforms hovering in Firefoxhttp://jsfiddle.net/Flocke/ZmGtA

22.
3D-transforms only the front is readable in Operahttp://jsfiddle.net/Flocke/ZmGtA

23.
3D-transforms IE8: perfect for graceful degredationhttp://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 IE8http://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/

27.
Think about usabilityhttp://wordpress.org/extend/plugins/wp-cirrus/

28.
Dont fall in love with toolsand 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.

30.
http://benthebodyguard.com/

31.
The three most important best practices Think Research Experimenthttp://goo.gl/NYGeI http://goo.gl/HbFx0 http://goo.gl/LohPq

32.
Dont pretend a techniqueto work unless you have tested and confirmed it!

33.
There can be layouts wherethe 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-enddevelopment 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

50.
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

51.
„Responsive Design“ is nonew 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.

53.
http://mediaqueri.es/

54.
Our layout is only arecommendation!

55.
http://www.flickr.com/photos/gavinbell/558733303/

56.
Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de http://slideshare.net/Flocke669This 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/