IP HavenAttracting and Keeping Surfers9 Tips to Better Page DesignbyGlenn Euloth Beacon Correspondent To help me come up with a topic for this issue's column I spent some time surfing various sites on Chebucto Community Net to get a feeling for what might be a useful article for IPs. It hit me, while I surfed, that others had made the same "mistakes" that I and many others had made over the years and I thought that I would share my experience and provide some suggestions for making your site a little more user friendly. I'll be the first to tell you that I am not a graphic artist. I do, however, spend a lot of time surfing the web and I have come to know what I like and what I don't like. Also, in my role as a webmaster I have often had many comments from people about what they think works or doesn't work about one my sites. Some of these "mistakes" have been made because the pages were created and previewed using only the Lynx browser. That's not a bad thing really as CCN has always been about providing service to the CCN community which used Lynx as their main browser. It is now 1999. Internet Explorer and Netscape Navigator are very popular browsers that make up probably about 95% or more of your visitors. Also, Chebucto Plus users are in full swing. People won't visit your site for very long if they find it poorly designed no matter how interesting the content. I have broken my hints and tips into 9 sections: Tables, Hyperlinks, Backgrounds, Graphics, Frames, Page Size, Cascading Style Sheets, Fonts, and Technology.
A couple of years ago I had a heated discussion with a graphic designer about the layout of the text on my page. He was insisting that text should wrap to the next line within a relatively short distance; some nonsense about the human eye not being able to track really long lines of text. I told him that browsers were designed to allow text to flow and if I set my screen resolution at 1024x768 and maximize my browser I want my text to stretch across the screen. He made some comment about me being a geek and not understanding design principles and I retorted with an remark about how the web changes those so-called design principles. After some testing, however, I had to sheepishly agree that he was right. When text streaks across a wide page it is awfully hard to keep track of what line you are on when you read. You'll notice many sites such as NEWS.COM, Microsoft, and CNN have text in columns much like a newspaper. This design choice was made for specifically this reason. People coding pages on CCN probably wouldn't notice this problem as the screen physically wraps at 80 columns on a VT100 terminal emulator. Long lines are always wrapped and so one would not necessarily make the lines wrap on purpose. The easiest way to control how much text ends up on a line before it wraps is to enclose your content in a table. If you view the source code on my Atlantic Karate Club site you'll notice that the main content area is restricted to 440 pixels. Basically, to do this you need only add six lines of code to your documents. After the <body> tag add the following:
Then add the three lines below at the end of your document before your </body> tag:
This will force your text to wrap at 440 pixels. I picked 440 because I designed my site to look well on a 640x480 screen. You may decide on 600 or so for an 800x600 screen. There is no correct number, as different browsers and different fonts will have different limits. However, if you leave it uncontrolled it can be quite unwieldy.
In the category of hyperlinks there are a few common errors that can drive visitors away. This one is not up for debate. Unless you want to tick off the people who visit your site you should never, ever, put a link on a page, or an email address for that matter, and not make it a hyperlink. Nothing annoys me more than someone who puts a web site address or an email address on a page but doesn't make it a hyperlink. When in Windows I can cut and paste but while using Lynx I have to retype the full address. A corollary to this rule is "Don't add a link that doesn't go anywhere." How many times have I visited a site with 6 or 7 links that all go to pages that say "Under construction" or "Coming Soon". Build the destination page first then put the link to it on the main page. Sites appear and disappear all the time and 404 errors will occur but when you intentionally create that kind of a link surfers will hate you for it. Another infamous design choice is to rely on the underlining of links done by the default configuration of most web browsers. I've been to a few sites where the designer has made the regular text font and the hyperlink font the same colour. A lot of people find the underlining of links annoying as there can be quite a few on a single page and so they turn that feature off. When you don't distinguish the difference between a link and regular text you will confuse and annoy visitors.
I don't know a lot about colour and design but I do know that red text on a blue background is almost impossible to read. There are a lot of other bad combinations as well. When considering backgrounds with lots of detail, don't. Backgrounds should be just that, backgrounds. Make sure that any backgrounds you might use are very unobtrusive and don't interfere with the text on the page. People come to read the information on your site not to look at the backgrounds. 
Another common mistake with backgrounds is bad tiling. Background images tile from left to right and down the same way that text flows on a page. If you design or borrow a background that works for screen resolutions of 640x480 or 800x600, you may end up with a background that tiles poorly on larger resolution screens. This is getting more and more common with 17-inch monitors selling for $500.00 and under. I found a perfect example, see the image to the right, of what I'm talking about and I'm embarrassed to say that it is one of my sites. In my defence I only had a 15-inch monitor when I designed the graphics and 800x600 was as good as I could get. Looks like I have some work to do!
One could write volumes on graphics but I'm only going to point out a couple of common design choices that would really detract from your site. Some sites have graphics that take way too long to download. Either each individual graphic is too large or the site has tons of graphics. People get tired of waiting for graphics to load on a page. More and more people are running on xDSL and Cable modems but that doesn't mean that there aren't still a lot of people on 28.8 or even 14.4 modems - don't make them wait to see your page. Graphics are an important part of your web site so I am not suggesting that you remove them. What I'm suggesting is that you make sure that any graphics that you use are small and fast. If you wish to have users view a large detailed image then show them a thumbnail and let them click for the larger image. It gives the control to the user. Also, be careful when creating thumbnails that you don't create Dumbnails. Consider image placement as well; if you intend to have text wrap around an image make sure you leave space between the text and the image. It looks really awful when the text is butted up against the graphic. And don't forget the <ALT> tags! Remember Lynx visitors are viewing your site. Animated GIFs should be used sparingly. A lot of flashing images on the page makes your page look really gaudy. Animated GIFs should be used to accentuate the site not annoy visitors.
If you decide to use frames when building your site be very careful with them. Personally, I'd skip them all together because of the problems that they cause. It looks really horrible when you mess up the target and put a full page in your 100 pixel-wide navigation bar or other some such boo-boo. Don't even get me started about the hassle of having a user pop into the middle of your site from a search engine and not being able to find the navigation bar at all!
Ever click on a link and wait 5 years for the page to load because the user created a "mega-page" which was his entire site. Pages on the web should be relatively short and to the point unless of course you are specifically presenting a long text such as a story or something.
When putting together a new page or redesigning an old page you should consider making use of cascading style sheets (CSS). See last issue's article for reasons why you should do this.
Make sure that when you create your web page with different fonts you take the time to make sure your font will be found on most systems or at least that you pick an alternate font that will flatter your layout in case the user doesn't have the primary choice.
This category is sort of a catch-all for gizmos like Javascript, ActiveX controls, Shockwave animation, and other things like that. If you have the skill and opportunity to create a site which makes good use of any of these items then by all means do so. Be careful, however, that you don't over use them. Like animated GIFs they can be gaudy when over used. They can require long download times. They can require the user to install browser plug-ins. If you are going to use any of these facilities please try and make it an "extra". Don't make your site rely on these things. Visitors will quickly move on if they have to wait 5 minutes for your super navigation menu to load before they can see page two. I hope this article will help you spruce up your pages and make them more interesting to your visitors. If you have any questions please contact me and I'll do my best to answer them.
You may direct comments or suggestions about this column to: Glenn Euloth, ab593@chebucto.ns.ca
|