Case Study - Simon Fraser University

About SFU: Ranked by respected national surveys as one of Canada's top three comprehensive universities for almost 20 years, Simon Fraser University is named after a famous explorer and known for its pioneering spirit.

Objective: Optimize the SFU's Management and Professional Programs through the examples of redesigning its "Home page" and "About us" page. The objective of the redesign was to improve the user's experience: better presentation of information, increased aesthetic appeal, more interactivity, and greater user-friendliness. The new design must comply with the SFU Web Standards.

Structure and Efficiency

Problems Observed:

Each page linked directly to eight CSS files which were the same CSS for all pages. This way made the maintenance very difficult and inefficient. For example, if one of those CSS files needed to be removed, someone had to remove its link from every single page. Also, these pages were using inline styles, which again made maintain and update inefficient.

The left navigation and footer were hardcoded into each page. Therefore, every single page that had these two elements needed to be updated if its content needed to be updated. "quick links", "additional links" and "featured programs" on home page used iframe, which had several drawbacks. For example, a separate CSS needed to be created to control its style. Also, one had to define the size of the iframe without knowing the actual size it can grow into. That's why there was a scrolling bar on featured programs of home page when browsed by IE - the size of iframe was shorter than its actual size (refer to No.4 on image - original-index.png) However, when the size was define greater than its actual size, some empty space would be created (refer to No.5 on image - original-index.png)

Solution:

In the redesign, a CSS file called "master.css" was the only CSS that linked to each page. Inside of this master CSS, all the other CSS were "imported". Therefore, add, remove or update CSS required working just at the "master.css".

Also, rather than static pages, dynamic pages with "include" function was used. It made the website not only much lighter much also much easier to maintain.

Coding

Problems Observed and Solution: non- semantic vs. semantic

The back-end code could be much elegant and organized. Here showed one example for each HTML and CSS in which coding could be improved. There were a few places that semantic HTML was not applied. For instance, footer links should be grounded into a LIST instead of a bunch of SPANs. In some CSS, ID and CLASS were misused. For example, "actionItems" in actionitems.css was defined as ID which should really be a class.

Accessibility

Problems Observed: font size

There was a "font size" box on the right side of the page; however, it did not do the job that it's supposed to. For example, when you clicked "+" or "-" sign on the home page, the text size on the main content did not change at all, but the size of the left navigation changed. That was because the text on home page was defined using an absolute unit - pixel (px) rather than a relative unit such as percent (%). Even the text on "about page" was defined using relative units, it's using some out-of-date ones (small, smaller, large, etc). Because of this, 5 extra CSS were created in order to be able to adjust the text size; consequently, extra work would be needed to maintain these files. All these unnecessary efforts could be eliminated by simply using a standard relative unit - percent (%), plus defining one fixed font size using pixel (px) as the baseline.

Problems Observed and: for people with disability

As SFU accepted students with different background, the website needed to enhance its design and structure so that it's friendly for the people with disability. For example, vision impaired people needed to use screen readers to read each page. The website should have provided them the ability to jump to different pages without reading repeated information every time.

Solution:

A hidden "skip link" that skiped all the header information and navigations was implemented, and it straight jumped to the main content. However, it didn't even scarify any look and feel of the website at all for the rest of people.

Content: Balance, Readability and SEO

Problems Observed:

The most noticeable problem on front-end of home page was that the main content was not balanced; there was a huge empty area on the bottom of the left side (refer to No.7 on image - original-index.png). Also, it's difficult to maintain the balance of this two-column structure as length of the content could hardly be predicated.

Solution:

Changed the layout into one-column.

Problems Observed:

The words "Management and professional programs at SUF" appear 3 times (refer to No.1 -3 on image - original-index.png). However, the first two appurtenances were obscure, and the 3rd one was not easy to read. In addition, the words on the dominate picture were part of the image, which could make update a lot harder as whoever updates it would need to use Photoshop, find and edit the original image every time.

Solution:

Made the headline into standard web text so that it's not only making update easier but also searchable.

Usability and Visual Appearance

Problems Observed:

The layout of "student profile" area was not sufficiently delivering the visual effect to visitors.

Solution:

Grouped the data into three tables. Table-layout design was not encouraged in all the modern web design nowadays because the content should be separated from the presentation from. However, table was the best way to construct the tabulate data such as "student profile" on about page. Also, with a little JQuery, the table became sortable. Visitors could click "percent" tab to sort the data. It could be especially useful when creating a table with a lot more information.

Minor issues but worthy looking at:

The SFU logo on the top left of the page was a link which should be emphasized. So a title property was added so that it tells visitors where it goes.

The height of the top red navigation was inconsistent, home page had 45px but about page had 50px (refer to No.7 on image - original-index.png and No.8 on image - original-about.png). The space between SUF.CA and Burnaby on the top red navigation was 40px for both pages, however, it was 50px on SFU's main site. (refer to No.9 on image - original-index.png and No.6 on image - original-about.png) Therefore, visitors would see noticeable shift when they switched between pages and sites.