-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0|722|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
SoCoder -> Article Home -> Web Design

Created : 24 October 2007
Edited : 01 November 2007
System : Nintendo DS

Keeping it Clean

A stylistic guide to web design

Remember back in the 90's when everyone's page had a tiled background with multi-colored text laid directly over it, and loads of animated gif's? That time has come to an end, and now we need to look at how to build pages properly, stylistically. Sometimes its easy for programmers to get caught up in features and forget about layout and design and readability.

Backgrounds Shouldn't Be So Busy
Many people fall into the trap of using a tiled background image, and placing text over it. This can be okay, so long as the background image isn't too busy. Generally, I find it safer to use a background tiled image around the boarders, but for directly behind the text to use a solid color, a somewhat subtle gradient, or a very very light grain.

JavaScript navigation can be fun, but...
It's not good to have tons of cascading menus overlapping one another. You want your navigational system to by simple and intuitive. Major links that people visit often should be able to be clicked directly, and then if you need to move some links into a cascading menu, they will be out of the way and clean up the interface, while still leaving plenty of direct access.

Flash & Other Dynamic Effects
Yes. Flash is cool. It is pretty. We all know this. We all get it. Don't overuse it. Some websites use flash for epic introduction sequences or for gobs of dynamic content being thrown at the user's face with every move of the mouse and click of the button. Keep it simple. Remember, Flash, mouse trails, fancy buttons and crazy page transitions are really cool the first time, but after that they become an annoyance and a distraction. After that initial site visit, people want a functional and intuitive site, not a graphic-heavy page.

Not Everyone Has The Same Computer As You
There are millions of computers in the world still running and surfing the internet. Remember that everybody isn't running the same resolution as you, and so your site should be designed to be "best viewed under all resolutions" as opposed to a specific one. This can be accomplished using em instead of pt for text sizes in CSS, and by using percentages instead of exact pixel values for the width of div boxes and tables.

Not Everyone Uses The Same Browser
Remember to check your site in a number of different browsers to see if it works in all of them. Generally one can be safe if their site works in IE and Firefox alright, but it's still advisable to test it in Safari and Opera as well.

Keep Contrast in Mind
It's generally not a good idea to put blue text on a blue background, or gray on a white background. Make sure that the colors contrast enough between the text and the background that it is easy to read. Keep in mind light on dark or dark on light, but never light on light or dark on dark, or even medium on medium. Sometimes even using light or dark on medium can come out poorly. A site can become much more friendly just based on the readability of the site.

Page Load Times
Although bandwidth is becoming increasingly cheap, its still important to monitor your page load times. If the pages start to get laggy, then it is definitely time to optimize. Don't forget to account for the fact that some people might still be on a 56k. Additionally, this should be kept in mind when hosting externally on a site that limits bandwidth. Those extra few kB can add up in a page.

That's all I have for now, but I hope to update this in the future! Good luck with your websites everyone!