Time to stop showing clients static design visuals

Demonstrating our designs to clients as XHTML/CSS pages rather than as static Photoshop or Fireworks has streamlined our workflow and helped us to set and manage a client’s expectations better than ever before.

The biggest headaches for web designers and developers often come not from design, or from writing meaningful markup and CSS but from browser related issues. I'll assume and hope that you are already writing markup for the maximum meaning rather than simply to achieve a visual result. I also hope that you use all of the available CSS selectors to help you avoid filling your markup with presentational elements and attributes. After-all that is the real goal of CSS 2.1 and CSS 3 selectors; to enable you to target an element for styling without needing to add a specific class or id.

Take this quotation example from my demonstration page.


<blockquote>
<p>{Quotation} Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua enim ad minim.</p>
<ul>
<li><a href="#">{Author}</a></li>
<li><a href="#">More reviews</a></li>
</ul>
</blockquote>

For my ideal design I would like to add { border-right : 1px solid #bfbfbf; } to the first list item but not the second. Of course I could add class="last-child" to my markup and specific CSS for that class to remove the border from that list item, but that would defeat the purpose of the CSS last-child selector and help only abandoned browsers that did not implement it (Internet Explorer 6, I'm looking your way).

What is the worst that can happen for people using IE6? They see an extra border on the second list item. As this is not a critical design element I can live with that.

Moving beyond progressive enhancement

I've written a lot about how it's time to move beyond progressive enhancement (where the least capable browser in your browser support chart is your benchmark) and instead we should design for people using the best browsers first. With many parts of CSS 3 already being widely implemented and some browser makers working hard to propose and implement new features, it's a really exiting time to be a designer working with CSS.

Many of the methods that we were forced to use to achieve particular visual results are simply not there anymore. Take rounded corners. I know I'm not alone in previously adding presentational elements (or inserting them into the DOM using JavaScript) simply to create a rounded corner box. Thankfully those days are largely behind us and we can rely on border-radius to take care of things, leaving markup free from presentational elements.


.content-sub blockquote {
padding : 20px;
background-color : #f8f7f3;
border : 1px solid #bfbfbf;
border-radius : 10px;
-moz-border-radius : 10px; /* Mozilla */
-webkit-border-radius : 10px; /* Webkit */
}

By now I can almost hear you thinking But what about Internet Explorer 6, that browser didn't support last-child? What about IE and Opera that haven't implemented border-radius yet?. You're probably also thinking that you can't use a CSS selector or property until it's been implemented in all browsers and that those that don't have faded away. Am I right?

But what is the worst that can happen for people using Internet Explorer or Opera? They see square rather than rounded corners. As this is not a critical design element I can live with that too and so can the designers of the new Twitter interface.

I've heard from many designers and developers that they really do understand that web sites need not look exactly the same in all browsers, but that clients (internal and external) still cling to this outdated notion. These clients often don't realize that designing for the web involves making designs that are more flexible and portable than it is about pixel perfect rendering across different browsers.

One of the main reasons why many people cling to the expectation that a web design should look the same across every browser is that one of the first things that designers show them is a carefully crafted static design made in Photoshop or Fireworks. Both of these are fantastic design tools, but the static JPG, PNG or TIFF files that they export are far from ideal tools for helping a client really understand how their pages will look and function when implemented in markup and CSS.


Availability

I’m interested in remote design and consulting projects world-wide and speaking at conferences in Asia, Australia, and New Zealand.

Available now

Talk to me

For work enquiries email

Or call Sue on +44 (0)1745 851848

Your call won’t cost more than calling the UK.

Studio

Stuff & Nonsense Ltd.
Eversleigh, Lon Capel
Gwaenysgor
Flintshire, LL18 6EJ, UK

I’m currently in Sydney, Australia