Converting an existing web page to a more flexible format
This document is intended to provide an example of how to convert an existing web page to a more flexible format. It is provided for students of Australian National University, Department of Computer Science, COMP2410/3400/6340, to illustrate lectures given by the author, but may be of interest to others.
This is a redesign of the home page of the Journal of Research and Practice in Information Technology (JRPIT) to make it suitable for a small-screen device (such as a WAP 2 mobile phone), as well as a conventional desktop computer. The same overall look has been retained when displayed on a desktop computer, with a more compact layout for a mobile device, as per "The Universal Document Format?".
The Journal of Research and Practice in Information Technology is an international quality, peer reviewed journal covering innovative research and practice in Information Technology. Until 2000 it was titled the Australian Computer Journal, and has been published by the Australian Computer Society continuously since November 1967.
Home Page, Journal of Research and Practice in Information Technology, Australian Computer Journal, January, 2003, URL: http://www.acs.org.au/jrpit/
For this exercise the web site used was as contained in the Internet Archive at 7 July 2003, URL: http://web.archive.org/web/20030707164654/http://www.acs.org.au/jrpit. The original web page had been edited using Microsoft Word and so contained extraneous formatting information. One exercise for the student was to remove that material. The web page also used JavaScript to include a standard menu. That was not relevant to the exercise and so was removed to create a simpler version to work from, URL: http//www.tomw.net.au/2004/wd/jrpit.html.
The Exercise
Your task is to redesign the home page of the Journal of Research and Practice in Information Technology to make it suitable for a small-screen device (such as a WAP 2 mobile phone), as well as a conventional desktop computer. The same overall look should be retained when displayed on a desktop computer, with a more compact layout for a mobile device. Use the same approach as you did for "Wireless Web Design" in Laboratory Exercise 4 .
The Assignment
- Convert the HTML of the home page to XHTML Basic. Use an additional CSS file for the mobile device layout.
(Review Tom Worthington's first lecture.)- Convert fonts and colours to use CSS. Minimise the number of fonts used and the size of the CSS file.
- Convert the layout from using tables to use CSS 1 and CSS 2
- Estimate the download time of your page using a 5 kilobyte per second wireless modem. Suggest how to reduce the download time.
- Check that your design meets Conformance Level "A" of the World Wide Web Consortium's Web Content Accessibility Guidelines 1.0. Conformance Level "AA" or "AAA" is desirable, but not essential.
You should provide the following deliverables.
- One XHTML Basic file ...
- One or more CSS files ...
- An estimate of the download time and suggestions for improvement.
- Details of the Content Accessibility check.
From: Assignment 3 - Website Design, Australian National University Department of Computer Science, COMP2410/3400/6340, May 2004, URL: http://cs.anu.edu.au/Student/comp3400/documents/comp2410-2004-09.html
The Answer
XHTML Basic file
- The HTML 4 was converted to XHTML Basic,
- Fonts and colours removed to CSS files,
- The document title was removed from the banner image at the top of the page and replaced with text overlaying a background image.
CSS
- Default: All fonts were changed to "sans-serif" and the table based layout was changed to use CSS DIVs.
- Hand Held: An additional CSS file was added for the mobile device layout. As an example the side menu changes to full screen width on a hand held device and the menu items are then numbered and can be selected via the keyboard of a mobile phone. Further changes could be made to the design to make mobile use easier, but would compromise the consistency with the full screen design.
- Print: Another CSS file was added for printed documents. This deletes the menus and renders the text in black, with no images.
Estimate of the download time
| File | Size |
|---|---|
| XHTML | 7 |
| default css | 2 |
| banner image | 10 |
| acs logo | 10 |
| Total | 29 |
Suggestions for improvement
The download time for a hand held device has been reduced by specifying smaller versions of the images in the hand held CSS. The banner has been reduced from 10 to 2 kbytes by making it 320 pixels wide (the screen width a typical high resolution hand held device). The ACS logo has been reduced from 10 kbytes to 660 bytes by reducing the width by 50%, reducing the colour range to 16 colours. It has also been converted to a non-animated graphic to reduce distraction.
| File | Size |
|---|---|
| XHTML | 7 |
| default css | 2 |
| hand held | 1 |
| banner image | 2 |
| acs logo | 1 |
| Total | 13 |
At 5 kbytes per second this will take 3 seconds to send (rounded to the nearest second), a reduction of 50%.
Details of the Content Accessibility check
Checked against World Wide Web Consortium's Web Content Accessibility Guidelines 1.0.
Use of tables for formatting, all colour and font specific information and images have been removed from the HTML. The result is a document which meets at least Conformance Level "A", most likely Double-A and most of Triple-A.
Web Content Accessibility Guidelines Checks
- Provide equivalent alternatives to auditory and visual content
- Provide a text equivalent for every non-text element... [Priority 1]: The document contains no non-text elements. Two images are provided as part of the background and do not require a text equivalent.
- Provide redundant text links for each active region of a server-side image map. [Priority 1]: The document contains no image maps.
- Until user agents can automatically read aloud the text equivalent of a visual track, provide an auditory description of the important information of the visual track of a multimedia presentation. [Priority 1]: The document contains no multimedia.
- For any time-based multimedia presentation ...: The document contains no multimedia.
- Until user agents render text equivalents for client-side image map links ...: The document contains no image maps.
- Don't rely on colour alone. Ensure that text and graphics are understandable when viewed without colour.
- Ensure that all information conveyed with colour is also available without colour, for example from context or markup. [Priority 1]: Colour is only used to mark titles and other text elements which are indicated in other ways.
- Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. [Priority 2 for images, Priority 3 for text]: Dark text on a light background is used for most text. The page heading uses white text on a dark blue background image (plain dark blue is specified if the image is not rendered).
- Use markup and style sheets and do so properly. Mark up documents with the proper structural elements. Control presentation with style sheets rather than with presentation elements and attributes.
- When an appropriate markup language exists, use markup rather than images to convey information. [Priority 2]: CSS is used to set colours.
- Create documents that validate to published formal grammars. [Priority 2]: XHTML Basic is used.
- Use style sheets to control layout and presentation. [Priority 2]: CSS 'font' property is used to control font styles and DIVs for layout.
- Use relative rather than absolute units in markup language attribute values and style sheet property values. [Priority 2]: Relative units are used (mostly em).
- Use header elements to convey document structure and use them according to specification. [Priority 2]: HTML heading levels are used for structure.
- Mark up lists and list items properly. [Priority 2]: OL is used for a list, rather than using a table.
- Mark up quotations. Do not use quotation markup for formatting effects such as indentation. [Priority 2]: No quotations are used.
- Clarify natural language usage ...
- Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions). [Priority 1]: No changes in language occur.
- Specify the expansion of each abbreviation or acronym in a document where it first occurs. [Priority 3]: Not done. ABBR and ACRONYM could be used.
- Identify the primary natural language of a document. [Priority 3]: xml:lang is used to indicate the language.
- Create tables that transform gracefully: No tables are used.
- Ensure that pages featuring new technologies transform gracefully. ...
- Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document. [Priority 1]: Page renders as a simple linear web page with style sheets turned off.
- Ensure that equivalents for dynamic content are updated when the dynamic content changes. [Priority 1]: No dynamic content.
- Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off ... [Priority 1]: No scripts, applets, or other programmatic objects are used.
- For scripts and applets, ensure that event handlers are input device-independent. [Priority 2]: No scripts or applets are used.
- Ensure that dynamic content is accessible or provide an alternative presentation or page. [Priority 2] : No dynamic content.
- Ensure user control of time-sensitive content changes: No time-sensitive content used.
- Ensure direct accessibility of embedded user interfaces: No imbedded interface (just HTML).
- Design for device-independence. Use features that enable activation of page elements via a variety of input devices....
- Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape. [Priority 1]: No image maps.
- Ensure that any element that has its own interface can be operated in a device-independent manner. [Priority 2]: No imbedded interface (just HTML).
- For scripts, specify logical event handlers rather than device-dependent event handlers. [Priority 2] : No scripts.
- Create a logical tab order through links, form controls, and objects. [Priority 3] : Simple linear document, so default tab order is the logical order.
- Provide keyboard shortcuts to important links ...: "accesskey" attribute used for numbered menu.
- Use interim solutions. ...
- Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user. [Priority 2]: No popups or spawned windows.
- Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned. [Priority 2]: No forms.
- Until user agents (including assistive technologies) render side-by-side text correctly, provide a linear text alternative (on the current page or some other) for all tables that lay out text in parallel, word-wrapped columns. [Priority 3]: No tables.
- Until user agents handle empty controls correctly, include default, place-holding characters in edit boxes and text areas. [Priority 3]: No edit boxes.
- Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links. [Priority 3]: No adjacent links in text.
- Use W3C technologies and guidelines. ...
- Use W3C technologies when they are available and appropriate for a task and use the latest versions when supported. [Priority 2]: CSS 1 and 2 are used.
- Avoid deprecated features of W3C technologies. [Priority 2]: XHTML Basic is used.
- Provide information so that users may receive documents according to their preferences (e.g., language, content type, etc.) [Priority 3]: Language specified in document. Rendering is set automatically using the CSS "media" function for hand held and print devices.
- If, after best efforts, you cannot create an accessible page, provide a link to an alternative page ... [Priority 1]: Alternative page not supplied as default version renders well.
- Provide context and orientation information.
- Title each frame to facilitate frame identification and navigation. [Priority 1]: No frames. 12.2 Describe the purpose of frames and how frames relate to each other if it is not obvious by frame titles alone. [Priority 2]: No frames.
- Divide large blocks of information into more manageable groups where natural and appropriate. [Priority 2] : No large blocks of text.
- 12.4 Associate labels explicitly with their controls. [Priority 2]: No controls used.
- Provide clear navigation mechanisms. Provide clear and consistent navigation mechanisms ...
- Clearly identify the target of each link. [Priority 2]: Short phrase used for each link.
- Provide metadata to add semantic information to pages and sites. [Priority 2]: Some supplied.
- Provide information about the general layout of a site (e.g., a site map or table of contents). [Priority 2]: Table of contents provided. Web site is not complex enough to need a site map.
- Use navigation mechanisms in a consistent manner. [Priority 2]: One simple menu used.
- Provide navigation bars to highlight and give access to the navigation mechanism. [Priority 3]: Not done: would require change to site look.
- Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group. [Priority 3]: Selecting first item on menu bypasses rest of menu. More would require change to site look.
- If search functions are provided, enable different types of searches for different skill levels and preferences. [Priority 3]: No search function provided, beyond scope of redesign brief.
- Place distinguishing information at the beginning of headings, paragraphs, lists, etc. [Priority 3]: Existing text is reasonably well "front loaded". Futher changes are beyond scope of redesign brief.
- Provide information about document collections (i.e., documents comprising multiple pages.). [Priority 3]: Beyond scope of redesign brief. As the site cosnists of discrete scientific papers, may not be applicable.
- Provide a means to skip over multi-line ASCII art. [Priority 3]: No ASCII art.
- Ensure that documents are clear and simple. ...
- Use the clearest and simplest language appropriate for a site's content. [Priority 1]: Beyond scope of redesign brief. Supplied text used.
- Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page. [Priority 3]: Not applicable.
- Create a style of presentation that is consistent across pages. [Priority 3]: Same design for all pages.