Make Your Mockup in Markup

Wow, this is exactly how <i>not</i> to design.<p>Separating layout and content is a mistake. Content should be inextricably linked to how it is presented. This is what design means; it means taking content and displaying it in an understandable and pleasing way. Every piece of content desires to be presented differently.<p>This is exactly why CSS is such a horrible pile crap. It trains designers to separate content from presentation, and it's not designed for page layout. CSS is designed for forcing content into little boxes.<p>As long as people design for the web by separating content from presentation, we're never going to evolve into something better.<p>Just look at the end result of this article. It's a boring, lifeless "design" as a container for any type of content. It goes completely counter the very soul of Zeldman's quotation.

Nearly every selector used in that mockup either: 1. Flat-out doesn't work in Internet Explorer; or 2. Requires certain hacks to align Internet Explorer's rendering with more compliant browsers. I can understand how it's much nicer to have a functional prototype, but I can't agree with it being worth the difference in the time invested.<p>Very, very few clients I've ever worked with use something other than Internet Explorer. It just doesn't happen, and I can't even count the times I've had to dumb down layouts because the requirements to overcome IE's limitations weren't worth the time investment.

The problem with mocking something up in XML/HTML is that you're particularly limited because you're forced to think in boxes. Photoshop doesn't put that restraint on you.

When doing work for others, I still think drawing up something in Photoshop is faster.<p>However when doing work for myself, I don't need to draw a mockup to show myself, I can simply picture what I want in my head. So I've tended to go straight to HTML for my own stuff, and go into Photoshop only to produce some graphical element. This way I also skip the painful part of transferring the pixel perfect photoshop design into rendered HTML/CSS.

I've worked in both PS and HTML for mockups.. in different team workflow enviros, sometimes out of necessity, sometimes as experiments, laziness etc.<p>Photoshop almost always produces more esthetically pleasing layouts. Its also a lot faster to knock out ideas. And if you have clients (not solo) its the only way to go.<p>When you work in HTML first its very easy to back yourself into a wall. You're constricted by boxes and CSS, and due to the difficulty making certain things work in CSS you're usually less apt to do something difficult, so you get very dry layouts.<p>Hacker News is a great example of a site that was designed in HTML haha. One giant column, no chrome, no styling of almost anything. Easy in CSS, hideous on the eyes...

I've found pen and paper to be the most flexible way to go. There is also something to be said about clients reactions to quick and dirty layouts done on paper... its more collaborative and inspires innovation more so than specific tools like photoshop or markup layouts allow for.

Flush it out good.