5 useful habits to avoid the most common mistakes in web design
When I started to design for the web I already had some experience in print design under my belt. I figured, how hard could it be? Images. Headings and body copy. Links. No problem. So I designed a few websites and handed them to my brother to code.
Major problem.
What I learned from print didn’t transfer well to the web. I had images everywhere with text flowing over and around them. Different fonts on every page. Background gradients and transparencies. And all that at a time when we still had to account for Internet Explorer 5, both the Windows and Mac versions. My layouts looked great, as brochures go. But they were a nightmare to code.
It wasn’t until I learned to build websites for myself that I discovered how to create a great design that was also easy to code. If you follow these five guidelines, you’ll avoid the most common web design mistakes and save yourself a lot of pain when it comes time to markup the XHTML and CSS.
1) Reuse design elements when you can
In print ads and brochures it’s common to use different fonts and design accents on every page, whatever makes the layout more effective. In web design that’s a no-no. The more eclectic the design, the harder it is to code. That and visitors expect every page of a website to have a consistent look and feel.
Keep your font sizes constant from page to page and reuse graphics and icons where you can. If you carry design elements throughout your layout (fonts, icons, bullets, and graphic accents, for instance), you’ll have fewer CSS declarations to write and visitors will appreciate the unity of the finished site.
2) Make your designs as web-safe as possible
I’ve lost track of how many times I’ve finished coding a website, opened it on another computer, and been shocked by how different the fonts and colors were from the original. Coming from spot colors and perfect prints, that was hard to swallow at first.
You can avoid a lot of problems if you make your designs web-safe. Stick with web-safe fonts for easy font-family declarations in your CSS, and work around web-safe colors where possible. If you decide to step outside the web-safe realm, test your designs early and often on different computers with different monitors.
3) Expect content and container dimensions to change
There’s no such thing as “pixel perfect” in web design. Even minor updates to a website can wreak havoc on a poorly planned layout, so make sure any element that has variable content can accommodate changes to width and height. Use extra space to pad containers and test headings and sidebar links to see how they look when wrapped over two or even three lines. You don’t want content to spill out of a container or your layout to come apart when you or a client updates the site.
4) Use similar dimensions for every website
If you change the main container dimensions for every design, you have to start your style sheets from scratch. If you stick with a fixed width for your designs, on the other hand, after a few websites you should have a custom CSS framework you can drop into any layout to expedite the coding process.
5) Design with content in mind
The brochures and advertisements I designed in the past were dominated by photos and illustrations. But content is king on the internet. It takes keywords to attract search engines and drive traffic, so a website has to be more than a great looking design. You should plan for a decent amount of text on each page. 350 to 500 words is a search-engine-friendly amount of body copy.
It took me awhile to transition from print to web design, but I learned a lot through the process. If you can pickup these five habits, you’ll avoid some common web design problems and save yourself a lot of grief as you code your layouts.
How about you? What mistakes did you make or what was your biggest challenge when you first started to design for the web? Let us know in the comments.
About Chet Garrison
Chet is a freelance graphic and web designer with a genuine passion for great design. When he’s not glued to his computer, you can find him in a catatonic state watching re-runs of Roseanne and eating Cheez-It’s.
9 Comments
Excellent tips, that you can probably only learn from experience, and value when implement them in your design process. Great post!
nice tips, it’s indeed a good advice to re-use elements and structure from site to site. about the web-safe colors, is this still an issue in 2009 ? Tom Hermans
Thanks for the thoughts. Good tips. I have already suffered with these problems myself.
As a print designer now moving more and more into web work, I can agree 100% with your points. Continuity is a key element when building sites. Even as a general user I look for continuity while surfing the web and generally leave a site if elements are out of place.
Thanks for the comments everyone!
Tom — Yes, web safe colors are definitely still an issue. Low cost LCD panels, Mac vs Windows, and other issues still complicate color selection. So the more you can work with and around web safe colors the better chance you’ll have your website turning out the way you planned.
I have many problems with internet explorer, some design look terrible in ie but not in others.
Anyway thanks for the tips…
cheers
Thanks for the recap. I like posts that point little things out again that are SO basic but still people seem to forget them. This goes on paper and on my “when am I finally going to remember things like this” – wall. Thanks for sharing.
Don’t forget a navigation. Clear and consistent.
#4 is definitely something to think about. It would save me a lot of time.