When I started to design for the web I already had some basic coding experience, so I figured, how hard could it be to get serious about it? Take your images, headings and body copy. Link it all up and no problem! So little I knew then…
What I learned; the basic experience I had didn’t translate well as I worked. I had images everywhere, text flowing over and around them. Different fonts on every page. Differing background gradients and transparencies. And I had yet to account for Internet Explorer, Firefox, Opera, etc, both the Windows and Mac versions. My ideas were great, but they were a nightmare to code.
Being that it was my first real foray into the design and construction of a website, I hadn’t used a stylesheet to layout and control my flow and design. But, if you follow the guidelines below, you’ll avoid some of the most common web design mistakes and save yourself a lot of frustration.
1) Reuse design elements
Using different fonts and design accents on every page in web design is a no-no. The more elaborate the design, the harder it is to code. Visitors expect every page of a website to have a consistent look and feel. Keep your font sizes consistent from page to page and reuse graphics and icons where you can. If you carry your design elements throughout your website(fonts, icons, bullets, and graphic accents, for instance), your CSS will be much simpler to write and visitors will appreciate the unity of the finished site.
2) Make your designs web compliant
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 finished code. You can avoid a lot of problems if you make your designs web compliant. Stick with compliant fonts for easy declarations in your CSS, and work around compliant color codes where possible. If you decide to step outside the safety zone, test your designs early, often, and on different computers with different monitors.
3) Expect your site dimensions to change
There’s no such thing as “perfect” in web design. Even a minor update to a website can wreak havoc on a weak layout. So, make sure any element that has constantly changing content can accommodate changes to width and height. Use extra space as padding and test headings and sidebar links to see how they look when wrapped over two or even three lines. When content spills out of a container or causes your layout to come apart when you or a client updates the site, it comes across as sloppy and unprofessional.
4) Using a similar CSS layout for every website
If you change the stylesheet for every design, you have to start your from scratch. If you stick with a fixed container width for your designs, on the other hand, after a few websites you should work out a custom CSS framework you can drop into any layout to help expedite the coding process.
5) Design with your content in mind
The websites I designed in the past were dominated by pictures for the most part. But content is king on the internet. It takes keyword rich content to attract search engine spiders and drive traffic. So a website has to be more than just a great looking design. You should plan for a decent amount of text on each page. 350 to 500 words is a great figure to aim for with relevant content in mind.