• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
A Period of Transition
 

A Period of Transition

on

  • 1,896 views

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

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

Statistics

Views

Total Views
1,896
Views on SlideShare
1,322
Embed Views
574

Actions

Likes
2
Downloads
1
Comments
1

4 Embeds 574

http://grochtdreis.de 555
http://blog.grochtdreis.de 16
http://www.netvibes.com 2
http://reader.webentdecker.de 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    A Period of Transition A Period of Transition Presentation Transcript

    • A Period of Transition
    • 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
    • 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.de/projects/WEL/0911/images/Der%20Schrei.jpg
    • 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/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.
    • 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.
    • 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/Flocke/FSH99/
    • 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: 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 modern browsers IE8http://jsfiddle.net/Flocke/BEJRM/
    • 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/
    • 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 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 Experimenthttp://goo.gl/NYGeI http://goo.gl/HbFx0 http://goo.gl/LohPq
    • 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 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-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 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 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 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/