Creating the Perfect Classroom Website

¶ … perfect Classroom Website

Various experts on Web design and creation state that the Internet provides the most accessible and innovative medium for education and classroom teaching purposes. Some claim that the Web offers a platform and a "perfect medium" for teachers. (Lord, 2004, p. 20) This view is echoed in numerous studies about the impact and the possibilities of new technologies like the Internet for education and the enhancement of classroom activities.

However, at the same time, pundits issue a warning that the availability of this technology alone is not sufficient in itself for the creation of a perfect classroom Website. They note that an understanding of the medium and how best to use the technology as it relates to good teaching and educational methods is the most important factor in creating the "perfect" educational Webpage.

This sentiment is echoed in the growing trend of recent research in computer-assisted language learning (CALL), in which scholars are beginning to realize that the bells-and-whistles approach to technology will not work in our language classrooms. While each teacher must adopt the technological practices that work best with his/her own methodology and pedagogical beliefs, the field is coming to accept that we must have more motivation than the simple fact that the technology is available.

(ibid)

In terms of design and the do's and don'ts of building a good Website, creating a Website for the classroom is not any different to creating any other type of Website. The same principles of good design and understanding of the capabilities of the technology apply. The only difference is in the aims and intentions of the Website. As will be discussed, planning the Website is as important as knowing which fonts are best to use and how to manipulate images. This paper will focus on the creative and practical process of design with reference to the most common errors and the best ways to ensure that the classroom Website is user-friendly and well as being functional and attractively designed

Good Web design must also take cognizance if the latest technologies that are available to enhance the communicative aspects of the site. These include technologies such as Flash and other interactive components that can be added to a website. However, a perfect website is not necessarily one with the latest technological components. The basics of web design and text and image presentation always form the foundation of all good Websites. The following assessment and explanation of elements in the creation of a "perfect" classroom Website will take these factors into account.

2. Initial considerations: fundamental aspects of a classroom Website

Good Web design starts with simplicity and planning. While new technologies are extremely useful and can enhance the communication and teaching facilities, yet if the foundations have not being established none of the "bells and whittles" or advanced capabilities will be of much use.

As many experts attest, the first and most important step in creating the perfect Website is the planning phase. This is crucial to the entire development of the site. The planning phase involves asking oneself the following types of questions, e.g. what is the central purpose of the site that I wish to create; what do I wish to achieve with the site? In terms of a classroom site this may mean that one has to establish whether the site will be developed as an online learning facility or a communications centre that would, for example, include interactive input from students and parents etc. The choices and decisions that are made will have a profound bearing on the rest of the Website creation process.

Once the general framework of the site has been established, one then plans the site in terms of appearance and the possible interactive dynamics of the site. This also refers to the important aspect of navigation and access to the site and the way in which the students or users would enter the site. For example, will the site have a front page with links to the various areas or will it be more of a "portal" site and with an interactive "door." These are central aspects that will determine other design and practical decisions.

All of these aspects can be sketched on piece of paper and the central decisions outlined at this early stage. Experts all emphasize the importance of this preparatory phase before actually embarking on the physical creation of the Website. This stage also includes the following aspects.

1. Browse through other classroom Web sites for ideas and inspiration.

2. Decide on the primary aim or purpose of your classroom Web site (parent communication, homework announcements, etc.)

3. Sketch out a layout for your pages, keeping a consistent design on all pages of your site.

4. Start small and add to your site as time goes on.

(How to Make a Classroom Web Site)

Some initial tips that should be borne in mind are that the site should not be overly busy as this may distract for the central purpose and functionality of the site. An important tip is the copyright aspects of using images from other sources. It is extremely tempting to use images that one finds on the Web for your site. However, copyright law forbids this type of usage and permission from the owner of the site on which that image appears should be requested.

Another initial pointer is that many novice Web designers do not take into account the nature of the medium in which they are working. The internet is by its very nature interactive and continually changing. It should be remembered that, unlike other media, Websites are expected to alter and change - even on a daily basis. Therefore, when designing a Website the planning phase should include an understanding of this dynamic aspect and the practical implications related to it.

3. Wed editing tools

