Bobby Wilson

Introduction

If you ask any web designer what tool they use most in their web design toolbox, most will tell you Adobe Photoshop. Web designers love Photoshop because they can use a familiar image manipulation program to create a very colorful, graphical, photo rich website comp in a day. They show the client their comp, and the client gets the idea that the website is almost done, since they can see how the finish site should look right in front of them. The client is perplexed when you tell the client there is still a lot of work to do before the site is finished. The web designer sends you a “sliced” comp and their work is done.

Problems

The problem with a sliced Photoshop document is that everything is a graphic, the body text, headers, and menus. There is never a situation where this is acceptable. Even if you are making a single page that will only be up for a limited time, you will still at minimum want your page copy to be indexed in search engines, and the flexibility to edit the copy just in case there is a typo.

Usability / Accessibility

Anyone with a disability will struggle to view your page correctly. Users won’t be able to enlarge text, and a screen-reader won’t render the image text. The image text isn’t selectable for reuse. The web site won’t feel like a website because it is all graphics.

Information Architecture

When you comp with HTML you get a very nice representation of content hierarchy. The actual content of the site will be right there in black text and you will see the page for the content, and it won’t be able to hide behind a stylized graphical comp. This is essential at this stage because it keeps the content in check.

SEO

Any well designed site should be able to have the style sheet and graphics turned off and still function very well as just HTML, after all this is how the search engine bots see it. As an exercise turn off the style sheet and graphics from a sliced Photoshop document, and open that up in a browser, how does it look? As mentioned before, search engines won’t index image copy making your site poorly indexed, or invisible to them.

Development

When Photoshop comps are used just as a starting point for the actual markup and style-sheets, very little of the Photoshop comp even ends up in the finished site. The graphics that were formerly the body text are replaced with paragraph tags and actual text. The headers are replaced with actual heading tags, and menus replaced with list tags. Having actual markup and CSS instead of a sliced up image, will make it much more flexible. If you need to to make a change to the copy, you just make a change to the copy, instead of tracking down the Photoshop document editing the text and re-exporting the page.

Solutions

HTML from the start

You can use HTML from end to end. As a developer it is much easier to work with HTML created by the designer, rather than fixing the HTML that Photoshop generated, or scraping all of the generated HTML in favor of writing your own much cleaner HTML.

Client Presentation

When the designer does show the HTML comp to the client, the client will be correct in thinking that the site is almost finished. You will also be able to post the HTML comp on the web so that your client can look at the site in an actual browser instead of looking at an image file that may or may not be the actual size of the site. The more you can show your client the site in the browser the better off you will be. They will see the site in the context of a browser instead of removed from context as a graphic. The changes they request will be easy to fulfill as HTML.

Old Workflow

1. Designer hops into Photoshop starts creating their layout and graphics
2. Designer pastes in the copy from the client, or lorem ipsum if they don’t have copy
3. Designer saves out a Photoshop document comp and shows the client
4. Designer gets back into Photoshop to make the changes the client asks for
5. Designer saves out another Photoshop document comp and shows the client the new changes
6. Client finally approves the design
7. Designer hands off sliced up Photoshop document to development team
8. Developer turns the Photoshop generated HTML into something they can actually work with
9. Developer finds a typo, and tells the design team
10. Design team gets back into Photoshop to fix the error and then re-generate their Photoshop document
11. Developer puts graphic back into HTML
12. Developer shows designer the current state of the site
13. Designer wants to know why it doesn’t exactly like the Photoshop document they gave the developer
14. Argument continues, ultimately going nowhere… Leaving the designer and developer to go back and forth for almost all design changes
15. Client is disappointed with the wait every time something needs updated

New Workflow

1. Designer starts with copy from the client, or lorem ipsum if they don’t have copy
2. Designer structures the site with HTML using the proper markup for the respective content
3. Designer shows client current state of design, and explains that this is just the information architecture of the site but thought the client should understand, and provide feedback just based on the current hierarchy
4. Designer can hand off what they have to the developer to begin doing back-end work because it is HTML already and easy to change
5. Designer begins to work in styles, images, and any client feedback thus far
6. Designer shows client current state of design with styles, images, client changes, and maybe even some of how the back-end will work since the developers have already been working on their part
7. Designer can continue to work with developers to fine tune markup and styles, because they know HTML so well now
8. Developer finds typo, and changes it right there, after all it is just text
9. Developer shows designer current state of the site, and says, “it looks exactly like your comp”
10. Designer says “Duh, I wrote that HTML“
11. Client loves the speed at which the team works

The first workflow is actually how I have worked before, no joke, it seems funny to read, but that is really the way things can go sometimes. The second workflow is pretty realistic, when your designer knows HTML and CSS very well it creates a great collaborative environment between designer and developer. It lets both parties speak the same language and should speed up your workflow a lot. Designers will no longer complain about their Photoshop comps being trashed when the developers get ahold of them, because they will be writing the exact HTML that the developers will use. You can put the design on a web server immediately since it is already HTML and give your client a view of the site in an actual browser, the way the finished product will be. This can sometimes be a bit of a jump for the client if they always see the comp as a printed out image, or in image preview software.

Conclusion

It just makes sense to use HTML from start to finish. When you start with something usable you can just build upon, and manipulate that instead of always going back to Photoshop. Designers will also become better designers because they will be using the rules and standards of the web instead of Photoshops rules and standards. They will realize their limitations from the beginning. Photoshop gives you way more options than are possible on the web, so when it is exported for the web it doesn’t look how you plan it to, and just wait until you pass it to the development team. Photoshop is great for manipulating images, creating graphics, and layouts for print. Still feel free to use it to create graphical elements for your sites, but just leave the layout and styling to HTML and CSS.

Resources

• 37signals - Why We Skip Photoshop