Your SlideShare is downloading. ×
0
A Period of Transition
Jens Grochtdreis‣ Frontend Developer‣ 10 years experience in internet agencies‣ 13 years of work in and for the Web‣ Found...
We are in a period of     transition
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...
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/upload...
We produced the problem ‣ For years we tried to fill the technical gaps in   IE with tricks. ‣ CSSZengarden was a whole sit...
Polyfilling the gaps‣ We can use JavaScript to „fill the gaps“ (polyfills).‣ If you mimic a JavaScript-technique with  JavaSc...
With a simple hack you canget closer to a technique.
Some exampleshttp://blogs.sitepointstatic.com/images/tech/121-ie6-mod-orange.jpg
Rounded corners‣ with the help of JavaScript and VRML‣ with the help of JavaScript and extra images‣ with extra images
Gradient‣ with the help of an IE-filter
rgba()               ‣ with the help of an IE-filterhttp://jsfiddle.net/Flocke/wsmxD/
box-shadow                ‣ with the help of JavaScript                ‣ with the help of an IE-filterhttp://jsfiddle.net/Fl...
Don´t pretend everyoneuses the internet like you!
Nightly builds of browser Xmay be interesting. But think    about their usage!
cutting edge technology isseldom for broader usage
3D-transforms                                      Chromehttp://jsfiddle.net/Flocke/ZmGtA
3D-transforms                                    hovering in Firefoxhttp://jsfiddle.net/Flocke/ZmGtA
3D-transforms                           only the front is readable in Operahttp://jsfiddle.net/Flocke/ZmGtA
3D-transforms                              IE8: perfect for graceful degredationhttp://jsfiddle.net/Flocke/ZmGtA
Think about fallback‣ Sometimes you can spare modern browsers  with JavaScript and use CSS3 instead.‣ But don‘t forget: al...
Think about fallback                                            modern                                           browsers ...
Good fallback                                             modern browsers                                             IE8 ...
Think about usabilityhttp://wordpress.org/extend/plugins/wp-cirrus/
Dont fall in love with toolsand techniques and loose  the sight for the user.
‣ Look for useful purposes of techniques.‣ Don´t do everything with this technique  because it is possible.‣ Don´t forget ...
http://benthebodyguard.com/
The three most important      best practices   Think              Research              Experimenthttp://goo.gl/NYGeI   ht...
Dont pretend a techniqueto work unless you have tested and confirmed it!
There can be layouts wherethe JavaScript-driven rounded     corners won´t show.
Example with HTML5-video ‣ A linklist on top of a HTML5-video works in   all desktop browsers. ‣ On iPad no link is clicka...
We should change our workflow
Reduce time in Photoshop
it is http:// not psd://
Work early on a HTML-prototype with the designer      and the client!
Demonstrate the difference   between browsers
Example for extra effort‣ Define the extra efforts for simulating modern  techniques in oldIE.‣ rounded corners and shadows...
Clients and colleagues should  understand, that front-enddevelopment isn´t easily done!
We work in a hostile                        environment.http://bradfrostweb.com/blog/web/mobile-first-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 col...
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‣ maintainab...
Good demos‣ Show a page designed with webfonts on a Mac  and on Windows XP‣ Show on both systems a page with unstyled  for...
In the end ...‣ you won‘t see, which CMS drives the site,‣ you won‘t see if the page was designed in  Photoshop, Fireworks...
The web IS flexible
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
„Responsive Design“ is nonew invention - it´s designing  for the webs true nature
The user can consume our pages in the way he likes.   We have no control.
http://mediaqueri.es/
Our layout is only arecommendation!
http://www.flickr.com/photos/gavinbell/558733303/
Jens Grochtdreis                                                     http://grochtdreis.de                                ...
Upcoming SlideShare
Loading in...5
×

A Period of Transition

1,943

Published on

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

Published in: Technology, Design
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,943
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "A Period of Transition"

  1. 1. A Period of Transition
  2. 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. 3. We are in a period of transition
  4. 4. New techniques and old browsershttp://technbuzz.com/5-ways-ie-will-be-adored-by-people/
  5. 5. Our classic question Does it work in IE?http://www.sts.tu-harburg.de/projects/WEL/0911/images/Der%20Schrei.jpg
  6. 6. The question should be: Howcan I make my content accessibleeven if $technique isn´t available?
  7. 7. Not the rounded cornersare important, the content is!
  8. 8. Two strategies Get it done - somehow Relaxhttp://blog.crusy.net/wp-content/uploads/2008/09/macgyver.jpg
  9. 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. 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. 11. With a simple hack you canget closer to a technique.
  12. 12. Some exampleshttp://blogs.sitepointstatic.com/images/tech/121-ie6-mod-orange.jpg
  13. 13. Rounded corners‣ with the help of JavaScript and VRML‣ with the help of JavaScript and extra images‣ with extra images
  14. 14. Gradient‣ with the help of an IE-filter
  15. 15. rgba() ‣ with the help of an IE-filterhttp://jsfiddle.net/Flocke/wsmxD/
  16. 16. box-shadow ‣ with the help of JavaScript ‣ with the help of an IE-filterhttp://jsfiddle.net/Flocke/FSH99/
  17. 17. Don´t pretend everyoneuses the internet like you!
  18. 18. Nightly builds of browser Xmay be interesting. But think about their usage!
  19. 19. cutting edge technology isseldom for broader usage
  20. 20. 3D-transforms Chromehttp://jsfiddle.net/Flocke/ZmGtA
  21. 21. 3D-transforms hovering in Firefoxhttp://jsfiddle.net/Flocke/ZmGtA
  22. 22. 3D-transforms only the front is readable in Operahttp://jsfiddle.net/Flocke/ZmGtA
  23. 23. 3D-transforms IE8: perfect for graceful degredationhttp://jsfiddle.net/Flocke/ZmGtA
  24. 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. 25. Think about fallback modern browsers IE8http://jsfiddle.net/Flocke/BEJRM/
  26. 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. 27. Think about usabilityhttp://wordpress.org/extend/plugins/wp-cirrus/
  28. 28. Dont fall in love with toolsand techniques and loose the sight for the user.
  29. 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. 30. http://benthebodyguard.com/
  31. 31. The three most important best practices Think Research Experimenthttp://goo.gl/NYGeI http://goo.gl/HbFx0 http://goo.gl/LohPq
  32. 32. Dont pretend a techniqueto work unless you have tested and confirmed it!
  33. 33. There can be layouts wherethe JavaScript-driven rounded corners won´t show.
  34. 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. 35. We should change our workflow
  36. 36. Reduce time in Photoshop
  37. 37. it is http:// not psd://
  38. 38. Work early on a HTML-prototype with the designer and the client!
  39. 39. Demonstrate the difference between browsers
  40. 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. 41. Clients and colleagues should understand, that front-enddevelopment isn´t easily done!
  42. 42. We work in a hostile environment.http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  43. 43. Our colleagues and clients don´t know this feeling.
  44. 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. 45. Our websites are interpreted by many programs that can easily be changed.
  46. 46. ‣ at least 6 different browsers‣ different platforms (OS and machines)‣ mobile‣ responsive or not‣ performance‣ maintainability‣ special „features“ of $cms
  47. 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. 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. 49. The web IS flexible
  50. 50. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  51. 51. „Responsive Design“ is nonew invention - it´s designing for the webs true nature
  52. 52. The user can consume our pages in the way he likes. We have no control.
  53. 53. http://mediaqueri.es/
  54. 54. Our layout is only arecommendation!
  55. 55. http://www.flickr.com/photos/gavinbell/558733303/
  56. 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×