

Make Your Mockup in Markup - justinl
http://24ways.org/2009/make-your-mockup-in-markup

======
dcurtis
Wow, this is exactly how _not_ to design.

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.

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.

As long as people design for the web by separating content from presentation,
we're never going to evolve into something better.

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.

~~~
BerislavLopac
I can only hope you're joking. Design, by itself, is pointless; content, by
itself, is the point.

~~~
sp332
Badly-presented content can be useless or misleading. Good design may not draw
attention to itself when you're paying attention to the content, but it's
still there. e.g. [http://graysuite.blogspot.com/2009/06/consider-my-mind-
blown...](http://graysuite.blogspot.com/2009/06/consider-my-mind-blown.html)

------
rbritton
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.

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.

~~~
tptacek
You may be missing the point. 100% of a mockup done in Photoshop won't render
in IE. It's a mockup.

~~~
rbritton
My point is that building a prototype that won't render correctly in IE (i.e.,
the browser likely in use by the commissioning client) as it's described in
that article is counter-productive. If the client can't see it as it's
intended, what's the point?

Building up the prototype to a point where it is universally compatible will
have two end results:

1\. The designer is building multiple functional pages and putting in all the
labor required.

2\. The designer is providing the client with a nearly fully-functional
page/site prior to full payment being received.

------
Zarathu
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.

~~~
jamesbritt
FTFA: "In the past we’ve put up with Photoshop because it was vital to
achieving our beloved rounded corners, drop shadows, outer glows, and
gradients."

No. Drawing tools beat markup because it's usually faster to draw (and redraw)
a layout than to work out the markup. More so if you are looking for a very
particular arrangement.

Working right in HTML it's easy to get stuck in a design because you can't
quite figure out how to make something look just so. You tend to use the
markup that's most familiar.

One risk to using a graphics tool: if you're busy with the rounded corners,
drop shadows, outer glows, and gradients you end up with a design that is near
impossible to accurately achieve with markup. Better to treat Photoshop as a
robust set of pencil and paper you can save to disk.

------
chrischen
When doing work for others, I still think drawing up something in Photoshop is
faster.

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.

------
rwhitman
I've worked in both PS and HTML for mockups.. in different team workflow
enviros, sometimes out of necessity, sometimes as experiments, laziness etc.

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.

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.

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...

~~~
Tyheam
Hacker News is simple, sure. But "hideous on the eyes"?

~~~
ahlatimer
I tend to agree that the design of HN isn't all that great. It's simple and
usable, but it's not the easiest on the eyes. I've seen simple sites that were
also beautiful. The design isn't what really matter on HN, though. The
community is what's beautiful, so I can ignore the fairly uninspired design.

~~~
krav
"The community is what's beautiful." You nailed it.

------
innovate
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.

------
Raphael
Flush it out good.

