Upload
jens-grochtdreis
View
1.723
Download
1
Tags:
Embed Size (px)
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 development
Citation preview
A Period of Transition
‣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
We are in a period of transition
New techniques and old browsers
http://technbuzz.com/5-ways-ie-will-be-adored-by-people/
Does it work in IE?
http://www.sts.tu-harburg.de/projects/WEL/0911/images/Der%20Schrei.jpg
Our classic question
The question should be: How can I make my content accessible even if $technique isn´t available?
Not the rounded corners are important, the content is!
Two strategies
RelaxGet it done - somehow
http://blog.crusy.net/wp-content/uploads/2008/09/macgyver.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.
‣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
With a simple hack you can get closer to a technique.
Some examples
http://blogs.sitepointstatic.com/images/tech/121-ie6-mod-orange.jpg
‣ with the help of JavaScript and VRML
‣ with the help of JavaScript and extra images
‣ with extra images
Rounded corners
‣ with the help of an IE-filter
Gradient
‣ with the help of an IE-filter
rgba()
http://jsfiddle.net/Flocke/wsmxD/
‣ with the help of JavaScript
‣ with the help of an IE-filter
box-shadow
http://jsfiddle.net/Flocke/FSH99/
Don´t pretend everyone uses the internet like you!
Nightly builds of browser X may be interesting. But think
about their usage!
cutting edge technology is seldom for broader usage
3D-transforms
http://jsfiddle.net/Flocke/ZmGtA
Chrome
3D-transforms
http://jsfiddle.net/Flocke/ZmGtA
hovering in Firefox
3D-transforms
http://jsfiddle.net/Flocke/ZmGtA
only the front is readable in Opera
3D-transforms
http://jsfiddle.net/Flocke/ZmGtA
IE8: perfect for graceful degredation
‣ 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
Think about fallback
modern browsers
IE8
http://jsfiddle.net/Flocke/BEJRM/
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.
Think about usability
http://wordpress.org/extend/plugins/wp-cirrus/
Dont fall in love with tools and 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 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.
The three most important best practices
Think Research
http://goo.gl/HbFx0http://goo.gl/NYGeI
Experiment
http://goo.gl/LohPq
Dont pretend a technique to work unless you have tested and confirmed it!
There can be layouts where the 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 clickable.
‣ On Android they are.
‣ To get iPad working you must delete the „controls“-attribute and create your own controls.
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 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-end
development 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 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.
The web IS flexible
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
„Responsive Design“ is no new invention - it´s designing
for the webs true nature
The user can consume our pages in the way he likes.
We have no control.
Our layout is only a recommendation!
http://www.flickr.com/photos/gavinbell/558733303/
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/