Macquarie University Re-design of Web Presence
October 2003 ~ July 2004 (and beyond)
Presented by Tony Dwyer, Manager, Media Production Services
Centre for Flexible Learning, Macquarie University
OZeWAI, December 9 2005
The main reason for my team's existence has always been to put units of study online using WebCT as the LMS. Due to the leadership of certain people in the early years, we have always had a strong focus on accessibility and 'doing things right'. And because of our web expertise we began designing and/or maintaining a lot of major departmental web sites throughout Macquarie.
Prior to 2003 my team had made gradual moves towards using web standards, always trying to catch up. We ditched deprecated tags, began using CSS for a lot of the presentation aspects, and also experimented with CSS layouts, with very little success. Then in late 2003 I came to this conference (OZeWAI) and did a workshop on CSS layouts, which convinced me that CSS layouts could work.
Shortly afterwards I was asked to contribute to the look & feel of a new web design for Macquarie. When it came time to implement the new design I suggested that we should do it as a fully standards based design and aim for the highest accessibility rating possible.
Please bear in mind that this is not an example of brilliant project management, or the best way to do this. This project had no real management or committee, no project plan, very little funding, etc. Rather, it is an example of how a project with one focus can be re-directed to incorporate great moves towards standards and accessibility. I hope that you can be inspired by our successes and learn from our failures.
History
Ironically the pre 1998 version (at left) was the most accessible site Macquarie had prior to 2004. It was almost all text, very few layout tables or graphics. 1998 version (at right) had a text only version which had the potential to create problems with version control. All elements were locked into table cells and there were large JavaScript rollovers.
At right is the home page from 200-2003. Pretty much the way sites were done at the end of the 90's - every element locked into a table cell, too many images, JS rollovers, dozens of spacer gifs, etc. I have turned on the borders so that the table cells are visible.
- Very graphics intensive (slow download)
- Fixed width table (inflexible)
- Multiple nested tables
- JavaScript rollovers (add to page size)
- Very inflexible design (hard to change)
- Needed text-only version (twice the work)
Why Re-design?
Initially:
- To tie in with the new Visual Identity Guide, which sets standards for all graphic design across campus.
- To reinforce Macquarie University branding by standardising web design across campus.
- To replace an old design that had passed its shelf life.
And then we thought:
- To take advantage of new web technologies ie. XHTML & CSS.
- To make the web site more accessible to all users.
- To simplify templates so they are easier to use by staff.
The original reason for the re-design was because PR wanted to tighten up our Visual Identity Guide and branding - had nothing to do with accessibility. Up to this point there had been no design rules regarding web sites, even though there had been a print design guide since 1997. I was asked to contribute towards the re-design of the web site from a graphic design perspective only.
In the meantime I had attended the 2003 OZeWAI conference and attended a CSS workshop by Jeff Lowder from Accessibility1st in Sydney. As a result of this I became convinced that CSS layouts could work, and were the way of the future. Up to then we had dabbled in CSS but had never managed to get layouts to work. I suggested to the Information Services Manager that we attempt to design the web site in this way, and aim for AAA accessibility rating. She was enthusiastic. Jeff Lowder was hired to create the page templates for us.
As an added bonus, this became a great learning experience for my team once we began working with and customising the templates.
Macquarie's 'Branding' in 2003
Web sites across campus had no common branding - some did not even have a Macquarie logo or had variations on the logo which were not legal. Most pages did not validate, and many had serious accessibility problems.
Macquarie's New Web Designs
New home page design has no tables whatsoever. Very fluid layout that resizes with browser window.
Same page without Style Sheets is shown at right. This is how it would appear in Netscape 4, or in browsers with styles turned off. Not pretty, but it degrades gracefully:
Accessible by assistive technologies
Link at top to skip to content
Statement about Style Sheet support explaining why it looks this way
All content is still accessible
All content still makes sense
Standard corporate colours for use by all non-academic divisions, departments & offices
7 out of our 8 divisions have now switched to new templates, some with more success than others.
Departments have been changing over time. Some Divisions are taking this opportunity to review and restructure their entire site (EFS a very large Division and Linguistics and Psychology). Several offices have adopted the template including Registrar's Office (which includes several areas of the University), ITS, CFL, Library, PR and others are converting their sites now CPD and Research Office.
Advantages & Features
- Standard navigation for all divisions - easier for users to find information
- Use of relative font sizes - easier for visually impaired to re-size
- Use of CSS so pages are very fast to load - accessible for low-end users
- Minimum of graphics so pages are very fast to load - ditto
- No layout tables, to achieve maximum accessibility rating
- Use of keystrokes increases accessibility for users with motor impairment
- Link to accessibility page explains features and educates users (Problem with the accessibility page is that it is only relevant if the page is done properly - often needs to be removed)
- Pages conform to recognised web standards
- Different page templates provide layout flexibility
- Divisions differentiated by coloured bands, based on graduation colours
- University Corporate Identity is maintained and strengthened
Project Timeline
| April '03 | Visual Identity Guide project first proposed to V-C - IT Services, Publications, Public Relations |
|---|---|
| 28 Oct '03 | First web production meeting held - IT Services, CFL & Public Relations |
| March '04 | Basic design concept approved. Contractor brought onboard to implement CSS layouts |
| April '04 | New Visual Identity Guide for print and web published. First web site goes live using prototype design |
| 22 May '04 | Templates delivered by contractor. Templates modified by CFL over next week |
| June '04 |
Division of ICS and CFL begin migration of content to new design
Some glitches sorted out between ICS and CFL while implementing Several more minor sites go live |
| 21 July '04 | Top level Macquarie pages go live |
From first web meeting to top level pages going live - 9 months.
Implementation Timeline
DIY-ers
- Information & Communication Sciences (ICS) - August 2004
- Australian Centre for Education Studies (ACES) - August 2004
- Environmental & Life Sciences (ELS) - October 2004
Completed or Assisted by CFL
- Law - July 2004
- Humanities - July 2004
- Economic & Financial Studies (EFS) - Feb 2005
- Linguistics (March 2005) & Psychology (March 2005)
Problems, Solutions and More Problems
| Initial Problem | Solution | Current Situation |
|---|---|---|
| Initial resistance of some divisions and staff to new design | Design mandated by Vice-Chancellor & approved by Division Heads | Still one division unwilling to change over |
| No 'web police' to ensure web standards are maintained | VIG web site and templates specified 'dos and don'ts' | Instructions are often ignored |
| Widely differing skill levels among university staff | V-C provided funding so that CFL could provide assistance | Funding is not adequate for the task |
| Lack of knowledge regarding standards, accessibility & design | CFL offered free training/advice to DIY-ers |
|
| No standard software for web work | Dreamweaver recommended | Still no standard software and still waiting for content Mgt system - probably will not be implemented until late 2006. |
| Deviations to design and concept impossible to police | Web Advisory Group set up to discuss & agree on changes | Web Advisory Group has met only once. |
| Some areas felt navigation was not flexible enough | Variations were allowed in order to incorporate extra navigation |
Changes to navigation system to support multiple levels
JavaScript fly-out menus were developed to allow extra levels for large web sites. While the menus themselves are not accessible to users who cannot operate a mouse, the content is still accessible by an extra click. By clicking the main navigation in the black bar, all items in the fly-out appear in a list on the left hand side.
Benefits of Using CSS
- To separate Style from Structure - this enables much better user experience for those with non-standard viewing methods e.g. those with visual disabilities
- Style and layout are kept in memory cache so do not have to reload with every page, enabling a much faster download time
- Web sites are easier (therefore cheaper) to maintain
- Global changes can be made to the look and feel of an entire web site by modifying a single file
- To more precisely control layout without misusing tags, e.g. <blockquote>Indented text</blockquote> - therefore the content makes sense to those using assistive technologies
- No need to use spacer gifs to separate elements
- To allow users to over-ride the designers' style with their own custom style
In Retrospect…
- Project needed a dedicated leader and team - Everything was done by people in their spare time
- Process could have been planned much better - Everything was done ad hoc or on the spur of the moment
- Project could have benefited from Information Architect early on - Problems with levels of navigation might have been avoided
- Project needed proper funding for dedicated team
- Project needs continuing goals, and support to achieve goals - Ad hoc approach not working. Some areas refusing to cooperate. Many areas only partially cooperating eg the sites look OK but not adhering to web standards. However, a lot of progress has been made.
Other Sources of Information
World Wide Web Consortium (W3C)
http://www.w3.org/My Web site is standard! And yours?
W3C article supporting standards
http://www.w3.org/QA/2002/04/Web-QualityWebAIM (Web Accessibility in Mind)
Techniques, Tutorials, Tools and Training
http://www.webaim.org/WANAU
Web Accessibility Network for Australian Universities
http://www.wanau.org/
For more information…
Contact:
Tony Dwyer
Manager, Media Production Services
Centre for Flexible Learning
Macquarie University, Sydney, Australia
Email: tony.dwyer@mq.edu.au
Phone: (02) 9850 9668