In building a website for a client, one usually builds clients, one usually builds a few mockups with different themes to give the client an idea of what the site will look like with one of a few options. They can tell the designer what changes they want, which can be made relatively easily to the mockup before the theme is actually built for the site.
The mockups are supposed to be quick and easy to build and modify, allowing designers to avoid dealing with all of the nuances of CSS and HTML at this early stage. Designers shouldn’t be held to any limits at this point: They design what they think the site should look like, and figure out how to build it later.
Traditionally, this might have been done in Photoshop. The layout would later be cut up and positioned on the site with CSS. I did three mockups for the Stearns Homestead project in Photoshop. They were a pain, with maybe a hundred layers to handle two pages of the site for each mockup. Managing multiple elements of the same type is not easy there. Photoshop doesn’t allow any easy management of multiple blocks of typography at once, so changes are difficult. Now that I’m not using school computers, I don’t have access to a newer version of Photoshop, and none of my image editors have layer folders or some other useful features, which had helped me out a lot.
New options such as Fireworks are available and designed more specifically for the task. Unfortunately, I don’t have Fireworks and have barely used it. Anything that costs money has to be questioned at the moment, since I have no income and am eating away at my savings. I’m still not totally sure which I’d want to go with anyway.
For the Samba Soccer project I am working on, I decided to build my mockups directly with HTML and CSS. I used Photoshop or GIMP for image elements, of course: I simply directly replaced them in their web location, so this wasn’t too bad. For the layout, I built only for Firefox at first, so I didn’t spend time at this early stage accounting for IE.
I did give up on one layout partway through. I didn’t like the way it was turning out, and it was taking a lot of time. I’m not sure if I would have given up had I been using Photoshop. I think it would have taken a lot of time there as well, but maybe not quite as much, since the layout was image heavy.
Advantages of going straight to HTML
- For simple layouts similar to ones I’ve already done, I think I can go faster this way than only in Photoshop when you include time making changes.
- The site structure and content can to some extent be reused between layouts, so that only the CSS and images need to be changed.
- I’m used to working with HTML and CSS like this and enjoy it more than doing this sort of thing in Photoshop.
- I learn more of what I’m interested in.
- The layout can have some working behaviors, such as rollovers, drop-down menus, and changing widths.
- Building mockups in HTML/CSS provides an almost built layout at the end of the mockup creation process. It was quick to put the layout in place on the actual site.
Disadvantages of going straight to HTML
- The layout itself took some time, and for complex, new layouts probably takes longer than doing it with Photoshop only.
- Doing image-heavy layouts, it can be limiting and time consuming having to change environments and put in file paths.
- The method, of course, somewhat goes against the idea of removing limits, though I’m not a designer anyway, and can’t come up with very complex layouts. This may be a big one, but Photoshop also hinders me to some extent for this type of work.
Fireworks or the like are probably a better option, but until I am able to acquire that and learn it, I may just continue building straight to HTML. I think it’s better if I can work with a designer anyway, as the designer will do a better job that will match the goal of the site better and look nicer. That’s why I try to work with Jason when possible.