Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Hardboiled	Web Design<br />Martin Hložek<br />CreativeIndustriesWire<br />
Introduction<br />I work as an HTML coder at CIWire<br />I have been coding for about 10 years<br />Thereis Internet Explo...
2003<br />The end of a reignofInterner Explorer <br />the second browser wars<br />MozillaFirefox<br />Opera<br />Safari<b...
Whatdoesthe HTML coder do?<br />He has to installcommonlyusedbrowsers<br />IE6, IE7, IE8, IE9<br />Firefox 3.6, Firefox 4<...
Shouldthisreallybeourgoal?<br />weuselessly limit ourselves just for backward compatibility<br />we couldspendourtime bett...
Hardboiled Web Design<br />authorAndy Clarke<br />whatdoesHardboiledmean?<br />literary style, usualya detective story<br ...
Current status<br />client is used to get a static graphic design (PSD, JPG, PNG…) from his designer<br />and expects that...
Thepage may not look the same everywhere, but ...<br />content and functionalitymustremainunchanged<br />design must not b...
Hardboiled HTML<br />HTML 5 isknocking on thedoor<br />newelementsnav, footer, header, section, aside, article, figure<br ...
CSS3<br />Many things can be used today<br />What does not work, usually degrades without harm to usability<br />
Web fonts<br />work in all commonly used browsers<br />fontsquirrel- @font-face Generator<br />greattool!<br />uploadedfon...
Text shadows<br />nice effect with little effort<br />with noproblems in modern browsers<br />ifitis not supportedonlyshad...
Roundedcorners<br />allbrowsers but IE (added in IE9)<br />if itisnot supported itdegrades to sharp corners<br />forolderF...
Gradients<br />problematic support<br />different syntax for each browser<br />promiseforthefuture<br />
Lot ofotherthings<br />CSS3 multiplebackgrounds<br />CSS3 transforms<br />translate, scale, rotate…<br />CSS3 transitions<...
It makes no sense to wait<br />New versions of browsers are released at shorter intervals <br />react to what is used<br /...
Upcoming SlideShare
Loading in …5
×

Hardboiled Web Design - English

1,409 views

Published on

Presentation of current trends in HTML5 and CSS3 based on the book Hardboiled Web Design from Andy Clarke http://hardboiledwebdesign.com/.

Published in: Technology, Design
  • Login to see the comments

  • Be the first to like this

Hardboiled Web Design - English

  1. 1. Hardboiled Web Design<br />Martin Hložek<br />CreativeIndustriesWire<br />
  2. 2. Introduction<br />I work as an HTML coder at CIWire<br />I have been coding for about 10 years<br />Thereis Internet Explorer 6 since 2001 and westillthinkofit<br />
  3. 3. 2003<br />The end of a reignofInterner Explorer <br />the second browser wars<br />MozillaFirefox<br />Opera<br />Safari<br />Google Chrome<br />
  4. 4. Whatdoesthe HTML coder do?<br />He has to installcommonlyusedbrowsers<br />IE6, IE7, IE8, IE9<br />Firefox 3.6, Firefox 4<br />Opera 11<br />Safari 5<br />Google Chrome 10<br />…<br />and develop a web pagethatlooksexactlythesameatallbrowsers<br />
  5. 5. Shouldthisreallybeourgoal?<br />weuselessly limit ourselves just for backward compatibility<br />we couldspendourtime betterthandebugging for IE6 (and others)<br />and howwewilldebugfor mobile browser?(there are about 15 differentbrowsersfor mobile devicesnow)<br />
  6. 6. Hardboiled Web Design<br />authorAndy Clarke<br />whatdoesHardboiledmean?<br />literary style, usualya detective story<br />"Hardboiled detective" is exposed to danger, violence, and he mustoftenexceed the law (hehas much in commonwiththe HTML coder :-)<br />
  7. 7. Current status<br />client is used to get a static graphic design (PSD, JPG, PNG…) from his designer<br />and expects that the web page will be atevery pixel the same as thegraphic design, regardless of browser and device<br />dowebsitesneedtolookexactlythesameineverybrowser.com?<br />
  8. 8. Thepage may not look the same everywhere, but ...<br />content and functionalitymustremainunchanged<br />design must not break<br />UX shouldcorrespond to device or browser capabilities<br /> Whatwecan do withcurrentbrowsers?<br />
  9. 9. Hardboiled HTML<br />HTML 5 isknocking on thedoor<br />newelementsnav, footer, header, section, aside, article, figure<br />newformelements<br />wecan use themnow<br />input type=email, type=url, type=tel…<br />Microformats – vCard, hCalendar<br />
  10. 10. CSS3<br />Many things can be used today<br />What does not work, usually degrades without harm to usability<br />
  11. 11. Web fonts<br />work in all commonly used browsers<br />fontsquirrel- @font-face Generator<br />greattool!<br />uploadedfonts are automatically converted into the required format (TTF, OTF, EOT, SVG, WOFF)<br />problemwithantialiasing (Cufonisalternative)<br />licensing<br />
  12. 12. Text shadows<br />nice effect with little effort<br />with noproblems in modern browsers<br />ifitis not supportedonlyshadowismissing (no problem)<br />h2 {text-shadow: 0 2px 3px rgba(0,0,0,0.8)}<br />x,y offset, blur, color and opacity<br />
  13. 13. Roundedcorners<br />allbrowsers but IE (added in IE9)<br />if itisnot supported itdegrades to sharp corners<br />forolderFirefox and Webkityouhave to addvendor prefix<br />div {<br /> -moz-border-radius:5px;<br /> -webkit-border-radius:5px;<br />border-radius: 5px;<br />}<br />
  14. 14. Gradients<br />problematic support<br />different syntax for each browser<br />promiseforthefuture<br />
  15. 15. Lot ofotherthings<br />CSS3 multiplebackgrounds<br />CSS3 transforms<br />translate, scale, rotate…<br />CSS3 transitions<br />Media queries<br />
  16. 16. It makes no sense to wait<br />New versions of browsers are released at shorter intervals <br />react to what is used<br />new features are implemented<br />Growing number of mobile browserusers<br />

×