Study Abroad Advisor

Expanding Your Web Site

By R. Lindsey Parsons

Chances are your study abroad office already has something up on the web. But is it a comprehensive web site, or is it just an outline of the services you offer and the information you possess? Expanding the three-page web site for the Office of International Education at the Univ. of Georgia has made the job of the study abroad advisers and the receptionist here much easier in several ways.

First of all, when someone calls to ask for information on our study abroad programs, we can direct him or her to our web site rather than having to prepare a mailing or give out detailed information over the phone. When students ask about work, intern, or volunteer abroad opportunities, we can direct them to our web site—which provides much more comprehensive information than any one of us can on the myriad opportunities that exist. The web site also serves as an information resource on travel issues (passports, student travel agencies, exchange rates, etc.) so we can confidently send students there rather than having to explain all of those things in detail. We also use the web site to put up forms for downloading by students and by professors who are leading study abroad programs.

If you're already convinced that your office needs an expanded web site, the two questions you probably have are: do I have to be a web page expert to design it, and is it expensive? The answer to both questions is no.

What to Ware

To create a web page easily you will need to invest in some software. Most software titles are available at significant discounts to educational users, and if you purchase these fully-functional, discounted versions the total bill should be under $200. I recommend Microsoft Front Page 2000 for creating the web site and Paintshop Pro (available from Jasc Software: www.jasc.com/psp.html for creating and editing graphics. You will probably also want to use a program like WS FTP (available from www.ipswitch.com/Products/WS_FTP) to move your web site from your computer to the server that will hold it on the web. This program often comes with the pack of software universities distribute to students, professors, and staff; so it's probably already on your computer.

After buying the software, you have several options for learning to use it. The documentation included with the software is a good starting point, but it is often written from a technical (read inaccessible) point of view. Check your favorite bookstore for third-party books for the software packages you've chosen. You may prefer to just play with the software until you feel you can use it well enough. Or you could take a course at a local computer training center or at your university. My favorite method is to experiment and to get assistance from the help files or from tutorials online. Links to many tutorials on Paintshop Pro can be found at www.jasc.com/6tsites.html.

Design Basics

Of course competence in using the software, doesn't mean that you are competent to design a professional-looking, easy- to-use site. Here are some design tips to keep you from going wild on your first web site:

The first step in designing any site shouldn't even involve a computer but pen and paper instead. Sketch out an overview of the different sections that your web site will contain and develop a sensible organization for those pages. Not only should your site reflect how you believe your information is organized, but it should also reflect how visitors to your site are likely to use it. Consider what information visitors are likely to want to find quickly, and how they conceptualize the organization of your site.

Many sites on the web overdo navigation, even the most "professional" ones. In general, you really need no more than two spots on each web page that give navigational links. Choose either the top, bottom, left, or right side of the page for your main navigation links. If you have links on all sides of your page, users aren't going to have any sense of how your web site is organized or how to return to where they came from. So keep it simple.

Also place a text-only version of your links at the bottom of each page, including a link to your site's home page. This allows sight-impaired visitors as well as those without graphics to use your page. Another thing you can do to make navigation obvious is to stick with the usual colors for links and visited links. Most web browser software displays links that haven't been visited yet as blue, underlined text and links that have already been visited as purple. Web users have come to associate these colors with links and visited links, so it's best to stick with them. If you decide to stray from these two colors, don't stray far and never reverse them.

Next, to avoid the usual design faux pas of the amateur web page designer, you should choose a consistent color scheme for your web site and stick to it. Each page should have the same background color (preferably white) and the same text, link, and visited link colors. Many sites seem to care more about "beauty" than usability. Dark backgrounds and backgrounds that consist of repeating images usually make it hard to read the text on top of them. If you must have a background image, the general rule is to have as high a contrast between the background and text as possible—white text on a black background or black text on a white background being the most obvious examples. Colorful additions to your web site are generally best reserved for logos, buttons, and images rather than background and text colors.

Web browser software depends on the fonts installed on the site visitor's computer to display text. Since the collection of installed fonts differs from one computer to another, a visitor to your site may not have the font you choose and so the page won't appear on their screen as you intend. Make sure that it's a font that is standard on all computers, PCs and Macs alike. Generally, Times Roman and Helvetica (Arial) are safe choices. If you absolutely must use a given font for text, try creating a graphic with that text in your intended font, then include the graphic in your page design. Graphics do not rely on the installed fonts to display, so your text should appear just as you intend.

Speed Up the Loading Time

An important issue in web site design is the time it takes for the visitor to load a page. In general, you don't want your page to take more than 30 seconds to load completely, assuming the visitor is using a 28.8K modem. As a general rule, 2,000 bytes of information takes one second to load on a 28.8K modem. Add up the size of all of the graphics used on your page, plus the size of the page itself to estimate the loading time. To keep your page small, keep your graphics small, both physically and in terms of file size. One way to do this is to reduce the "color depth" of the graphics in your image edition software. If your original image is displayed with 256 colors, reducing the number of colors to 128 can reduce the storage size of the graphic by several kilobytes, which translates into seconds shaved off of the loading time. Generally, non-photographic (computer generated) images should be saved using the .gif format and photos using the .jpg format.

Other techniques you can use to speed up the loading of your pages include making sure that you specify the height and width (in pixels) of all your images (which on Front Page only involves checking a box). Most web browser software displays the page as soon as it can determine the placement of all of the elements on the page. Specifying the dimensions of all images gives the browser valuable hints on how to lay out the page, even before it actually retrieves the images themselves. You can also make your .gif images interlaced, so that initially a fuzzy image will display and will improve with successive passes. You should also specify "Alt Text" for each image. "Alt Text"—or alternate text—allows sight-impaired users or users without graphic capabilities to understand the elements of your page. This also gives users the chance to decide whether the image is worth waiting to load.

No-nos in web site design include constantly blinking and moving text. If you want animation on your site, it's best to have just one or two cycles of the animation, then have it stop. Also, pages should also not be too text-heavy. Continuous pages of text will be more than the eye can take, or the user will read. Try to separate text into separate web pages connected by links. Also, if you must have a lot of text, put an index at the top of the page linking to points further down in the page.

I would also avoid welcome pages with essentially no content. This is simply a waste of your visitor's time. Finally, hiding your contact information deep in your web site is not advisable. It should be very easy for your user to locate the phone number, mail address, and email address of your office. The bottom of each page, below text-only navigation elements is a classic location for this information.

Design Testing

After you have created your site, you will need to view it (do this during initial design as well) on different platforms (PC and Macintosh) with different browsers (Netscape and Internet Explorer) to ensure that your design meets your standards on each. Right now, most computer users have their screens set to a resolution of 800 x 600 pixels. Ideally, the pages of your web should be entirely visible at those dimensions. Remember that some space onscreen will be reserved for scroll bars or other user interface elements, so you should design for slightly smaller than your target dimensions. However, you should also check that your site doesn't look ridiculous at lower and higher resolutions (640 x 480 and 1024 x 768) and on smaller or larger monitors. You can change the screen resolution on a PC by right-clicking on the desktop and choosing "Properties," then "Settings," and moving the slider for "Screen Area." On a Macintosh, use the Monitors Control Panel to change resolution.

Checking your site on both main browser types—and especially with older versions of those browsers—helps ensure that your web site is consistent for all viewers. Still, you will find some features that are supported by one browser or one platform and not the other. Browser compatibility is an issue for all web designers and is very complex. There are several sites available through www.yahoo.com which discuss this issue.

You will also want to be sure to spell check each page of your web site and have someone else proofread it. Remember, your site is about to become a publication of your office and you should make every effort to ensure that it's both correct and appropriate.

Be sure to include meta tags on all of your pages. This hidden information allows you to give a short description of and keywords relating to the content of each page that many search engines use to index and organize pages that match search criteria. A convenient meta tag generator is available at www.websitepromote.com/resources/meta/.

Maintaining Your Site

You should test all the links on your site both when you first publish it and on a regular basis afterwards to make sure that links to pages outside of your site haven't moved or disappeared. Several commercial link checkers are available through www.yahoo.com. You should also have someone unfamiliar with the work of your office try out your navigation system. Give them some suggestions for material to look for on your site and see if they can find it easily.

Once you've finished your new and improved web site, you'll want to publicize it. Register it with the most popular search engines for free with Add Me: www.addme.com. To further publicize your web site, link to other offices both on and off campus. Add your web site address to brochures, business cards, and stationery. You may even want to have special bookmarks, pens, or novelty items made with your URL on them.

As time goes by and you become more proficient with web page design, you can improve your site and add as much information to it as you desire

R. LINDSEY PARSONS is the Study Abroad Adviser at the Office of International Education, Univ. of Georgia.