The following is the minimum student computer system designers should cater for when creating web materials for students:
Browser - Internet
Explorer 5.x, Opera 6, Mozilla
1.x.
Screen size of 600 x 800 pixels.
Colours - thousands of colours (24bit).
33.6 Kbs Modem (actual connection speed varies).
When creating learning materials for web delivery please use the following as a guide.
Always check the Kb size of all files you are placing on the Internet.
PowerPoint presentations saved as a PDF file for web delivery should not contain images that have been reduced in size within PowerPoint as the quality of the image is often seriously degraded and it also makes the final PDF file extremely large. Reduce the image to the required width and height before inserting into a PowerPoint presentation. Also ensure that the resolution of each image (i.e. the number of pixels per inch) is optimised for web delivery – this means a resolution of 72ppi. For example, if you have a scanned image at 300ppi and insert it into PowerPoint, the PDF version is likely to be over 2Mb – multiply this by how many images are included in the presentation and the final PDF can easily exceed 15Mb. Where possible, image size should not exceed 50Kb. It is preferable to use a good image editor such as Adobe Photoshop to resize images.
The advantage of converting PowerPoint presentations to PDF is that they allow students to download the entire presentation and print it. PDF files posted on the web should (ideally) be no more than 1-2Mb in size and when linking to PDF files on your web page, the file size should always be indicated next to the link.
The same principals in image optimisation apply to saving your PowerPoint presentations as HTML. The advantage of using this method is that it allows students to progressively view the presentation which is better for slow modem access.
You may want to consider saving the presentation in both formats and allow the students to choose the format the suits them.
Take care creating PDF files. They can be extremely large in Kb. This is due to a number of factors including image depth, the print resolution and inclusion of fonts etc in the file.
Mac OSX users should avoid using the save as PDF option. Files are not optimised for web delivery. File size can be reduced tenfold using shareware applications such as Print-To-PDF. Ask SOBSTDU for help with this.
Web page size should be kept to a minimum. As a general rule, web pages should not exceed 50Kb.
Test all pages on Internet Explorer and Mozilla on both PC and Mac platforms. Development of the Netscape browser has been discontinued and has essentially been replaced by the Mozilla browser. If possible test your site on other available browsers such as Opera and Safari (Mac only).
Try to avoid the use of frames as they are cumbersome to navigate and both bookmarking and printing of pages is difficult. Only use frames if absolutely necessary and use no more than 2 frames in a page.
Titles of pages should be indicative of content.
Colours should be visually appealing and consistent throughout the website. When choosing colours for text and backgrounds there must be a good contrast between the two. Never use white text on a black background as studies have shown that it is uncomfortable to read. It is good practice to use dark text on light backgrounds rather than light text on dark backgrounds. A white background and black text is the safest option.
Text volume should be minimised where possible. Avoid large blocks of text by breaking them up into smaller paragraphs. Make sure headings are obvious and try and emphasise important words by highlighting them in some way e.g. using bold text.
Font size in text passages should be default unless designed for effect, e.g. heading, subheading etc. Avoid using (-)ve (+)ve values for font sizes - these vary between browsers and platforms and do not use points (pt) as they are used to define font sizes for printing. The simplest way to define font sizes is using pixels - a font size of 12px is the minimum size that should be used for paragraph text (roughly equivalent to a 12pt font in a Word Processor). Pixels have the advantage of appearing the same across all browsers and platforms, however, it should be noted that on Internet Explorer for Windows, font size defined by pixels cannot be resized in the browser (all other major browsers allow the user to increase or decrease font size in the browser regardless of the units used in the web page itself). It is best to define your font sizes using style sheets as they enable the greatest control over font appearance. Test on different browsers and screen resolutions to ensure that the correct font size has been made.
Font type should be a standard font (cross platform compatible), such as Arial or Times New Roman.
Use style sheets to define as many of the properties of your web page as possible - background colours/images, borders, font size and colour, as well as the positioning and sizing of various other elements such as layers and tables. Style sheets can either be internal to the page (written in the head of the document) or as a separate linked file (.css). The advantage of using a separate linked file is that all your pages can link to it and thus have the same style. Additionally, changes to the style sheet affects all files using that information. For example, if you are unhappy with the text colour in your site, you can change the font colour in the style sheet and all the web pages linked to that style sheet will then display the new font colour.
For a tutorial on style sheets go to the World Wide Web Consortium: http://www.w3.org/Style/Examples/011/firstcss
Size of images should not exceed 50Kb where possible.
Photographs and continuous-tone images should be saved in JPG format while images with few colours and no tones (e.g. a cartoon) are best saved as GIF. GIF is especially suitable for line drawings, lettering and simple graphics.
When an image is saved as a JPG it is compressed and some data (in the form of pixels) is lost - this is called lossy compression. JPG images lose clarity every time they are saved because more and more data is lost each time. Therefore, always manipulate original images - either TIFF, BMP or other uncompressed formats such as an Adobe Photoshop file (PSD) - and only save the image as a JPG for display on a web page.
When saving an image as a JPG it can be compressed at different levels. The higher the compression the lower the quality of the image and the smaller the file size. Conversely the lower the compression level the larger the file size and the better the quality of the image (see Table 1 below).
The level of compression of an image depends on its final output. For example, a photograph used to illustrate a point/feature should be clear, therefore when saving it as a JPG the quality of the image will take precedence over the file size.
Images saved in the GIF format should be optimised for the number of colours used in the image. The fewer colours in a GIF image, the smaller the file size and vice versa. At most a GIF image can have 256 colours. Images saved in the GIF format do not lose any data (called lossless compression), however GIF images can vary in quality because of the amount of colours used. For example, an image with 256 colours saved as a GIF with 125 colours will not have the same quality as the image saved as a GIF with 256 colours but its file size will be smaller.
| Compression Level | File Size | Image Quality |
|---|---|---|
| Save as JPG | ||
| High | Small | Low |
| Low | Large | High |
| Save as GIF | ||
| Few colours | Small | Low |
| Many colours | Large | High |
If possible use an image editor such as Adobe Photoshop to save images in the JPG and GIF format. Photoshop has a "Save for Web" feature that allows you to compare the image at different quality levels and file sizes prior to saving.
IMPORTANT: Prior to inserting images into a web page ensure that the image is the same size as it is to appear in the web page. For example, if your image is 300 x 300 pixels but its size in the web page is to be 100 x 100 pixels, do not resize the image within the web page but rather resize the image in a graphics editor prior to inserting them. Large images resized within the web page cause longer download times - even though the image appears smaller in the page, its file size is still that of the larger image e.g. from the example above, if the 300 x 300 pixel image resized in the web page has a file size of 20Kb, the user will still download that 20Kb regardless of the fact that the image is only 100 x 100 pixels in the web page.
In web pages with many images or where images are large, use thumbnails to link to the larger versions of the image. Images should be resized to thumbnails in a graphics application NOT in the web page (see above).
Copyright - if images are not your copyright you must indicate the copyright holder. Ask permission of the owner before you use their image for display in a web page. Most image owners will allow use for educational purposes.
Use movies only when absolutely necessary to illustrate a concept.
Size of movies should not exceed 1Mb where possible and should be saved as MPEG-4 which is the standard file format for web delivered movies. Quicktime Pro 6.x allows for movies to be saved in the MPEG-4 format. Contact SOBSTDU for assistance in movie editing and compression for web delivery.
Movies should not load on the page automatically except in special circumstances. Be sure to use a thumbnail or text hyperlink to link to the movie and always indicate the file size next to the link.
Movie Controls should be provided to the user. When inserting the movie into the web page, the width and height of the movie must be specified. Be sure to add extra pixels to allow for the controls to be seen. Test in the browser to ensure the correct dimensions have been specified.
Streaming technology should be used for very large movies. Streaming allows progressive download of the file whilst the user watches the movie. Contact SOBSTDU for assistance.
Copyright - if a movie is not your copyright you must indicate the copyright holder. Ask permission of the owner before you use their movie in a web page. Most owners will allow use for educational purposes.
As above for movies.
Avoid large sound files that require downloading before playing. Ask SOBSTDU about streaming sound files.
When naming files that will be viewed over the Internet, ensure that there are no spaces or unusual characters in the file name. This also applies to folders within a website.
The reason is that URLs do not allow for spaces and a browser will usually replace the space with '%20'. This creates a rather confusing URL as shown below.
In order to distinguish between words in a file name consider using the underscore character or capital letters.
File/folder names should only contain letters, numbers and the underscore character. Brackets, dashes, mathematical characters such as + should never be used.