Talk held on a Smashing Magazine Meetup February, 27th 2012 in Frankfurt (Germany) about current problems with developers, designers and clients in front-end development

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/

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

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.

30. http://benthebodyguard.com/

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

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

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.

53. http://mediaqueri.es/

54. Our layout is only a
recommendation!

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

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/