Web editing applications have become an essential component in creating an effective Web site. The central question that faces many new Web designers is deciding on which tool or application is best suited to their purposes. While the professional hardcore scripter and programmer may want to hand-code their Web pages in an application like Notepad, most Web designers and Webmasters will opt for one of the more sophisticated Web editing applications available today. While there is nothing wrong with hand-coding your site - in fact this is probably the best way to have complete control over the functioning of your Web pages - the range of tools and applications that are currently available make this an arduous and even unnecessary way of creating a Web site. The choice of a Web editing package will depend on what you intend to use it for and your level of Web design and coding expertise. The best Web editing application is one which provides all the capabilities with the least extreme learning curve

The range of Web editors and designers has expanded rapidly over the past few years. A number of new applications have also recently been introduced to the market, which succeed in combining high-end sophistication with user-friendliness, making the programs amenable to both the professional coding expert as well as the relative novice.

In previous years there were two main types of Web editor. These were divided into WYSIWYG (What You See is What You Get) applications and text-based HTML editors. The former category catered for the user who needed an easy and efficient way of producing Web pages without any of the effort and learning curve of understanding the underlying language or script. These editors are very similar to word processors and were easily recognizable to the user, with a visual interface that hides the complexity of coding beneath it. However new software has been introduced which provides all of these aspects. They are known as hybrid editors that cater for both the professional coder and those who are more design orientated.

One of these editors is Macromedia Dreamweaver which is targeted at the high end of the market, but easy enough to allow entry to the novice and also less technically inclined. Microsoft FrontPage is another worthwhile product that attempts to provide the best environment for the novice user who has little time to spare for learning a complex working environment. The best program on the market for the point-of-view of many designers is Macromedia Dreanweaver FrontPage however has a range of very user-friendly features. The program makes use of a large range if templates and "Wizards" that help in the process of creating a Web page. Another popular choice is Adobe GoLive, which is less expensive but has a full range of components to produce just about any type of Website. Another good editor is Namo WebEditor 5. All of these applications provide the tools one would need to create a well designed and interactive Website.

4. Writing for the Web: Text and fonts

Once the most appropriate Web editor for the purpose has been decided on, one can begin the actual creation of the site. One of the most important aspects to consider is text and the way that text should be displayed and written for the Web. It is Important in this regard to understand that writing and presenting text on the Web is very different for writing for other media. The Internet requires a certain understanding of the medium in terms of the way that users read text. This is an aspect which will be discussed later in this section.

The first aspect to consider is what type of text to use. This refers to the type of font that is best displayed online. An important consideration when designing Web sites is that there are different computers with different operating systems and different Web browsers which will access the Web pages that you are creating. Therefore it is imperative that the font and type of the text that you use should be able to be displayed and clearly seen across most platforms and browser types. It is best to use the simplest and most common font types. This means that a font like Arial or Times Roman is much better for consistent display than other more obscure font types.

Another important aspect and a common error that is encountered on a number of educational sites, is that the amount of text should not be too dense or intimidating. It should always be remembered that most users and students will be viewing the page on relatively small screens. A standing rule in Web design is that if a Web page requires too much " scrolling down" to be seen, then this is a negative factor which impedes easy access to the site's information. Therefore, the text should be well distributed and use should be made of "white space" or breaks in the flow of the text so that the text is not unattractive and overwhelming. Furthermore, one should not place too much text on a single page but rather create links to other pages to continue the flow of the text from the main originating page.

A further basic aspect to consider when using text is to ensure that the background color of the Web page does not obscure the words. This is a very common error that is often made by novice designers. In order to make the site visually interesting they sometimes use colored text which clashes with the background color of the page and obscures the information. For example, this can occur when using orange text against a red background, or any color that is too close in tone to the background of the site. It is best to go for simplicity in this regard and use black text against a white background.

Writing for the Web has become a new art form in itself with numerous articles and books being published on this topic recently. Theresa Lutge-Smith, for example, discusses some of the tips and tricks that are worth considering when dealing with text. She states that, "A good tip is not to center all the text on a page as this can make the text difficult to read. Another tip is not to use blue text as this usually denotes links and might confuse the user." ( Lutge-Smith, T.)

