Hardboiled Web Design discusses developing web pages that work across browsers without perfectly matching designs. It recommends using new HTML5 elements, CSS3 features like rounded corners and gradients that degrade gracefully, and web fonts. While exact pixel matching is impossible, content and functionality can remain consistent through a flexible design approach that adapts to different browsers and devices.

1. Hardboiled Web Design Martin Hložek CreativeIndustriesWire

2. Introduction I work as an HTML coder at CIWire I have been coding for about 10 years Thereis Internet Explorer 6 since 2001 and westillthinkofit

3. 2003 The end of a reignofInterner Explorer the second browser wars MozillaFirefox Opera Safari Google Chrome

4. Whatdoesthe HTML coder do? He has to installcommonlyusedbrowsers IE6, IE7, IE8, IE9 Firefox 3.6, Firefox 4 Opera 11 Safari 5 Google Chrome 10 … and develop a web pagethatlooksexactlythesameatallbrowsers

5. Shouldthisreallybeourgoal? weuselessly limit ourselves just for backward compatibility we couldspendourtime betterthandebugging for IE6 (and others) and howwewilldebugfor mobile browser?(there are about 15 differentbrowsersfor mobile devicesnow)

6. Hardboiled Web Design authorAndy Clarke whatdoesHardboiledmean? literary style, usualya detective story "Hardboiled detective" is exposed to danger, violence, and he mustoftenexceed the law (hehas much in commonwiththe HTML coder :-)

7. Current status client is used to get a static graphic design (PSD, JPG, PNG…) from his designer and expects that the web page will be atevery pixel the same as thegraphic design, regardless of browser and device dowebsitesneedtolookexactlythesameineverybrowser.com?

8. Thepage may not look the same everywhere, but ... content and functionalitymustremainunchanged design must not break UX shouldcorrespond to device or browser capabilities  Whatwecan do withcurrentbrowsers?

9. Hardboiled HTML HTML 5 isknocking on thedoor newelementsnav, footer, header, section, aside, article, figure newformelements wecan use themnow input type=email, type=url, type=tel… Microformats – vCard, hCalendar

10. CSS3 Many things can be used today What does not work, usually degrades without harm to usability

11. Web fonts work in all commonly used browsers fontsquirrel- @font-face Generator greattool! uploadedfonts are automatically converted into the required format (TTF, OTF, EOT, SVG, WOFF) problemwithantialiasing (Cufonisalternative) licensing

12. Text shadows nice effect with little effort with noproblems in modern browsers ifitis not supportedonlyshadowismissing (no problem) h2 {text-shadow: 0 2px 3px rgba(0,0,0,0.8)} x,y offset, blur, color and opacity

13. Roundedcorners allbrowsers but IE (added in IE9) if itisnot supported itdegrades to sharp corners forolderFirefox and Webkityouhave to addvendor prefix div { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius: 5px; }

14. Gradients problematic support different syntax for each browser promiseforthefuture

15. Lot ofotherthings CSS3 multiplebackgrounds CSS3 transforms translate, scale, rotate… CSS3 transitions Media queries

16. It makes no sense to wait New versions of browsers are released at shorter intervals react to what is used new features are implemented Growing number of mobile browserusers