I’ve been reading Dan Cederholm’s book Handcrafted CSS and I have to say I’m really enjoying it. It’s exciting to get to read about and try out some CSS3 in the wild for progressive enhancement. Something that stood out for me right at the beginning of the book is his philosophy about flexibility as it applies to Web design. On page 3 Dan writes:

Flexibility in Web design is the mark of a true craftsman. Designing something statically in an image editor is one achievement, but allowing for give and take within the boundries of a page layout is what sets good Web design apart from great Web design. It’s taking the Web as a medium into account as part of the design process, and letting go of pixel perfection.

Flexibility is something I practice and IMHO makes the web better.

Moving on to the fun stuff:

My mind was racing with ideas as I was starting a new project for a bike ride event. The interface had to engaged visitors that were cyclists of all ages. Visualizing bicycle frame tubing and cyclists gear I took a chance at coding the main navigation with slight rounded corners on the bottom left and right using the border-radius property and adding a nice silvery 2px wide border. IE and Opera get regular corners but I think it looks fine. Of course the CSS doesn’t validate but I think we have to push it so browser vendors will support it. If we keep accommodating challenged browsers they will never change. Let the browser be what it is. If it’s a shitty browser it will show and when someone decides they want to try out a modern browser they will notice and convert. Ok, enough ranting. Here’s the code I used:

-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

I would like to encourage designers to use it. It’s a lot of fun to just plop in some code and change the look of a site.

Posted on Sep 02, 2009 & filed under design, web

Tags: browsers, css, flexibility, web design