I was recently coding out a website for cheap auto insurance quotes and one of the topics that came up in the “design phase” meeting was whether or not certain design elements were practical from a coder’s point of view. I am fortunate enough to be pretty good at both designing and programming websites, so often times I make automatic design decisions based on the limitations and restrictions of specific browsers or technologies.

This website I was building was based on acquiring auto insurance leads, and with a name like Best Auto Insurance, the site needed to not only look modern and relevant, it had to be built to be quick, efficient and functional.

I realize however that not all designers have an adequate (if any) understanding of html/css/javascript and in the past, as a coder, this presents problems when design elements won’t translate into efficient code. It’s worth noting that most of my suggestions favor “efficient” website constructions. Most design elements CAN be translated into code, however, that doesn’t mean that they SHOULD be used. (the following tips are not listed in any particular order).

• A website background should not be the focal point of a website. Some exceptions include portfolio sites, or art centered designs. Since this is the case, a background should either be a solid color, or if it requires textures or gradients, patterns that can be repeated are best for smaller file size. On the Best Auto Insurance website, the website’s background image can be seen here. Images that can be repeated vertically, horizontally or in both directions tend to be a lot smaller in file size, which means your website user has less to download.
• When designing content containers with gradient backgrounds or borders, take into consideration whether or not the content might cause the con tent to expand in height or width. This is probably the BIGGEST problem I have seen with designs that I receive from non-coders. Most sites have a fixed width, but for the love of Pete, assume that content areas will expand vertically. Like my first point about website backgrounds, content areas should also be designed so that a single image can be repeat to accommodate content of varying length.Here is the image I used on all the content containers. The image is TINY, only 1 pixel wide and 128 pixels high. It uses a technique called “image sprites” but that’s for another tutorial. Once again however, a small image will save image download time and let the site render faster. When I combine this image and a CSS based 1 pixel border, the content areas will not only expand, but the background images will download almost instantly.

That’s it for part 1 of Website Design Considerations for Non-Coders. My next post about this topic will delve into some guidelines that involve navigation considerations and designing for column-based designs.

About Matthew Booth

I was born in San Diego, CA and enjoy arguing, music, religion, design, development and being home with my wife. I have an almost neurotic tendency to re-do everything or just start over on a whim.

Website: http://aftertheone.com

Please Help Promote This Post