1. WebTech Analysis Presentation: WebTech Analysis Presentation: Student Affairs Graduate Association http://www.msu.edu/~saga http://www.msu.edu/~saga Rachael Hodder Alyson Lowe Dave Johnson April 21, 2008

2. Overview What is SAGA? –Who are they? What do they do? Context? –Who runs the site? (Matt Wawrzynski) –Who is their audience? –How does each target audience use the site? –Why are they working with us, i.e. what’s the problem? –Event redesigns

3. Usability Usability as the “sum” of the other parts Usable for people attending Spartan Preview Days –Are still some issues Overall, has problems with accessibility, sustainability, and design

4. Sustainability: problems Symptom of the problems: site overhauls Workflow –Intended changes to workflow Site structure (http://www.msu.edu/~saga)http://www.msu.edu/~saga –Current mindset –Built as temporary pages The pages –Unmanageable code –Potential problems with the method of creating pages

5. Sustainability: suggestions I Workflow –SAGA’s plans for restructuring their workflow –Our comments on workflow Site structure –Change the structure of the website Thinking toward the future Audience “hidden” links out –Have a sub-set of the site for current events

6. Sustainability: suggestions II New way of making pages –Recommending student groups –Semantic code –Comments in the code for future maintainers

7. Accessibility, part I Accessibility is more than “meaningless aphorisms” Analysis –“Accessibility equals findability” –SAGA goes mobileSAGA goes mobile –Section 508 and SAGA

8. Accessibility, part II Recommendations –Improve search rankings by using explicit keywords on homepage –Use CSS and HTML deliberately Some mobile browsers do not support CSS –Keep in mind the abilities of potential users during design process Visually impaired, motor impaired

9. Design SAGA demonstrates a moderate understanding of what makes for good web design, and they do a number of things well. For example: Vertical navigation menu in the left side bar. Horizontal navigation bar in the page footer. Use of the color green throughout the site. Homepage header features a banner with images. Decent management of whitespace. Overview

10. Design Problems However, even the best of ideas don’t always work the way we would like them to. To elaborate: Despite doing a pretty good job of managing the whitespace, there are pages that have huge gaps between the footer and the actual page bottom. Although each page features a vertical navigation bar in the footer, none of the links work. SAGA’s web designer understands the importance of menu links, yet the site has no page anchors. Although they use the color green, which has very positive connotations, they only use one shade of it, in combination with a gradient effect that cause sit to wash out. Although their homepage features an image based banner, none of the other pages follow suit.

11. Design Suggestions We’ve come up with several recommendations to help resolve SAGA’s design issues: Add working links to the footer navigation bar. Example.Example Add menu links that correspond with page anchors on those pages that feature large amounts of text. Example.Example Add a few more shades of green to “spruce” up visual appeal. Example.Example Add banners to each page containing images that pertain to the focus of each individual page. Implement code that allows the body text container to stretch based on the amount of content present on each page, while still maintaining a page margin standard throughout.

12. Conclusion The redesign Our recommendations –Suggested resources –Potential changes Hopefully resulting in a more usable site