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.

http://benthebodyguard.com/

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.

http://mediaqueri.es/

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/