Another common error that is mentioned by designers is underlining text as this may also be confused with hyperlinks. An aspect that has been criticized by designers is the excessive use animated text. While this is a tempting and comparatively easy to achieve, it has been overdone on many sites and tends to detract for the overall impression of the Web page.

The correct and precise usage of words is an extremely important part of web design. More than any other medium, Web pages depend on conciseness and on writing succinct and to -- the -- point text. This is mainly due to the restrictions of screen space as well as nature of the medium which requires tight and unambiguous information and directions. This means the text must be carefully used in links and direction on the Web.

The cardinal issue is to write in such a way and present your information so that the information is useful to the user. The intention is to make it clear what each page has to offer the user. This is an obvious but an essential point and one that can make the difference between someone staying on your site of moving away." ( ibid)

5. Using images

Graphics are one of the most important elements in the design of an educational Web site. Images such as maps, flow charts and interactive areas for learning can be invaluable aids on a classroom site. In terms of appearance, a Web site with only text can look staid and dull and does not fit into the interactive and dynamic context of the Internet - and most probably will not induce students to stay or visit the site.

On the other hand all the experts are in agreement that using too many images can make the site congested and amateurish. As a general rule designers state that images should be used sparingly and the Web creator should " ... ensure that every graphical element is absolutely necessary to the message or idea that you are trying to convey. As a rule of thumb many professionals estimate that the use of graphics should not be more than 20% of the page space." ( ibid)

Graphics refer to any images on the Webpage which are identified by a specific image formats. Experts emphasize that graphics play a crucial part in the design and the functioning of a good Website.

It is important to realize that all graphical elements on a Webpage have an effect not only on the design, but also on the performance and usability of that page. Graphical elements include navigation buttons, image maps, logos, bullet points, mastheads to title graphics, background images, as well as photos and animations. All of these elements have to be optimized for the best download speeds and the best possible integration within the overall design and functionality of the site.

( Smith G. 2005. p. 7)

One of the areas which often cause problems for beginners are the image formats required for display on the Internet; as well as the size of the images themselves. A number of imperative aspects need to be mentioned here. Firstly, the internet is all about speed. A slow Website is a site that is usually not optimized. There is nothing worse for the internet user than having to wait for a large image to load on a page which prevents further exploration of the site.

The first rule of working with images is that they should be no larger than 30- 40 Kbytes in size. This will ensure that they load quickly and consecutively with the text. While many users may have broadband access, some students may be accessing the site over slower connections and this may result in a poor presentation of the site.

Images that have been scanned usually have to be optimized -- which simply means that their size has to be reduced. There are numerous software programs that can do this and almost all image editors these days have this function. However, in order to underhand this process properly it is also important that the designer has knowledge of the different image file types that are acceptable on the web.

There are at present three common image file types that are used on the Web. They are, GIF, JPG and PNG. Most sites use the first two types while PNG files are becoming increasingly popular. Each graphic format has different potential and capabilities, particularly when it comes to optimization. This is a complex area but to simplify for practical purposes it can be safely said that GIF files are mostly used for animation and the JPG format for images.

A GIF file or Graphic Interchange Format is often used for Web graphics due to their efficiency. JPEG (JPG) files have also become popular due to their ability to provide for full or 24-bit images. This format ensures that the correct colors are seen online by the user. The JPG format is best used fro images that require smooth color transitions and for images that require depth of color. JPG files also are able to be considerably compressed and this fact can assist the designer in ensuring that the images online are not too large. It should be noted that with JPG files compression does result in a certain loss of quality and the designer has to balance loss of quality against file size. However, at normal compression levels this quality is usually not discernable on the Web

The general rule of thumb is that if you have images with many colors then use the JPG format; while the GIF formant is more practical for images that have fewer colors. Another way of reducing the size of image files is to reduce the color depth of the images. This can by using Web color palettes.

One aspect in working with graphics and images that is often forgotten by designer is the use of the ALT tag. These are text tags which are attached to the image and which appear on mouseover, and which provide an indication of the nature or title of the image. This is an important aspect to include in your site as it adds to there functionality of the site and also provides information on the image if the user is have turned off image access on his or her browser.

