The best websites not only contain interesting information, they are pleasing to look at and also load fast! Here are (1) some web design tips to help you reach that goal, (2) a list of design sins often committed by beginners, and (3) a link list of web design tutorials.
TOP 14 WEBSITE BASICS
These "Top 14" tips were borrowed (with permission) from Boogie Jack's Web Depot,
a great resource for design tips and more!
1. UNDER 40K Keep each page's file size under 40k, including text and graphics. This will keep your pages loading reasonably fast. If they don't load fast, no one will stick around.
2. WHITE SPACE Include plenty of "white space." White space in this case means open areas of the page without graphics or text. Not enough white space equates to visual noise and clutter, and can be confusing to the visitor.
3. CONTRASTING TEXT Use colors that compliment each other in the overall layout, and colors that provide enough contrast between the text and the background color/image that it's easy to read.
4. NO BUSY BACKGROUNDS Full page background images (not left border style images) that are too "busy" tend to interfere with the text. If you have one you really like, you can still use it. Either just use it on pages with little text like a photo page, or use a table with a complimentary background color to the table.
5. MINIMIZE ANIMATION Don't use too much animation. Unless the animation is your content, it only distracts from your real content. This visual noise from excessive animation is tiring to the eyes and unless you make your own, it's all been seen before anyway.
6. BREAK UP TEXT Break up long passages of text with headers. Strings of text that are too long become tiring on the eyes and readers tend to give up on the content faster. Readers also tend to skim pages. They'll skim right over long text passages, but if they are broken up with headers they will see those, and if you use the right wording they may stop to read the text.
Headers should be considered like ad headlines, used to create interest and draw a reader into the message. You can also break up long passages of text by making short paragraphs out of it. Short paragraphs will be read before strung together paragraphs. Important points are often lost in long paragraphs. Make each important point stand on its own.
7. DON'T SHOUT Speaking of text, don't use all caps or all oversized text. These should be used for emphasis, not for passages. All caps is difficult to read and considered rude because it is considered "shouting" at the reader. All oversized text just looks amateurish and is considered being pushy.
8. CONSIDER WIDTH Speaking of text (again), for long passages of text it's best not to use the full width of the page. Using the full width makes it harder to pick up the next line as you read, and lends to the cluttered look. Studies have shown the best line length for text is between 5.5 and 6.5 inches. This is about 400 to 480 pixels wide. To accomplish that place your text inside a table with the width set to that.
9. JUSTIFY TEXT Speaking of text (again and again), don't center text! You can center headlines, but a page full of centered text is the first sign of a newbie web site. Most places use left justified text (because it's the default) but I prefer justified text.
Most people don't use justified text because they don't know you can do that in a browser. It's an undocumented html command as far as I know. I discovered it while playing around. Simply use a paragraph tag with an align attribute of justify. <P align="justify"> Looks very professional on your site. I use that on most of my pages and highly recommend it, although you may have to reword a line here and there to keep some sentences from becoming to strung out looking.
10. PROOFREAD Spell check your pages, but also proof read them. Spell checking will catch words you think you know how to spell, but don't (don't feel bad, it happens to everyone). Proofreading catches mistakes the spell checker won't, things like: Eye doesn't think a smell check her wood help hear.
11. OPTIMIZE GRAPHICS Keep your graphics sizes down, both in byte size and the actual dimensions. Graphics should compliment a web site, not overwhelm it. And of course you know if it takes to long to load people will just leave first.
12. DON'T OVERDO ADS Don't overdo the banner ads. If I see a site with too many banners I'll hit my back button faster than one ad can load. Like most people, I don't mind an ad or two per page if there is good content, but if you try and shove it down my throat I will rebel and vote with my back button. Ooh... mean ol' Jack!
13. EASY NAVIGATION Keep a consistent navigation structure to your site. Make it easy to go back and forth between pages, or on a large site like mine, between content areas, and your visitors will be more likely to surf more of your site.
14. BUILD AN IDENTITY Keep a consistent look to your site if you're trying to earn money from it. Changing the background on every page may be OK for home pages, but for a business site it looks like an amateur that's trying to play at business.
THE ABOVE TIPS PROVIDED BY
TOP 10 WEB DESIGN SINS plus tips for avoiding them
(Reprint of tips for business websites......original source unknown)
1. LONG DOWNLOAD TIMES Research shows that after 10 seconds, users lose interest! Learn how to design a speedy site.
2. MULTIMEDIA OVERKILL Just because you can doesn' t always mean you should! Learn how much is too much.
3. BREAKING UP THE SCREEN WITH FRAMES Many surfers say they are confused by pages cluttered with frames! Learn what design strategies may work better.
4. DEAD LINKS Sixty percent of users surveyed cited "linkrot" as one of the biggest problems on the Web! Make sure all your links function properly.
5. AWKWARD NAVIGATION The average web site user can find the information he or she wants only 42% of the time! Help your customers use your site with ease.
6. AGGRESSIVE, NON-STOP ANIMATION Make sure your customers don't confuse your important content with irrelevant advertising!
7. ORPHAN PAGES Pages that don't indicate whose site you're are! Clearly identify your company on every page.
8. "SPLASH" SCREENS Pages that exist merely to point to another webpage may cost you a customer. A lot of visitors never make it past these well-intentioned introductory pages. Investigate options that make a "splash" screen more effective..
9. LONG, SCROLLING PAGES The majority of users totally miss content not immediately visible and require a lot of scrolling to view the entire page! Increase your site's effectiveness by streamlining your content and your design.
10. NOT ENOUGH vs. TOO MUCH Not enough of the right content, too much of the wrong stuff. A website containing obsolete information can cause your company to lose credibility. Learn the difference between archival
information and outdated content.
information and outdated content.
A few tutorials to get you started using Homestead's SiteBuilder web editor
Here you'll find links to both beginner and advanced tutorials.... all specifically written for SiteBuilder by Homestead users and by the staff at Homestead.com. (Note: Now that Homestead has changed it's policies regarding free webspace, many of these tutorial websites have been deleted. We've done our best to remove all listings with dead links...but things are changing daily!! More tutorial links can be found on our LINKS page.)
How to lay out a page....explains the purpose of those green lines and how to avoid a cluttered look on your page.(by Duncan)
Color Theory 101....how to select colors for your webpage (by Web Design Clinic)
Creating Mouseovers ....using the HTML Snippet element. (by Alex)
Bookmark My Page....how to make those links that let visitors add your page to their bookmarks when they click on it. (by Alex)
Image Alt tags....how to make the little information box appear when someone places their cursor over an image.(by Alex)
Add a Pull Down Menu.....how to create a Java script pull down navigation menu (by Alex)
No Right Click.....how to protect your images by disabling right-click. (by Alex)
Have you written a SiteBuilder tutorial or know of one we can add to this list?
Please let us know!! email
This page was last updated on: January 14, 2002
Thank you to "Designs 4 Free" for the great cartoon characters seen on these pages!!
Website maintained by Arizona Kate
VISITORS SINCE MARCH 1, 2000