Set Your Site On Success (Published in the TechEdge, 1998-99) by Wesley A. Fryer www.wesfryer.com   As the internet continues to grow in both size and the number of homes it reaches, the ability of educators to effectively utilize school websites to communicate with students, parents, and other community members will continue to increase in importance. This article provides twenty different suggestions to "set your site on success," making your website an effective communication tool for a global audience. 1- Analyze quality school websites Before beginning the hands-on phase of learning how to create HTML pages, take several hours to examine award winning school websites. As you explore these sites, take notes on the types of content included in them, the tools provided to make the sites easy to navigate, and the graphical elements which either enhance or detract from the site's value as a communication tool. Some award winning school websites worthy of examination are: Fairland Elementary School, Fairland, Maryland: Includes lots of student projects, and uses bulleted lists for homepage organization. (http://www.inform.umd.edu/UMS+State/UMD-Projects/MCTP/Technology/School_WWW_Pages/FairlandHomePage.html) Buckman Elementary School, Portland, Oregon: Features an excellent display of student work and projects organized by room number, along with neat 3D photos of the school. (http://buckman.pps.k12.or.us/buckman.html) University Park Elementary School, Fairbanks, Alaska: Photos and description of the moose that visits the school are included, along with a calendar, lunch menus, and PTA information. This site uses a frame layout. (http://www2.northstar.k12.ak.us/schools/upk/upk.home.html) Plano ISD, Plano, Texas: This site is a good example of a district website with a wide variety of resources. The homepage is an attractive but simple imagemap containing links to the site's major sections. (http://k-12.pisd.edu/) Before typing these long URLs into a web browser, remember to visit http://www.wtvi.com/teks for an online copy of this article that includes links to these sites.   2- Focus on four website design fundamentals While there are numerous factors that combine to make an educational website effective, four characteristics stand out as fundamental to site success. These include: Navigation Graphics Speed Content Among these four fundamentals, "content is king." Flashy graphics and animations can be eye catching, but by themselves make an empty site with little value. Graphic considerations, navigational techniques, and ways to increase the speed at which your pages load will be explored in greater detail later in this article. Throughout the design process, however, remember that CONTENT is more important than fancy Java scripts or other frills. Creating a website is relatively easy. This fact is evidenced by the large number of websites on the internet which lack meaningful content. Designers must first decide WHAT they want to communicate via a website. With good content in mind and proper planning, deciding HOW to present the information can become much easier.   3- Decide on organizational sub-sections Website organization is essential, particularly as the size of a site grows. It is possible to over-organize a site (give every page its own folder), but much easier to under-organize. It is also cumbersome to reorganize a website once a large number of graphics and webpages have been created and saved in relative locations. The lesson here, therefore, is to organize from the outset. While there is not a hard and fast rule, generally it is a good idea to select five or six major categories into which your website's content can be divided. Later, when navigational tools are designed to help visitors easily get around in the website, these main categories can become linked text or images on a navigation toolbar. During this initial design process, solicit input from other educators. Ask people to be creative about the types of content which should be included in the website. What kinds of information should the school communicate to students, parents, and community members? Content to consider including on your website includes: school calendar newsletter lunch menu teacher directory including email addresses information about the school's history bio of the principal educational philosophy special classes or programs list of Accelerated Reader tests owned by the school student work by students at different levels links to educational websites links to community resources a map of the school and driving directions to it lesson extensions for students with internet access at home   4- Acquire the basic tools for website creation Four primary tools are essential to create a website: an internet-ready computer, a connection to the internet, webpage editor software, and graphics software. There are a large number of webpage editing software choices. A What You See Is What You Get (WYSIWYG) software program can virtually eliminate the need to write HTML code (known also as HTML tagging). Filemaker Homepage (http://www.filemaker.com/products/homepage3.html), Adobe PageMill (http://www.adobe.com/prodindex/pagemill/), and Microsoft Frontpage (http://www.microsoft.com) are all WYSIWYG webpage editors that have similar interfaces. Of the three, Homepage has an extremely intuitive interface on both the Windows and Macintosh versions. If a district is providing cross-platform staff development about webpage creation, Homepage is a good software choice. Another popular webpage editor is Netscape Composer (http://www.netscape.com/download/index.html?cp=hom02wbro). Composer is provided FREE with Netscape Communicator software (version 4.0 and newer). The fact that Composer is free compared to other commercial webpage editors makes it a logical choice for many educators. Choice of a webpage editor is a subjective decision based on cost as well as offered features. People within your district and campus will likely develop different opinions about these programs. The good news is that all webpage editors create HTML, which is simply a text file with references to SEPARATE image files. Therefore, if some people in your organization want to use Homepage and others prefer Frontpage, that is fine! They will simply be using different programs to open text files (HTML files). There are wide number of commercial, shareware, and freeware graphics software which can be used to create websites. The basic functionality of your software should include the ability to convert graphics into different formats, resize images, and insert text onto images. On the Windows side, Alchemy Mindworks Inc's Graphics Workshop is shareware (http://www.mindworkshop.com/alchemy/gww.html) that meets these basic requirements. For Macintosh users, GraphicConverter (http://www.lemkesoft.de/us_gcabout.html) is an extremely powerful, shareware graphics editor available for $30. If your budget allows, professional graphics programs like Adobe Photoshop (http://www.adobe.com/prodindex/photoshop/) and Corel Draw (http://www.corel.com/draw8mac/index.htm for Mac and http://www.corel.com/products/graphicsandpublishing/draw8/main.htm for Windows) will allow you to do virtually anything in a pixel environment. Graphics software introduced in 1998 and designed specifically for preparing web graphics include Macromedia Fireworks (http://www.macromedia.com/software/fireworks/) and Adobe Imagestyler (http://www.adobe.com/prodindex/imagestyler/). One of the best features of Fireworks is its ability to simultaneously present file format options. For example, it can show you how large a graphic will be if it is saved as a GIF or a JPEG, if the JPEG image has maximum, medium, or minimum compression, etc. You can even specify the maximum disk space you want the image to occupy, and the program will optimize the graphic's size and format to meet that requirement.   5- Design an efficient website by understanding the way image files / HTML files interact Unlike most desktop publishing documents, a webpage does not include graphics as part of the same document as the text. Text documents are separate HTML files with file extensions including .htm, .html, and .shtml. Graphics and media files are also separate, with extensions including .gif, .jpg, .au, .wav. .mov, and .avi. HTML documents are text files that specify how text and media elements should be displayed relative to each other in the visitor's web browser. Since media elements (graphics, sound files, movies) are stored in separate files, it makes sense to store these within a website in a separate folder. Name this folder "images" or "media." By placing all these items in a single folder, duplicate copies of media files can be avoided. This will enhance the organizational simplicity of the site, make it easier for future webmasters (who may inherit the site when the original creator moves away), and reduce the amount of disk space the website takes up on the server.   6- Use standard file naming conventions and establish a campus/district policy Once other people on a campus become interested in creating webpages and start submitting them to a local "webmaster," several consistent problems usually crop up. One problem is that if webpage authors have not been consistent naming HTML and media files, webpages which look great on a classroom computer may be missing graphics and have broken links when the page is moved (uploaded) to the server. These are not hard and fast rules, but these suggested guidelines can help avoid these types of headaches when naming files: use all lowercase letters limit the length of a filename to 27 characters use three character exentsions (.htm, .jpg, etc) on all files avoid special characters (&,#,@, etc) avoid using spaces, and use underscores (_) instead avoid using a period or tilde (~) as the first character of a filename   7- Select a unifying color scheme for the site Desktop publishing guidelines apply to web publishing as well. Students are often tempted to overwhelm a webpage with numerous colors, flashing icons, and several different fancy font types. Consider selecting consistent font and background colors for your site. If you use a special font, remember that site visitors will have to have the same font installed on their computer for a webpage's text to be displayed using it. Also, customized browser settings can override font and size settings created on individual pages. Once the major categories of the site are determined, a navigational banner can be designed for display on each page of the site. By using consistent colors and navigational icons, pages on your site can possess a similar "look and feel" that web visitors can easily recognize. This consistency helps visitors, who can link to your site from any other webpage on the internet, realize when they are viewing webpages that are or are not part of your site.   8- Include the school/district's location in the webpage title All internet web browsers display a title in the top of their viewable window. This title is contained between the HTML tags <title> and </title> at the beginning of a page. One technique for writing titles on educational websites is to include the name of the school / district, and the geographic location in the title. For example, a consistent title could be: "Rush Elementary School: Lubbock, Texas." Since web visitors can link to any webpage on your site from any other page on the internet, placing your organization's name and location on each page will help visitors quickly recognize the context of your webpage when they link to it.   9- Design webpages that load quickly Large graphics, too many graphics, or long tables can overwhelm a webpage and make it slow to load in a visitor's browser. A good rule of thumb is to limit the total size of each graphic to around 40K. When using tables to display a large amount of information (like a staff directory), consider breaking the table into several shorter tables. Web browsers do not display tables until they read the actual "</table>" tag which ends the table. Long tables, therefore, can make a webpage very slow to load in the browser. If tagging HTML without the aid of a WYSIWYG webpage editor, be sure to include the appropriate width = X and height = X values in all image references (<img src=...) to accelerate page loading.   10- Design webpages which are effective with different browsers and window sizes One of the greatest strengths of the internet is its ability to deliver cross-platform content to people using different browsers, with different sized monitors, on different kinds of computers. As a web designer tries to exactly control the way page elements are displayed in the browser, s/he runs the risk of over designing the page so it will not be displayed effectively in a different browser or window size. A helpful rule of thumb is to limit the width of graphics on the site to 450 pixels. Visitors using monitors with 13 inch screens will be able to easily read the webpage content like visitors with 17 inch screens.   11- Test the website in various browsers Although most web browsers display content the same, there are some differences. Particularly if a text editor has been used to manually create HTML "tags," omitted tags or syntax errors can cause webpages to look different in various browsers. In general, Netscape Navigator is the most "permissive" browser. It will accept almost any rendition of HTML (even if syntax errors and glaring format omissions are present) and usually still displays page content in an understandable way. Internet Explorer (IE), however, is generally more rigorous in the HTML it will accept and render properly in its browser window. Webpages which appear correctly in Netscape may look entirely different in IE. These differences are likely to be minimal if webpages are created with a WYSIWYG page editor. None the less, it is a good idea to preview pages with different web browsers as well as on different computer platforms.   12- Use websafe colors Color computer monitors can be set to display 256 colors, 16 bit color (thousands of colors), or 32 bit color (millions of colors). Only 216 colors in the respective 256 color palettes are shared between Windows and Macintosh computers. This color palette, called the Netscape 216 palette, should be used when most web graphics are prepared. Programs like Photoshop or PaintShop Pro (http://www.jasc.com/psp.html - Windows only) allow you to import this color palette, so that the only colors available for use are "web safe." Web designers who ignore the need to use the Netscape 216 palette risk providing web content that cannot be viewed by all site visitors. Monitors asked to display an unsupported color will "dither," meaning other colors will be combined to approximate the unsupported color. Sometimes the result is readable, but often it is not. An excellent description of the Netscape 216 palette and downloadable palette files are available at http://www.homepage.co.uk/webcolour/.   13- "Chunk" information appropriately The media has learned to reduce news stories and speeches to short, digestible sound bites which last a few seconds and are easily understood. While educators want to avoid providing incomplete or superficial treatment of important topics in websites, it is also important not to overwhelm visitors with too much information at one time. In addition to organizing the website into several main categories, limit the length of most webpages to two or three scrollable screens. This is a rule of thumb, so in general remember that most web visitors do not want to scroll down a lengthy document to find information of interest. If a long webpage is needed for a specific purpose, like a staff directory, use linked targets (also called anchors) on the webpage to enable visitors to jump from place to place on the same webpage. It is sometimes convenient to publish lesson plans or academic papers on a single webpage, since it allows a visitor to print the entire document by clicking on the "print" button in the browser toolbar one time. Again, the use of linked targets can help visitors quickly navigate through a longer document.   14- Include copyright and email contact info on each page To protect the student and teacher work published on a school site and enable visitors to quickly contact school officials if they have a question, include copyright information and a linked email address at the bottom of each webpage on the site. On Macintosh computers, the copyright symbol can be generated in common fonts by holding down the OPTION key and pressing the letter "G." The HTML code for the copyright symbol is "&copy;". A copyright line at the bottom of each webpage on a school site might read: © Copyright 1999 by Rush Elementary School: Lubbock, Texas. Email links are simple to create as well. After typing text which will serve as an email link, highlight the text to select it. Select the link editor / creator button, and type "mailto:wfryer@tenet.edu" as the link. Do not include quotation marks, and insert your own email address after the colon. When a web visitor clicks on this link, if their mail settings are correct they will be provided with an email message window with the "TO" field already completed. If you want the email to be sent to more than one address, separate additional email addresses in the same link with commas.   15- Create a site map A site map is a single webpage which contains links to all (or almost all) of the webpages included in a website. If visitors are looking for information and cannot readily ascertain which category contains the information they seek, a site map can help them locate a webpage of interest.   16- Choose the proper type of image format for graphics The two primary graphic formats used on the internet are GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group). JPEG images retain 24 bit color (millions of color), while GIF images are limited to 256 colors or less. GIF images come in two variations: transparent (with an invisible background) and animated. GIF images are best for simple graphics. JPEG format is appropriate for scanned photos and digital camera photos, which are likely to contain colors not included in the 256 color palette. When creating GIF images, remember to use the "web safe" Netscape 216 color palette as discussed in tip #12 above.   17- Use site management tools to consolidate images and check local links Several free tools are available on the internet which can help webmasters check the links, formatting, and spelling of webpages. One site offering tools like this is www.netmechanic.com. After you specify the website to be examined, site data is published for examination. Broken links, missing images, and misspelled words are included on these pages. The time required to analyze the website will depend on its size. Once the analysis process is complete, an internet address is emailed to the requester including the results of the analysis. Tools like netmechanic.com provide webmasters the ability to thoroughly verify formatting on numerous webpages quickly and easily. Other site management tools are included with some WYSIWYG webpage editors. For example, Homepage offers the option of opening a "folder as a site," and then consolidating either individual folders or the entire site. Consolidation involves checking relative website links (to other pages on the same site) and moving all media files to a single folder. The option to consolidate is invaluable when other people start providing website content which may or may not conform to established webpage standards.   18- Provide visitors with a reason to return The dynamic nature of the internet and its ability to deliver updated content is one of its outstanding features. Unlike a brochure which is sent home with students, a website can be continually updated with new information of benefit to students and families. Include a calendar of upcoming events, a list of current student projects and web links which can provide at-home extension activities for students, or other features to keep website visitors coming back to the site again and again. Committing to provide updated information on a website can be taxing, however. Ask the campus administrator for an extra planning period or other compensatory time to allow for website updating. Schedule a regular time each month for updating the site. If teachers are not allowed to directly upload your pages to the district server, encourage the district webmaster to promptly post the changed files to the server after submitting them on disk or via email. Include the "last updated" date at the top or bottom of your site's main homepage to let visitors know how current the site content is. Use powerful tools like Myrmidon (http://www.terrymorse.com/ - Mac only) to instantly publish any document in any software program as a well formatted HTML page. Myrmidon is especially handy for quickly publishing school newsletters online.   19- Record the website's design and layout for future webmasters Educators who have inherited responsibility for updating and maintaining a website originally created by someone else know this process can be both confusing and time consuming. Ease the process for webmasters who will follow by drawing a "storyboard" of the website's organization and contents. This illustration should show the folders in which files are saved and indicate the contents of files if it is not obvious from their filename. For example, if the file named "ar2.htm" contains the updated list of Accelerated Reader tests owned by the school, that information should be recorded on the storyboard or accompanying documentation. Providing this type of information for future webmasters not only facilitates their ability to update the site, but it also ensures that the MANY hours devoted to creating the site will not be put to waste by a frustrated, second-generation webmaster who throws up his/her hands and decides to just start over on the website rather than decipher what was created previously.   20- Register your site with search engines A website is only effective if people looking for the information it contains on search engines or other publications can find it. Once the site is online, advertise its internet address in the local paper, school newsletter, and any other local publication. Additionally, take time to register the site with several search engines. Do this by clicking on the link to "Add URL" or "Register Your Website" on the homepage of all search engines. At a minimum, register with Yahoo (www.yahoo.com), Altavista (www.altavista.com), and Exite (www.excite.com). Free services like 123 Launch (www.123launch.com) will quickly register your site with many more search engines without requiring you to enter the same site information repeatedly. Commercial services are available for site registration, but the only thing these services save is time. Webmasters can register a site just as thoroughly as a commercial service, since most search engines index from one another anyway. By registering on several main search engines, your site's address will "get around" the internet and be available for visitors. To learn more about the mechanics of actually creating webpages, explore the online web design curriculum available at http://www.wtvi.com/html. Creating an effective website is not a simple task, but it is achievable with a little study and a lot of dedicated computer time. By remembering the design fundamentals and and suggestions described here, webmasters can "set their site on success" and create effective communication tools which benefit the entire educational community.   Wesley Fryer is a Windows95 computer lab teacher in the Lubbock Independent School District. He is also a workshop presenter, web designer, and technology consultant. He invites your questions and comments at wesfryer@yahoo.com.   Tools for the TEKS home | Article Archive | Technology Workshops Mailing List | Feedback | Tools and Techniques | Technology Idea Exchange Contact me using this webform. Links to my blogs are also available. This work is licensed under a Creative Commons License.