The Markup Informs The Design
37signals recently talked about why they skip Photoshop mock-ups when designing a site. Although this seems to spit in the eye of the established method, I couldn't agree more. This is a philosophical concept, more about the nature of the web than the process of building it. But there are many reasons to cut right to the HTML, the least of which being: you shouldn't put the cart before the horse.
Producing a design mock-up in Photoshop is likely derived from pre-web-era print-design processes. But web design is a different beast entirely. And don't think I'm suggesting un-installing Photoshop. Photoshop should be used as needed as the CSS comes together.
Styling Data
The first time I used an alternate media style sheet (for printer-specific styles) I had a moment of clarity: HTML is only the medium through which data is displayed. The data source (SQL, text files, etc.) is immaterial to the client computer. XHTML only reinforces that concept, literally saying that this web page is XML formatted data. It's the web designer's job to style that data for one or more media (screen, print, handheld, etc.).
Designing in Photoshop first is like building the skin before the skeleton. Sure, the designer can anticipate the skeleton but this is what scientists call ass backwards.
The Document Outline
When I put together a site, the document outline is the structure through which all other content must follow. If you remember putting together outlines in school prior to writing a paper, an HTML outline is very similar. But instead of using bullet points or roman numerals, an HTML outline uses header tags (H1 to H6). These headers are buckets to which all other markup is placed. Structuring information this way is not only more readable but more accessible as well.
If you start in Photoshop, this structure is difficult (although not impossible) to anticipate.
Incidentally, Firefox has a nice add-on called Web Developer that includes a "View Document Outline" tool. I find this very useful to make sure my outline is properly structured.
Eliminating Risks
CSS is very flexible and with recent browser releases (I'm looking at you Internet Explorer) the majority of Photoshop layouts can successfully be transformed into CSS. But make no mistake, if you develop the markup hand-in-hand with the design, you'll never run into any designs that are simply impossible to translate. Lazy excuse? Possibly. But it eliminates some risk.
Caveats
Depending on your developing policies and client interactions, mock-ups may be a requirement. But if you have some leverage in your work environment I definitely recommend merging the Photoshop and Markup stages.
Comments
No comments yet.