It’s been a while since I had to code a design I didn’t do myself. But currently I’ve got two of such projects on my hands. Somehow it seems to take a lot longer to turn these designs into good HTML and CSS.
Thinking about how I work in Photoshop it quickly became clear: I’ve always got HTML in my head. In Photoshop I’ve already decided on the HTML markup and CSS for most design elements. But what’s more important, I’m always considering the most optimal markup.
Here are some concrete things I consider:
- A sensible grid, with generous margins and padding, should be in place. Every piece of content, bordered or not, should line up perfectly. The site will look clean and the HTML and CSS will be simpler. Less code, easier maintenance and a faster website.
- Create good text styles. The style of the text should indicate it’s important to the visitor. So apply those styles in that fashion.
- The text styles should cascade well
- The content you work with in Photoshop will likely not end up in the final website. What will happen with the layout if that headline suddenly spans another line?
As always I’m having a hard time trying to explain what I mean. But to try and sum up some of the things I’ve learned:
- Grids make your life easier and your designs better
- Good website designs consider HTML and CSS
- Always charge more for coding the HTML and CSS if you’re not coding your own design