Vote up?

This article confirms to me that I’ve been doing the right thing for many years now: Start my designs in Fireworks (I don’t use Photoshop for web design).

I create my designs in an image editor because I already know how the majority of the details in my design will look in IE6/IE7, IE8, Firefox 3.x, Google Chrome, Safari 3.x (at least) and Opera 9/10. By knowing all this, I know, off the bat, how I will be coding every single piece before even opening Dreamweaver.

Photoshop, or in my case, Fireworks, barely crashes… and because I’m a hard-core gamer, I’m VERY used to saving, so when Fireworks/Photoshop does crash, I don’t care, I either have my work already saved, and if I didn’t save my last changes, I would take 1/3 of the time to do them again.

No big deal, at all.

Now, did you know that your coding software may crash as well? In the middle of your mockup building process? Regardless of which method we use to mockup, we’re all in the same boat when it comes to software crashing.

So the above aspect, N/A in favor of mocking up in markup.

As far as text goes, just create your design without anti-aliasing on the text, the majority of users have their computers to display text like that anyway. Besides, you usually don’t design, or even code, with real, finalized text from the client. Uh… no.

Now, the example shown is too ideal:

1. You know right away where the content is going to go.
2. You have been provided the content.

#1. There’s no way to know off the bat which content should be wrapped in a DIV that’s going to be floated to the right… unless you design it first. The implications of modifying a page layout are horrendous if you have to make the change in the HTML+CSS+images.

And #2, probabilities of a client providing 100% of the content BEFORE designing… heck, before wireframing! are VERY slim.

I would LOVE to see someone start a mockup in markup so I can learn from him/her, I’m totally open minded to that. The only way for me to believe if this method is really SO MUCHBETTER than designing in Photoshop/Fireworks is to see someone go through the entire project management and design process.