Sarah Parmenter on how she can’t design in the browser:
For some projects, a hybrid method of producing a type of scratch file, with a general overview of the style and colours of the app/website, then going straight into HTML/CSS has worked, in others, I still need to produce full-scale visuals. I recognize the things she brings up in her post. Everytime I’ve gone straight to the browser to create something quick for myself, the result is an incomprehensible mess. Perhaps I’m not good enough yet, but my brain just isn’t in “creative mode” when I’m coding. Everything gets more bulky when you’re doing major changes (that is, not subtle colour changes, but numerous layout experiments, for instance). Doing layout changes in Photoshop? Just drag that box over there. Doing it in HTML/CSS? Um, just make that box float: left; , and clear that container, then .. .
I’ve seen a couple of web designers writing about this before (can’t find the blog posts right now …). Someone suggested creating a mockup in Photoshop, but without any text, and then putting the mockup as a background-image for the body tag and adding text in the browser with absolute positioning.
Andy Clarke brought up the idea consisting of that initially showing the client a browser mockup is like lying — the client get the impression of that his/her website will look exactly like that in all browsers. That’s not the case — websites don’t need to look exactly the same in all browsers. By quickly iterating in code and perhaps showing the website in Internet Explorer from the beginning, the client might think “Wow, the design looks so much better in Chrome/Firefox/Safari than in Explorer!”. We let the weakest link set the bar — not a static mockup.
Personally, I prefer a hybrid solution, where I mockup the overall visual style in Photoshop in order to develop a colour scheme that works, contrasts in typography, and other elements. I then begin very early iterating the mockup in HTML and CSS, and jump back and forth between the browser and Photoshop. It’s much easier than doing the whole thing in code, only to realize that the design isn’t cutting it, and then having to start over coding a new design. It’s the same in Photoshop though: you can throw countless of hours into a static mockup only to recreate everything in code later on. I say a hybrid solution is most effective.