Allow the user to browse the site quickly and easily. For a stronger, more effective web design, remember these conventions.
Where are you from?
The web wouldn't be the web if it wasn't world wide, hence the “www.” The impact is that anyone from anywhere can access your site. So how can you cope with this and make your site effective? It all depends on your market and the users you want to reach but you can still:
- Use simple language for people who don't understand yours.
- Earn the respect of other users. Don't act as if everyone knows your brand and trusts it.
- Translate your site into other languages whenever possible.
Users can land on any page in your site, and you don't know how they got there.
The Internet is huge. Users can get to your site in so many different ways. How can you be sure they get the information they are looking for? Be sure to provide enough information to say what your site is about, where they are within the site, and what other options are available from this page.
56k, DSL, Cable
Users have different connection speeds. Tracking software can let you know the average speed of users so you can optimize your site, but depending on your target, you may want to optimize for everyone.
Here are a few simple tips to make a page load quickly:
- Imagery
Use important pictures that deliver a message. Small pictures load faster. - CSS
This stands for cascading style sheets. A CSS is an external document that contains all the information to make your web page display correctly. This makes the actual web page smaller and load more quickly. - HTML
Developers fall into using tons of JavaScript or PHP coding and cluttering the entire code of a page. Simple, clean HTML works the best. All other scripts can be loaded externally without adding more weight to the page. -
Avoid Tables For Layout
Tables take a longer time to load than div tags and are commonly used incorrectly according to W3C standards. Click here for more information on tables. (outside site).
"I Love Fonts for Design." - But for the web, there aren't that many!
Using uncommon fonts is a common mistake. Let's say a designer has decided to use a font called "Abba zabba" (that’s a made up font) and on the designer’s computer, the font looks awesome - but on yours, it doesn't show.
Effective web design uses standard fonts because all computers have standard fonts included. When you use a font like Abba zabba, you need to make sure that everyone who is viewing your site has that font installed or else it's a no-show. Now, if you want to use a non-standard font, you need to make it image-based, but then that affects the load time and causes other minor implications.
So, what are the basic fonts?
- Arial
- Verdana
- Trebuchet
- Helvetica
- Courier
- Times
- Times New Roman
- Georgia
- Geneva
But even some of these fonts aren't on every computer. Some Macs and PC's use different fonts.
For reading, the better fonts are Arial and Verdana because they are sans serif – that means they have clean letter strokes. Verdana may be a little easier to read because it is wider. The problem is some Macs don't come with Verdana. So what designers tend to do is make a font family (a group of fonts) that the computer reads when displaying the page. An example of a font family would be:
font-family: verdana, helvetica, arial;
What this means is that if a computer doesn't have the Verdana font, it will use Helvetica; if it doesn't have Helvetica, it moves on to Arial.
Different fonts can be used for different reasons. There is nothing wrong with using a Times font for a heading or using Courier for code snippets. However, for general reading, stick to sans-serif fonts.
NOTE:
The color of a font matters also. The standard is to put black text on white background. This is good but only for short text. For articles and other longer text blocks, you should use a gray to lighten the contrast. This will prevent your eyes from getting tired and make the screen easier to view.
Ode to Colors
The colors of a design vary from computer to computer. What shows up red on your computer may be pink on someone else's. Some older computers display only 256 colors. We'd like to say no one owns these old computers any more but the sad truth is that people do.
PC's and Mac's can also display colors differently. Certain colors, called web-safe colors, display well on all machines. These colors are accessible through any web development or design software.
Here are a few practices to keep sites looking safe
- Follow your color scheme throughout, and use the same colors consistently. For example, if your header is #443355 and you want your text to be the same, don't just pick a color that looks the same. Use #443355. Even if the color varies on other screens, it will still be the same color.
- Try to use web safe colors for large areas.
- Use white for the main content area. Although some nice sites use black effectively, stick to white. It's more common.
- Don't go too crazy with color. If you do, understand that other users may see a slight variation.
HTML, CSS, JavaScript, Flash
Not all browsers support these elements. Developers should use what is called a DocType to make sure that HTML is being read correctly. Some browsers may have JavaScript disabled. Other browsers may not support the latest CSS techniques. If Flash is used, users may have to download a plug-in. These are all potential pitfalls that a design could encounter.
The best plan is to know your target user. Some designers avoid Flash because there are too many implications for any user (security for active control, download latest plug-in, load time, etc.). If your site uses JavaScript, take precautions that a user may have it disabled. Have some type of backup. Use CSS techniques that are available on older browsers.
Accessibility
Can anyone and everyone access the site? The site should be able to reach any person, disabled or not. Here’s what your site needs:
- Text, text, and text.
Use text wherever possible. Avoid image-based text. Even though there are ways to use image-based text effectively, don’t get too complicated. - Try to avoid smaller text.
This is a new trend with Web 2.0 styles because people like easy-to-read text. But when text is tiny and your vision isn't that great, the site becomes a chore to read. If necessary, make the text resizable. - Use alt tags on images.
Alt tags are beneficial for screen readers and for search engines that spider your site. They also provide descriptions for pictures that don’t display. Because of these reasons, make the alt tag text clear and concise.










