erichobart

Visit Study Abroad Programs

role

• developer
• interaction design

summary

The site provides general information about and enrollment features for more than 150 study-abroad programs offered by the University of Denver. On the Program page, visitors learn about the study opportunities in 50 countries. The site also includes scholarship information for students who want to study abroad, as well as travel details for students about to leave for study-abroad courses.

audience

The primary audience is current students who want to study abroad. Secondary audiences include prospective students, faculty and parents.

perception/tone

The University of Denver encourages students to pursue international experiences. The site’s postcard-like design makes a strong, attractive impression that enhances the prospect of studying abroad. Contained navigational elements helps visitors streamline and manage the wealth of information about study-abroad options available on the site.

features

• Advanced accessibility features ensure that navigation and core content are available to all visitors. For example, the majority of visitors to the Programs page — who use a modern browser with javascript enabled and the Flash plug-in — can investigate the programs using either the Flash map or the drop-down menu. Both navigation options can be activated with keyboard or mouse, so they also are accessible to vision-impaired users who rely on screen readers and visitors who are mobility-impaired, both of whom use a keyboard instead of a mouse.
  
  Visitors whose browsers’ lack the Flash plug-in or have javascript disabled can access navigation options available in a third, plain-text menu. Even visitors using a text-only browser such as Lynx can access the navigation and content. This kind of universal accessibility is accomplished using “Unobtrusive Javascript‚”, a principle based on using javascript only to enhance the user experience.
• “Graceful Degradation” is the underlying approach used throughout the site. This principle advocates that all visitors, regardless of what device they use or how they've configured the device, will have a quality experience.
• CSS design, with tables used only for information suitable for display as tabular data, such as course schedules and event calendars.
• A quasi-CMS created using Macromedia Dreamweaver templates and Contribute that allows non-technical staff to modify some content.
• Keyboard and screen-reader accessible, list-based menus created with CSS that degrade gracefully regardless of what device visitors use to access the site.
• A CSS & javascript-based “show/hide” jump-menu technique that reduces page depth, limiting vertical scrolling.
• A CSS & javascript-based “text-sizing” widget that allows visitors to increase text size using controls visible on every page. This feature replicates in part the text-sizing feature built into most modern browsers, but is intended to compliment that feature, not replace it. The average visitor is probably not aware their browser has text-sizing capabilities. The site’s text-sizing feature won't hinder visitors who are familiar with their browser’s text-sizing tool.
• A print-specific style sheet that tailors the information for printing to 8.5 x 11-inch paper, eliminating the need to maintain two versions of each page.
• Javascript “Print this page” and “Email this page” features.

Visit Norwich University

role

• front-end developer
• accessibility assurance
• visual design
• interaction design

summary

This page, the front door to the Norwich University web presence, did not meet best practices for usability or code. The page was recoded to meet best practices in those and other critical areas.

visual page height

Text on the page pushed page depth to about two-and-a-half screens for the majority of visitors. Since the page serves primarily as a directory page, that is, a jumping-off point for other areas of the web presence that contain information about specific topics, shortening the page so it would be visible in a single screen, eliminate the vertical scroll, and offer a complete visual design were the goals. It was necessary to keep the Experiencing Norwich text to help search engines index the page, but likely most visitors would navigate away from the page before reading the text. Placing the text in an area with an interior scroll was the solution. Shortening the page also brought the two architectural images at the bottom corners of the pages into view, completing the visual design in a single screen for most visitors.

meet best practices and trim download time

Best practices encourage providing a quality experience for all visitors. Alterations to the code ensured that visitors to the page who have turned off javascript in their browser, or who are not able to view the Flash motion graphic, will still have a quality, if not identical, experience. This best practice is referred to as “progressive enhancement.” Best practices also recommend separating content, presentation and interaction and to rely on css instead of javascript for visual effects whenever possible, such as changes that occur when a visitor passes their cursor over an element on the page. Converting those types of events from javascript to CSS trimmed download time on slower Internet connections by about 22 seconds. Following this practice also allows for more rapid alterations in the future.

compliance with Web standards

Meeting the best practices described above also has the happy benefit of ensuring that the page meets or exceeds Federal and WAI accessibility requirements and W3C valid XHTML requirements, the first a critical consideration for any company or institution that receives Federal monies directly or indirectly. It’s also advisable for a web presence whose owner touts inclusiveness and non-discrimination.

Visit Cherrington Global Scholars

role

• developer
• interaction design

summary

The site is the online element of integrated marketing collateral on the University of Denver’s premier study-abroad scholarship program. It is also a sibling in the overarching Web site for the administrative unit that oversees all of the university’s study-abroad opportunities.

audience

The primary audiences are current and prospective students looking for study-abroad programs in their junior and senior years. Secondary audiences include parents.

features

• “Graceful Degradation” is the underlying approach used throughout the site. This principle advocates that all visitors, regardless of what device they use or how they've configured the device, will have a quality experience.
• CSS design, with tables used only for information suitable for display as tabular data, such as course schedules and event calendars.
• Keyboard and screen-reader accessible, list-based menus created with CSS that degrade gracefully regardless of what device visitors use to access the site.
• A CSS & javascript-based “text-sizing” widget that allows visitors to increase text size using controls visible on every page. This feature replicates in part the text-sizing feature built into most modern browsers, but is intended to compliment that feature, not replace it. The average visitor is probably not aware their browser has text-sizing capabilities. The site’s text-sizing feature won't hinder visitors who are familiar with their browser’s text-sizing tool.
• A print-specific style sheet that tailors the information for printing to 8.5 x 11-inch paper, eliminating the need to maintain two versions of each page.
• Javascript “Print this page” and “Email this page” features.