Sam Brown

XHTML and CSS is part of design.

#333 22nd September 2008 at 1am Notes 6 Comments

In Andy Clarke’s latest blog entry at his newly created For a Beautiful Web site, Andy wrote an article about how he thinks it is Time to stop showing clients static design visuals.

I agree with a lot of what he says, and this statement from Andy in response to a comment at the bottom of the article really empowers the point behind this approach.

“I don’t think of working with CSS as part of the development phase. For me, development is ExpressionEngine and technical work. XHTML and CSS is part of design.”

For quite a while now I have realised this approach is a very valuable one, I can just as quickly build a site in XHTML and CSS as I can in Photoshop and this allows me to show to my clients exactly what they are getting. They sign-off on an actual interactive web page and not a flat Photoshop composition.

There are many benefits of doing this such as the lack of worry about font inconsistencies and stacks, bugs cross-browser and platform, static visuals, page fluidity, client interaction with page elements, use of the latest CSS selectors… and the list goes on.

I feel this approach works best for me but each job is different and I do still have clients signing off on comps just as much as actual web sites, this though, I feel will be the way forward. Also read:

Post a link to this on Twitter ↩

Comments

Matt Wilcox 22 September 2008, 04:34 #1

I think pigeon holing them in either category (design/tech) would be a mistake, as it overlooks a part of the process. Yes, HTML and CSS can be thought of as design because there are an almost unlimited number of way of executing the visual with those technologies, and each approach will have impacts on various things (elegance, code maintainability, accessibility, SEO, etc). It could even be used pre-visual to nail down and trail out different approaches (I’d be interested to see that workflow though).

However, they are also just tools. You can choose to use them in the design stage if that suits the workflow, but it has to be remembered that the code relies on the generating engine, and sometimes you just have to alter it to accommodate. Would that be hampering the design? I don’t think so.

Also food for thought, if you’re using working examples at the design stage before client sign-off, you don’t know how much is going to have to change – so do you do “the right thing” and re-factor your markup and CSS after design iterations that have left it less than ideal – or do you just leave it as is (re-factoring takes time and hits your profit margin)? A not-quite-right result of snipping and re-assigning bits of code?

I suppose the answer depends on whether ‘perfectionist’ code matters to you or not. I also think that the argument for not using flat images to show the client is far more important with RIAs than it is with bog-standard websites, simply because bog-standard sites can be shown effectively in graphics, but RIAs can’t – too much dynamic behaviour.

I’d choose the approach most fiting to the project and client. I don’t think there’s a black and white ‘best way’.

Dan 22 September 2008, 06:31 #2

I think a lot of people misunderstand what designers mean when they talk about photoshop mockups.

I don’t think anyone is lazy enough to never show their client an xHTML/CSS build, its just a matter of what stage in the process you are at.

You can’t rightly build 4 or 5 different fully developed mockups when you are proposing different visual styles to a client at the start of a project. If you jump that far in so soon, you make it feel like the design is quite far along, and the client will feel like they can’t ask for large changes.

Until a definite style has been agreed upon, I think its just a waste of time to make css templates for each design, when only one will be carried forward. Also, the client will start criticising the interaction and they ask questions like “why don’t an of the links go anywhere” and you get bogged down in explaining that the website doesn’t yet have any functionality, in which case you are no better off than with an image. You can easily show link states in a static mockup with annotations.

Of course if you could make fully working models for your clients they’d be very impressed, but I think that impressive mockup would be counter balanced y their anger that you missed an agreed deadline because you wanted to make all the designs into xHTML/css when they only needed to sign off on the visual style.

In short – images for the client to choose appearance, xHTML/css to show them functionality: only after the style has been agreed upon.

Darren McPherson 23 September 2008, 06:47 #3

I have to disagree with xhtml + css as the design phase. To me it doesn’t really make sense because you you are adding an extra stage in the “design phase” which is mark up. As I understand it, you still have to go through the photoshop stage. Plus it’s highly likely that designers or front end developers will get too attached to the marked up page(s).

I don’t know. I’m working on a project at the moment and was forced to work on the mark up before the designs were signed off. Now a whole snowball of changes are to be made and it’s quite cumbersome and time consuming.

It’s fair enough to create snippets of markup to show functionality (sliding js effects or what ever). But any further than that, with bad clients you are in for a rough ride.

Sam Brown 23 September 2008, 09:43 #4

Thanks for the super comments guys, I enjoyed reading your thoughts.

One of the projects which I have been working on recently I feel is a big factor in why I agree with what Andy Clarke said, the content for the site was completed and given to me well before I started work on the design. The first thing I did was create the markup for the site in XHTML, headings, paragraphs, lists and so on, this then allowed me to view the overall structure of the site before I started to design any element of the page.

There is always a lot of discussion centred around the fact that designers should design and developers should code, this is where I strongly disagree and believe that designers should be coding just as frequently as they design. I have worked on several projects at Your Design in HTML & CSS, an XHTML Slicing outfit, and many of the designs that come from designers that don’t code have false expectations in terms of how the design will work in the web browser, be it rollovers, transitions or fonts.

I still firmly believe that XHTML and CSS is part of the design phase, but I absolutely realise that not all jobs are going to require it, in fact my current project is Photoshop first, code second. I appreciate you taking the time to comment.

Darren McPherson 23 September 2008, 12:19 #5

I can understand where you are coming from in that sense, it would remove 99 percent of the differences between the transition of a flat design and a marked up page. I am very similar in the sense that I markup just the content without styles, so that I know the webpage makes sense to blind, screen readers and search spiders. But I feel that creating flat image designs is a more efficient way of getting your designs across for sign off.

However, I may yet get a project that would benefit from this way.

Sidenote: If the sketches are good enough with a colour(color) palette signed off and a styleguide (for links, text etc) is agreed. Then why not.

bah im babbling.

Pat Dynek 30 September 2008, 06:47 #6

Everything depends on time pressure.
Need to do it quick ? Then Photoshop + Dreamwaver simultaneously and printscreens to place design’s bits&bobs.
Don’t need to rush ? So Photoshop only with all the techniques exercised throughout years of using it – ACE never been given for free.

Sometimes worflow makes you to start with option 1, then you’ll avoid gaps you can’t afford. Then its justified.

Commenting has closed for this article. Feel free to me.

Sam Brown co-founded Iterate, and was previously VP of Design at Foursquare. Based in NYC.

– Dribbble • Endorse • Facebook • Foursquare • Instagram • Twitter