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,238 views
1,160 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,238
On SlideShare
0
From Embeds
0
Number of Embeds
82
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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 />

×