Looking for something?
By Kim Flint
Now that the World Wide Web is an established means of business communication and the technology has evolved with it, site designs are looking slicker than ever. You may find that your own website — homegrown or corporate — could use a "facelift." But facelifts don't always have to involve the newest technology; sometimes the extra stuff that the techies love actually interferes with good design. Remember the animated Flash intros that so many sites pushed on you upon first visit? It's impressive the first time you see it... and really annoying after a couple of viewings, especially when all you wanted to do was get some information and get out. (Click here to skip intro--aargh! It's like a pop-up ad!)
The Carolina Chapter's website has just gotten a facelift, and we've tried to design a site that presents informative and changing content using careful design and common-sense navigation, but with some interactive features that users crave. Our site has to serve the needs of both new visitors and our members with constantly updated meeting and training information, chapter services, special interest groups, upcoming conferences and competitions, and news and articles on technical communication. But can you present information in a practical fashion, on a budget, without boring your users? Can you get flashy without Flash?
Fun stuff first: interactivity without programming. One of the biggest challenges was to get the benefit of interactivity with limited resources--and by limited resources, I mean without the benefit of an actual programmer. If you have a programmer or can talk one into helping you, so much the better. However, if you know where to look and aren't afraid to tinker with a scripting language and the occasional server command, you can get a lot of functionality for a small investment of time.
JavaScript: For example, drop- down menus are a common way to deal with site navigation. JavaScript is a scripting language used to accomplish this; your browser interprets the script, not the server, so it's a low-bandwidth solution. When you mouse over a menu item, the sub-items appear in a list. In addition to the interactive .zip, you can also show more navigation in a small space. Drop-down menus are ready when you are and only temporarily cover any content beneath, so you don't have to waste space to accommodate them. There are plenty of sites that allow you to copy and adapt their JavaScript, just as long as you leave the code crediting the creator in the source. In addition to drop-down menu navigation, there are free JavaScripts offering everything from calculators to quizzes. Try http://javascript.internet.com, http://www.dynamicdrive.com and http://www.javascript.com.
There is one small catch with JavaScript: users can change the preferences of their browsers to turn JavaScript off. Some people do this to get rid of annoying pop-up ads, but the vast majority of users leave JavaScript on.
Search: Both new and frequent visitors use internal website searches. A search form helps users pinpoint specific information within the site, like the index of a book. Indexing is even the term used by major search engines to pick through and catalog terms used on sites all over the web. This is another instance where you can get something for nothing (but some of your time!): there are companies that give you basic search functions for free. You pay for more elaborate solutions, or for sites with more than some number of pages. The Carolina Chapter is using Atomz.com (http://www.atomz.com). You can register with them for free, set up a custom search and search results form, and specify how often you want Atomz to check your site for additions and changes. See http://www.atomz.com for information on the free service. E-mail forms: Most people think of forms when they think about interacting with a website. Enter information into some fields, click a button, and get some results. Forms that retrieve information for you use databases, however. Working with a basic database isn't the hardest thing in the world, but it's time-consuming to learn and can be very frustrating. On the other hand, creating a form that accepts information and e-mails it is very easy.
We use this solution in several places on our site; as a matter of fact, the form on the Volunteer page of our site (http://www.stc-carolina.org/about/volunteer.shtml) collects information from potential volunteers and e-mails it to someone for review. We found a similar form on a sister STC site and repurposed the code. If you see a form you like, you can view the source of the page and look for and copy the form code. You can also pay for a forms solution if you have a temporary need. For example, Lydia Wong used a paid service option provided by surveymonkey.com (http://www.surveymonkey.com) for the Carolina Chapter's 2001 Salary Survey. This was a low- cost solution that provided login security for Carolina members only, question-and-answer formatting, and final data which was then incorporated on our site.
Now for the practical but necessary stuff: navigation and site structure: In the best of all possible worlds, your site's navigation is just a representation of your site's directory structure. Navigation should act as a table of contents. that shows the user what the sections are and how to get to the information in them. I've already mentioned some features that assist with navigation, like drop-down menus and searches, but the backbone of your site is its directory structure. Logical structure: The best directory structure is a logical one. If your site tells the story of your company, organization, or product, organize the directories like the chapters of a book.
You'll benefit in several ways. If you perform administration tasks on your site, it's easy to know where to look for a file. Search engines (like http://www.google.com and http://www.yahoo.com) can index your site with better results. If you have to set up restricted access to update certain files (for example, you want the training coordinator to update training files only), it's better to create access to one folder rather than allowing access to many folders because the training information is scattered. The site's maintainability increases, as well: Handing the site off to a new or temporary administrator requires less documentation and reduces confusion. You're also less likely to forget about linking to a file. The Carolina Chapter's file on upcoming chapter meetings used to be stuck in a directory containing 50 other unrelated files, and it was easy to forget to link to it (and forget where it was stored!) until we moved it to a newly created folder called "calendar."
Breadcrumbs: Another navigational aid we use is called "breadcrumbs." Hansel and Gretel used breadcrumbs to find their way back through the forest. We use a JavaScript called "breadcrumbs" at the top of each page on our site (except the home page). The script reads the title of the current page, then reads the directory names all the way back up to the root. If you are wandering three or four levels deep in our website, this additional navigational aid can help you figure out where you are. Just remember that naming your directories in a friendly manner and logically nesting them helps prevent breadcrumbs that read:
www.stc-carolina.org > region2 > ncc > www > srv_97 > 1997 Salary Survey.
Site map: Don't forget about a site map. This can be a lifesaver for the user who just can't find information any other way. You may find that designing your site map first is the best way to determine site structure, since it acts as an outline. You've got special considerations if you design to accommodate disabled visitors, who often use special browsers or equipment that edit out non-text content. The site map is a valuable tool for accommodating users with special needs, as it is a simple text representation of your site. Don't forget to include a text representation of the major site sections represented in any graphical navigation. We've placed ours in the footer, along with a link to the site map. If you need more information on designing your site for universal accessibility (like government sites), see the World Wide Web Consortium's Web Accessibility Initiative at http://www.w3.org/WAI/.
Graphic design: don't reinvent the wheel. Playing around in Photoshop is fun, but creating graphics from scratch is a huge headache for most of us. Your company or organization probably has a letterhead, a newsletter, or some other printed communication that can provide ideas. In our case, we wanted to update the look and feel of the site while incorporating the new STC logo, which presented its own issues due to its required size and placement. We also wanted to take advantage of resizing a browser window by allowing the continued next page web design continued navigation and content to grow and shrink as the browser window was resized.
Use existing materials: an example: Fortunately, our chapter newsletter, the Carolina Communiqué, had a new look that provided inspiration for STC logo, color, and content placement. The STC International site has some nice elements that helped as well. We used some of the color palette from the Communiqué in the navigation, and also used Photoshop to create transitional graphics to move from one color to the next. This technique helped take the hard edges off the STC logo and provided a nice fade effect.
Not only are you saving time by using existing materials, but you're creating a better brand for your company or organization. Why should the color palette and design of your website be radically different from your print materials? Borrowing elements helps create a connection in your visitor's minds and increases the power of your company's presence.
Implementation: HTML tables and include files: Once we figured out the design, we used a combination of HTML tables and include files to wrap. the design elements around the content of each page. Tables are useful for formatting and placing content, and we used the technique of table nesting. The main navigation of the site is contained in the beginning of a table. This code is called from within each file on the site using an include command. If, for example, you have a file with meeting information that you want to make a part of the site, you put some code at the top that looks something like this:
<!-#include virtual="/ includes/header.shtml" ->
This code tells your web server that when it delivers the page to a browser it should grab the HTML code from the header1.shtml file and include it as part of this meeting information page. The .shtml extension is necessary to alert the server that this is the type of html file that can include or be included in another file. That header1.shtml file contains the graphical navigation, style sheet, and other necessary code that sets the look and feel of the site. This file helps format the entire page because it is a giant table, and the content of the meeting information file is nested in this table. However, this parent table is still open until you put this code at the bottom of your meeting file:
<!-#include virtual="/ includes/footer.shtml" ->
The footer file contains code that closes the table and includes the text navigation, copyright notice, and information showing when this file was last updated. By using this solution, any time we want to make a change to the navigation or design, we only have two files to update.
Frames Why not use frames to accomplish what the nested table does? Frames are another common way to keep navigation and interior content files separate web design continued by providing a window in the browser from which other files can be called. Because of the way they work, they are usually more trouble than they are worth (in my opinion). For example, you can't bookmark a specific page within the site, and frames pages pose problems for printers. The back and forward buttons may not work properly, and poorly-designed frame sites can cause an "infinite window within a window" problem. Also, many search engines can't index frame sites properly.
Get feedback: No matter how pretty and intuitive you think your site is, you'll never think of everything on your own. It seems like obvious advice, but get buy- in for your design from your boss, your co-workers, or anyone who needs to approve the design or content.
I'd like to personally thank Mir Haynes for her invaluable assistance with the new site structure of stc-carolina.org. Tools used: Here's a list of the web tools and software used to design stc-carolina:
Kim Flint can be reached at kim dot flint at accesspointinc dot com.
Now that the World Wide Web is an established means of business communication and the technology has evolved with it, site designs are looking slicker than ever. You may find that your own website — homegrown or corporate — could use a "facelift." But facelifts don't always have to involve the newest technology; sometimes the extra stuff that the techies love actually interferes with good design. Remember the animated Flash intros that so many sites pushed on you upon first visit? It's impressive the first time you see it... and really annoying after a couple of viewings, especially when all you wanted to do was get some information and get out. (Click here to skip intro--aargh! It's like a pop-up ad!)
The Carolina Chapter's website has just gotten a facelift, and we've tried to design a site that presents informative and changing content using careful design and common-sense navigation, but with some interactive features that users crave. Our site has to serve the needs of both new visitors and our members with constantly updated meeting and training information, chapter services, special interest groups, upcoming conferences and competitions, and news and articles on technical communication. But can you present information in a practical fashion, on a budget, without boring your users? Can you get flashy without Flash?
Fun stuff first: interactivity without programming. One of the biggest challenges was to get the benefit of interactivity with limited resources--and by limited resources, I mean without the benefit of an actual programmer. If you have a programmer or can talk one into helping you, so much the better. However, if you know where to look and aren't afraid to tinker with a scripting language and the occasional server command, you can get a lot of functionality for a small investment of time.
JavaScript: For example, drop- down menus are a common way to deal with site navigation. JavaScript is a scripting language used to accomplish this; your browser interprets the script, not the server, so it's a low-bandwidth solution. When you mouse over a menu item, the sub-items appear in a list. In addition to the interactive .zip, you can also show more navigation in a small space. Drop-down menus are ready when you are and only temporarily cover any content beneath, so you don't have to waste space to accommodate them. There are plenty of sites that allow you to copy and adapt their JavaScript, just as long as you leave the code crediting the creator in the source. In addition to drop-down menu navigation, there are free JavaScripts offering everything from calculators to quizzes. Try http://javascript.internet.com, http://www.dynamicdrive.com and http://www.javascript.com.
There is one small catch with JavaScript: users can change the preferences of their browsers to turn JavaScript off. Some people do this to get rid of annoying pop-up ads, but the vast majority of users leave JavaScript on.
Search: Both new and frequent visitors use internal website searches. A search form helps users pinpoint specific information within the site, like the index of a book. Indexing is even the term used by major search engines to pick through and catalog terms used on sites all over the web. This is another instance where you can get something for nothing (but some of your time!): there are companies that give you basic search functions for free. You pay for more elaborate solutions, or for sites with more than some number of pages. The Carolina Chapter is using Atomz.com (http://www.atomz.com). You can register with them for free, set up a custom search and search results form, and specify how often you want Atomz to check your site for additions and changes. See http://www.atomz.com for information on the free service. E-mail forms: Most people think of forms when they think about interacting with a website. Enter information into some fields, click a button, and get some results. Forms that retrieve information for you use databases, however. Working with a basic database isn't the hardest thing in the world, but it's time-consuming to learn and can be very frustrating. On the other hand, creating a form that accepts information and e-mails it is very easy.
We use this solution in several places on our site; as a matter of fact, the form on the Volunteer page of our site (http://www.stc-carolina.org/about/volunteer.shtml) collects information from potential volunteers and e-mails it to someone for review. We found a similar form on a sister STC site and repurposed the code. If you see a form you like, you can view the source of the page and look for and copy the form code. You can also pay for a forms solution if you have a temporary need. For example, Lydia Wong used a paid service option provided by surveymonkey.com (http://www.surveymonkey.com) for the Carolina Chapter's 2001 Salary Survey. This was a low- cost solution that provided login security for Carolina members only, question-and-answer formatting, and final data which was then incorporated on our site.
Now for the practical but necessary stuff: navigation and site structure: In the best of all possible worlds, your site's navigation is just a representation of your site's directory structure. Navigation should act as a table of contents. that shows the user what the sections are and how to get to the information in them. I've already mentioned some features that assist with navigation, like drop-down menus and searches, but the backbone of your site is its directory structure. Logical structure: The best directory structure is a logical one. If your site tells the story of your company, organization, or product, organize the directories like the chapters of a book.
You'll benefit in several ways. If you perform administration tasks on your site, it's easy to know where to look for a file. Search engines (like http://www.google.com and http://www.yahoo.com) can index your site with better results. If you have to set up restricted access to update certain files (for example, you want the training coordinator to update training files only), it's better to create access to one folder rather than allowing access to many folders because the training information is scattered. The site's maintainability increases, as well: Handing the site off to a new or temporary administrator requires less documentation and reduces confusion. You're also less likely to forget about linking to a file. The Carolina Chapter's file on upcoming chapter meetings used to be stuck in a directory containing 50 other unrelated files, and it was easy to forget to link to it (and forget where it was stored!) until we moved it to a newly created folder called "calendar."
Breadcrumbs: Another navigational aid we use is called "breadcrumbs." Hansel and Gretel used breadcrumbs to find their way back through the forest. We use a JavaScript called "breadcrumbs" at the top of each page on our site (except the home page). The script reads the title of the current page, then reads the directory names all the way back up to the root. If you are wandering three or four levels deep in our website, this additional navigational aid can help you figure out where you are. Just remember that naming your directories in a friendly manner and logically nesting them helps prevent breadcrumbs that read:
www.stc-carolina.org > region2 > ncc > www > srv_97 > 1997 Salary Survey.
Site map: Don't forget about a site map. This can be a lifesaver for the user who just can't find information any other way. You may find that designing your site map first is the best way to determine site structure, since it acts as an outline. You've got special considerations if you design to accommodate disabled visitors, who often use special browsers or equipment that edit out non-text content. The site map is a valuable tool for accommodating users with special needs, as it is a simple text representation of your site. Don't forget to include a text representation of the major site sections represented in any graphical navigation. We've placed ours in the footer, along with a link to the site map. If you need more information on designing your site for universal accessibility (like government sites), see the World Wide Web Consortium's Web Accessibility Initiative at http://www.w3.org/WAI/.
Graphic design: don't reinvent the wheel. Playing around in Photoshop is fun, but creating graphics from scratch is a huge headache for most of us. Your company or organization probably has a letterhead, a newsletter, or some other printed communication that can provide ideas. In our case, we wanted to update the look and feel of the site while incorporating the new STC logo, which presented its own issues due to its required size and placement. We also wanted to take advantage of resizing a browser window by allowing the continued next page web design continued navigation and content to grow and shrink as the browser window was resized.
Use existing materials: an example: Fortunately, our chapter newsletter, the Carolina Communiqué, had a new look that provided inspiration for STC logo, color, and content placement. The STC International site has some nice elements that helped as well. We used some of the color palette from the Communiqué in the navigation, and also used Photoshop to create transitional graphics to move from one color to the next. This technique helped take the hard edges off the STC logo and provided a nice fade effect.
Not only are you saving time by using existing materials, but you're creating a better brand for your company or organization. Why should the color palette and design of your website be radically different from your print materials? Borrowing elements helps create a connection in your visitor's minds and increases the power of your company's presence.
Implementation: HTML tables and include files: Once we figured out the design, we used a combination of HTML tables and include files to wrap. the design elements around the content of each page. Tables are useful for formatting and placing content, and we used the technique of table nesting. The main navigation of the site is contained in the beginning of a table. This code is called from within each file on the site using an include command. If, for example, you have a file with meeting information that you want to make a part of the site, you put some code at the top that looks something like this:
<!-#include virtual="/ includes/header.shtml" ->
This code tells your web server that when it delivers the page to a browser it should grab the HTML code from the header1.shtml file and include it as part of this meeting information page. The .shtml extension is necessary to alert the server that this is the type of html file that can include or be included in another file. That header1.shtml file contains the graphical navigation, style sheet, and other necessary code that sets the look and feel of the site. This file helps format the entire page because it is a giant table, and the content of the meeting information file is nested in this table. However, this parent table is still open until you put this code at the bottom of your meeting file:
<!-#include virtual="/ includes/footer.shtml" ->
The footer file contains code that closes the table and includes the text navigation, copyright notice, and information showing when this file was last updated. By using this solution, any time we want to make a change to the navigation or design, we only have two files to update.
Frames Why not use frames to accomplish what the nested table does? Frames are another common way to keep navigation and interior content files separate web design continued by providing a window in the browser from which other files can be called. Because of the way they work, they are usually more trouble than they are worth (in my opinion). For example, you can't bookmark a specific page within the site, and frames pages pose problems for printers. The back and forward buttons may not work properly, and poorly-designed frame sites can cause an "infinite window within a window" problem. Also, many search engines can't index frame sites properly.
Get feedback: No matter how pretty and intuitive you think your site is, you'll never think of everything on your own. It seems like obvious advice, but get buy- in for your design from your boss, your co-workers, or anyone who needs to approve the design or content.
I'd like to personally thank Mir Haynes for her invaluable assistance with the new site structure of stc-carolina.org. Tools used: Here's a list of the web tools and software used to design stc-carolina:
- Adobe Photoshop
- PaintShop Pro
- Homesite
- WS-FTP
- Dreamweaver
- Adobe Acrobat
- Atomz.com search engine
Kim Flint can be reached at kim dot flint at accesspointinc dot com.
Top of page
Staff and authors:
