Site design and image tips

This topic contains the following topics:
 
Tips about site design

Put your best foot forward

You want your Web Site to attract new members, and that only happens if they like what they see. Take the time to think about how your Web Site is organized. If your Site looks interesting, guests will take the time to learn more. If they like what they see, your Site will continue to grow. Examine the Site's goals and use those to plan the Web Site. Don't add new sections if you don't need them, but don't delay creating them if your Site has a diverse need for more sections.

Know your audience

Begin by figuring out what sort of people will be interested in your Web Site. Plan the content of your Site according to the guests you want to attract. If you want your soccer team to visit the Site, post articles and pictures of the team games. If you want engineers discussing the aerodynamics of a soccer ball, post articles on technical specs instead of pictures of last weekend's barbecue. Identify those things that will be most interesting to the people you want in your Site.

Be consistent

Visual presentation is an important tool for helping visitors get the most from your Web Site. A consistent visual image helps people focus on the material provided because their brain does not have to reinterpret visual cues.

The community system helps with this by providing the use of a logo on your Web Site. A logo image helps visitors identify every page as part of the Web Site and helps form a connection in the visitor's memory.

Also, pick two or three of the possible layout templates to be the standard for your Site. If there is one layout in use for all articles on the home page and another layout for everything in the newsletter, your visitors will instantly know where they are.

Keep the Site focused

It is important to know what the Site is about. Use that knowledge to guide you about what articles should be posted on the Web Site. If your Site is the Townville Tigers Soccer Team, you don't want to publish an article on the Site about the Presidential Election. People using the Internet often talk about "the signal-to-noise ratio," which means the amount of relevant information bundled with things they didn't want to know. You want a high amount of "signal" and a low amount of "noise" to become a popular site.

Put important information first

Journalists use "the 5 Ws" to write newspaper articles: Who, What, When, Where, and Why. Try to include at least three of these five things in the first paragraph of your posting. You can then use the rest of the article to get the other two, or give more details on the first three.

Brevity is the soul of wit

...and the secret to a successful Web Site! Most people avoid reading anything that they consider nonessential. They would much rather read a short article of three paragraphs rather than a report of 5,000 words.

Edit before you post a new article or item to the Web Site. Then, more people are likely to read what you wrote. If a large amount of factual information is necessary, put that data on a separate page that interested people can find, not in the article itself. Try to keep your pages fairly short — about three full screens of information is a good rule of thumb. If it gets longer than that, it's a better idea to have a new page.

Do...

  • Keep the page simple. Avoid cluttering. A newsletter page with 28 articles and 26 pictures is hard on the eyes. If you need more space, make more pages rather than making one really long one. Shorter pages are easier to read and make it easier to find the article you need.

  • Keep the page length short. If a web page is longer than the visitor's computer screen, a scrollbar appears on the right. If the page is very long, the tab on the scrollbar gets very small. When that happens, tiny movements cause large jumps in the text. The visitor can get lost when trying to scroll by on the screen. Limit the length of the page to no more than three computer screens to save your visitors time and headaches.

  • Put important information at the top or make it easily seen. Most readers don't get beyond the 3rd to 5th paragraphs in an article. Keep all your important information at the very beginning of your article, and let the less important details filter down to later paragraphs.
  • Limit bold and italics. Use bold and italics to emphasize important sections. If everything is emphasized, then nothing is important. A good rule of thumb is that no more than three things should be emphasized (bold OR italics) on a page. If you have more than three items, review the items and see if they're really that important. Also, try not to use small italics, as it becomes difficult to read online.

  • Avoid linking to "Under Construction" pages. The community system lets you link other web pages to the Web Site. This is a powerful tool, but it can misused. If you place a link in the Web Site, be certain that the linked site is fully operational. It irritates a visitor to find an interesting link, and then find nothing interesting at the Site. It is better to not have the link until after the linked Site is complete, and then add it in. And the system makes it very easy to add the link at any time.

  • Avoid inserting extra words for search engines. Many people think that it's a good idea to include a long list of words on their Site for the search engines to find. It isn't. Normally, it just slows down a search engine's ability to give accurate results to their clients. It also irritates visitors.

    Imagine how you would feel if you were searching for "soccer" and the engine found 6,420 entries... but the very first link went to a page about cake decorating. In the community system, this approach is even less effective. The pieces of a Web Site are not "static," meaning that they don't just sit on the Internet for search engines to find. Each page is "dynamic" — or created when someone looks at it.

  • Avoid Blinking. "BLINK" is an HTML command that makes web page text flash on and off. On the surface, this seems like a good way to attract attention to important information. It isn't. The text becomes very hard to read, and most people get tired of trying. They leave your site, never to return.

    If you want something to stand out for emphasis, consider putting it in     boldface or underlining it. These options are much more reader-friendly. Also, if you use animated graphics, don't make a .GIF that looks like blinking text. You end up with the same result. Even if you use an animation that changes background, if it looks like it blinks, it does.

Back to Top

 

Tips about images

Keep the graphics files as small as possible.

Most people on the Internet are using 14.4K or 28.8K modems. The fastest connection with a 28.8K modem is about 3K per second. Imagine your site logo is 42K, and there are five articles on the Site's home page. Four of those articles have graphics that take up 30K each. That means the Site's home page takes about 54 seconds to load the images, or maybe as much as 3+ minutes if it's a slow connection or if the visitor uses a 14.4K modem. The visitor will never see the Site's home page, because he or she has already hit the Back button and left!

Try to keep the total size of graphics on a page to something under 60K. Most people will wait 30 seconds, but few will wait more than a minute or two.

Keep the dimensions of graphics as small as possible.

Most people have 14" monitors with resolution at 640x480. You don't want to make your graphics so big that they can't be seen. A good rule of thumb is to make pictures no more than 250 pixels in height or width. If you use a "banner" log, use the Internet-standard size of 468 (wide) by 60 or 100 (high).

Use the Web Palette for .GIF graphics whenever possible.

These 216 colors are common between both Mac and PC systems. Using those color is the best way to ensure that all visitors to your Web Site get the same image. It also minimizes the size of your graphic files small and makes the pages loading faster.

Use interlaced graphics.

You specify whether a graphic is interlaced when you create it. When an interlaced graphic is loaded, it fades in. It starts as a blurred image and becomes clearer as the graphic continues to load. This gives your visitors something to look at while the page is still loading.

Use pixel dimensions for an image.

Try to enter the dimensions of the graphic when posting a picture. (Underneath the Browse button on content posting areas, you can enter the height and width of the image.) This permits the browser to "save a space" for the image and continue loading text. That way, your visitors can see parts of the page loading without having to wait for all the graphics to be loaded first.

Back to Top