Skip to main content

Hardboiled Design by Andy Clarke


Andy Clarke is UK based designer, author and speaker who has a passion for design, CSS and web accessibility.
Andy Clarke has been called a lot of things since he started working on the web at Stuff and Nonsense ten years ago. His ego likes words like ambassador for CSS.

Andy is a member of the Web Standards Project and a former invited expert to the W3C's CSS Working Group. Andy regularly writes about creating beautiful, accessible web sites and he speaks at events worldwide. He took ten months out of his life to write the best-selling book Transcending CSS: The Fine Art Of Web Design, but Andy's passion is amazing web design. He loves making designs for the web, writing about design and teaching it at workshops and conferences all over the world.

Hardboiled Web Design will be hard, not soft-boiled. Like a hardboiled detective, it will pull no punches in explaining HTML5 and CSS3 in the context of the complete process of making the web. It will take a cold, hard look at the realities of designing and developing for an ever changing and expanding browser/device landscape and suggest radical new ways to deal with the issues of coping with older browsers and technologies.

He say's:-

(i)   Websites will never look the same in all browsers. Stop worrying about it and carry on!

(ii)  If you do consider browsers then design from the top down, not the bottom up.

(iii) You show your designs to the client in Fireworks and HTML.

Andy Clarke doing his 'Hardboiled Web Design' talk at the DIBI Web Conference.
You can see video here:-  http://player.vimeo.com/video/17137962?

Books by Andy Clarke :-

(i)   Transcending CSS: The Fine Art of Web Design
(ii)  Designing Web Accessibility for a Beautiful Web, DVD (Voices That Matter)
(iii) Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting
(iv)  CSS Artistry: A Web Design Master Class (includes full-color Transcending CSS book and 2 1/2-hour Inspired CSS DVD video
(v)   Hardboiled Web Design
(vi)  Inspired CSS: Styling for a Beautiful Web, DVD
Labels:

Comments

Post a Comment

Popular posts from this blog

How to Conditionally Add Style Sheets for IE

Why use conditional stylesheets? You got problems, they need fixin' Keeps your code hack-free and valid Keeps your main stylesheet clean Perfectly acceptable technique, sanctioned by Microsoft And remember, these conditional tags don't have to be used only for CSS. You could load JavaScript, or even use them down in the content of your site to display special IE-specific messages. Target ALL VERSIONS of IE <!--[if IE]>         <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]--> Target everything EXCEPT IE <!--[if !IE]><!-->         <link rel="stylesheet" type="text/css" href="not-ie.css" />  <!--<![endif]--> Target IE 7 ONLY <!--[if IE 7]>         <link rel="stylesheet" type="text/css" href="ie7.css"> <![endif]--> Target IE 6 ONLY <!--[if IE 6]>         <link rel=...
Post a Comment
Read more

Create progressively enhanced 3D CSS rollovers

Christian Heilmann, principal evangelist for HTML5 and the open web at Mozilla, explains how to progressively enhance CSS rollover effects into the 3D space Rollovers are a great thing. They make things more obvious that they are interactive and they allow us to show something different without giving up valuable screen estate. I remember one time when I won a pitch for my company by showing a rollover effect on a menu button. Granted, that was 1998 and nowadays we are less excited about them. This is a shame though as we have a lot more things to play with in browsers these days. Here we'll take a look at using CSS, 3D CSS transformations, transitions and CSS animations to create some great rollover styles without telling people that they need to have certain browser. Instead, we'll fall back to a plain rollover for all CSS capable browsers. For brevity's sake we won't have all browser prefixes in the code examples here, but they are in the final product...
Post a Comment
Read more

What is SASS?

Examples: Mixins CSS #data { float: left; margin-left: 10px; } #data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; } Examples: Selector Inheritance SCSS .error { border: 1px #f00; background: #fdd; } .error.intrusion { font-size: 1.3em; font-weight: bold; } .badError { @extend .error; border-width: 3px; } SASS .error border: 1px #f00 background: #fdd .error.intrusion font-size: 1.3em font-weight: bold .badError @extend .error border-width: 3px Examples: Selector Inheritance CSS .error, .badError { border: 1px #f00; background: #fdd; } .error.intrusion, .badError.intrusion { font-size: 1.3em; font-weight: bold; } .badError { border-width: 3px; } Examples: Conditional Statements SASS =views-row($margin: $baseline, $divide: false, $border_color: #CCC) +pie-clearfix @if $divide border-bottom: 1px solid $border_color margin-bottom: $margin * 0.5 @else margin-bottom: $margin * 0.5...
Post a Comment
Read more