Hey. I'm going to start a series of articles entitled Web Design 101. These short articles aim to inform and educate readers on an often overlooked part of webmastering. Web Design is often taken for granted, and with the advent of sites like MySpace, it is becoming increasingly evident that this new generation of netizens have no understanding of this subject.
The first article will look at a basic concept in design: Form or Function? There's a raging debate in some circles over which is more important. In my humble opinion, neither is more important. Both form and function are equally important and neither should be overlooked.
But what is "Form" and "Function"? Form is essentially the "pretty-ness". Form is how the site is laid out. Images. What it looks like. Its aesthetic qualities. Pop out menus, colors, fonts, etc. Does the site look pretty? Function deals with how the site works. The ease at which a site is navigable. Link validation. Accessablity. Is the site easy to use?
I've been making websites for a long time. I've come to the realization that form and function really go hand in hand. You can't have one without the other. A good website should be attractive to look at and easy to use.
It is very possible to have one without the other. Some sites are completely utilitarian. 100% functional. They do exactly what they are supposed to do. But they are really ugly. People, in general, would rather use a site that is nice to look at. No matter the functionality, if a site is ugly, people would rather not use it.
On the other hand, some sites are all about looks. I've noticed a lot of personal websites that use lots of copy/pasted CSS. They look really nice, but they do absolutely nothing. Sites that have no purpose are a waste of hard disk space. To have a good website, your site needs to actually have a purpose.
The problem with sites like MySpace is that they allow users to completely customize the stylesheets for their websites, but provide no help in the design department. This results in users trying to make their sites look pretty with crazy backgrounds, clashing colors, transparent panes, hover effects. All kinds of crazy stuff. The problem is, these people don't know anything about what they're doing.
This causes the the sites to be difficult to navigate. Difficult navigation discourages people from using a site. There's no point in making a site pretty if people can't or won't use it. But people would rather not use a site that doesn't look good.
I'm being reduntant, but do you get what I'm saying? FORM AND FUNCTION.
Some tips/pet peeves:
- Footer Navigation: navigation links are very useful at the bottom of the page. This way, users don't have to go back to the top of the website to continue browsing.
- Color Scheme: Many users are colorblind. Others have crappy computers incapable of corectly displaying colors. Contrast can be more important than the actual colors. In general, blue-on-red or red-on-blue is a bad choice. I'm not sure why, I think it has to do with how computer monitors work. Do not use color to imply navigation/links. Again, users may not be able to see the links, thus impairing the sites ease of use.
- Background images are bad. The vast majority of background images make reading the site very difficult. If using background images, make sure they do not conflict with the text.
- White is a bad choice for background color. It's like staring into a lightbulb and causes eyestrain. Light grey is infinitely better than white. #eeeeee vs. #ffffff
- Never ever ever make a page scroll horizontally. Computers are made to go up and down. Look at the mouse wheel. Vertical. Not horizontal.
- Design sites for 800x600 resolutions. The majority of computer users set their monitors at 1024x768, these days, but you need to take into consideration all minorities. I'd like to say that you should design for VGA, but that's impractical.
- DESIGN FOR INTERNET EXPLORER. It's true, IE sucks balls. It's not standards compliant at all. Unfortunately, IE is used by 90% of web users. If you don't design for IE, you're alienating the majority of web users. I'm not saying to ignore other browsers. Just make sure the site is usable in IE.
- Take it easy on the ads. You'll notice ads all over my site, but they are part of the design. Ads should never get in the way of usability. Put them in high visibility areas, but make sure they don't break the flow.
- Keep important information above the fold. The fold is the bottom of the screen. This way, important information is available without having to scroll.
- If you have a logo, or main title in the header of your page (The visible header, not the <head> tag), make that a link back to the main page of the site. It makes things a lot easier.
- Americans read from left-to-right, top-to-bottom.
- If at all possible, write pages in an xml type format. Use div and span tags to logically group data. Use CSS for the majority of design/layout. This allows people to turn off the StyleSheet and still get a readable page.
That's all that I can really think of at the moment. Man. I was not intending this article to be this long. Oh well. I guess webdesign is just something that irks me. I'll probably expound on each of these tips at a later date. Future posts won't be this long, so try not to get used to it.
k-bai
~~ben