6. Design aspects: structure and navigation

Paying attention to the way that the various elements on the Web site are structured and arranged is an essential aspect of creating the perfect Web page. As one Web design expert states

One of the primary elements to pay attention to when designing your site is to keep the interface clear and intuitive and the text clean and concise. One tip is to use bullets to outline main points. Don't try to fit your entire site onto one page. Leave longer explanations to linked pages that allow the user the choice to explore that specific area if they wish. Remember that uses will move away from your site if they cannot find the information or at least a link to that information very quickly.

(Lutge-Smith, T.)

The above quotation highlights important elements of general layout and organization of a Web site. Aspects such as the balance between text and image are not only a design factor but will also enhance the site in terms of student accessibility and learning. Furthermore, the format of the Webpage should be " ... readable and logical in construction." ( ibid) Many Web designers have opted for a simple and clear format and organization of their Web pages. The aim with a classroom site is to present interesting information and links in the most comprehensible way possible. Therefore the format of the classroom Web site should be simple and not cluttered with too many images or too much text.

This leads to one of the most important aspects of Website design -- the navigation. Clear and simple navigational elements are essential for a good Website. Navigation refers to the way that the reader or user gets around the site. If the navigation is not crystal clear this can result in confusion as to the structure of the site and the educational impact of the site may be lost. For example, reviewers for the recent Webby Awards for the best Web sites on the Internet (www.Webbyawards.com) found that and many sites that were well constructed from a graphical and aesthetic viewpoint fell out of contention for the Awards because of basic flaws like navigation. .

The answer to the creation of a good navigation system, as has been shown time and again on some of the best Websites, is simplicity of design. A straightforward sidebar or topbar list of links to the various areas of the site is often the best navigational system. Complex and intricate interactive navigation components often lead to confusion rather then clarity as well as to possible compatibility issues.

An important aspect is to place your navigation system, whether it is a dropdown box or sidebar, on each and every page of your site. Visitors can enter your site from many different pages and your navigation should also be present. Many designers are returning to simple format of top and sidebars, and often just in text. These may not be the most exciting form of navigation but it is foolproof and will lead your user around your site with the absolute minim of download time.

There are numerous other navigational options. One that might be appropriate for a classroom, if the designer is sure that the potential users have the appropriate browser plug-in, is Flash. Using Flash can provide some very exciting and functional navigational options. If the designer decides to use Java or JavaScript as the basis of the site navigation it is important ensure that an alternate navigational means is also provided, as some users do not have this capability and many choose to turn off these features in their browsers.

Another aspect to consider is the use of frames as part of the navigation. Frames have fallen out of favor as a means of navigation with many designers as frame-based sites can create problems. Not least of these is that if a user creates a bookmark of a frame-based page in his or her browser, then the chances are that returning to the link will not bring up the same view, as the bookmark cannot refer to the state of the framed pages. More importantly, search engines also have a problem with indexing frame-based sites. While they provide an easy form of navigation, the designer should be sure that all users will be able to view the content in the same way.

In summary, the best form of navigation for a classroom site is one which balances attractive elements with functionality. Possibly the most effective and least likely system to cause problems is a simple text-based form of navigation.

7. Interaction

A Web site without interaction is essentially a dead page with little interest for the modern Web user. Interaction can take many forms. One of the most common forms used by designers is the ubiquitous interactive buttons and links to other areas of the site. This is an essential aspect and once again should fit into the central design principles that have been discussed above.

There are however many other forms that interaction can take and these should be considered, especially in the construction of an interesting classroom Website. Another easy to create and popular form of interaction that is used on many successful educational is the interactive image map. Almost any Web editing program can create these image maps. Essentially they are images which have areas or "hotspots" that act as links to other pages and areas of the Website. For example, a map of the world can easily be crated with "hotspots" that refer to further information regarding particular geographical areas, e.g. wheat production areas. Clicking on this area will take the user to a part of the site or a new page which presents further information on that particular region. Alternatively, image maps can be constructed with frames so that the information appears next to the actual map.