Ahead of the curve

Rice unveils progressive, device-friendly, accessible, content-driven homepage

At a university that endeavors for excellence and is known for its innovative and groundbreaking research, it should come as no surprise that Rice’s re-launched homepage, Rice.edu, is no exception.

Both adaptive and responsive

One of the first-of-its-kind in higher education, the site features adaptive and responsive design. Sean Rieger, director of Web development in Public Affairs, said the homepage achieves this by first changing format based on the user’s screen size and device type.

“It also tries to sniff out touch capabilities in a browser,” Rieger said. “If it finds touch capabilities, it intelligently changes the user interface to one that is intuitive on a touchscreen.”

While many institutions are pushing for users to download an “app” or building simplistic, content-poor mobile sites, Rieger and his team took a different approach: Make all content available to any user, no matter what device they use.

“Many universities have been caught up in the popular ‘app’ trend, but we believe that an end user shouldn’t have to download an app from any store in order to view the data that is on our site,” he said. “We also believe that the end user should get the full experience, not just a stripped-down ‘mobile version’ of the site with limited content.”

In addition, the site scales up images, font size and buttons on smaller screens to facilitate usability and reading comfort.

Compatibility: Forward and backward

The new homepage uses the latest HTML5 and CSS3 technologies, but it doesn’t ignore older browsers.

“These technologies allow us to push the envelope from a design and usability standpoint,” Rieger said. “We believe in pushing the Web forward without leaving older browsers in the dust, so we have included support all the way back to Internet Explorer 6.”

As an educational institution, Rice has a responsibility to inform users if their browser is out of date, without barring entry or access to our site, Rieger said.

Users with seriously outdated browsers will see a small message at the top of their screen warning about the security risks of their browser and how to upgrade it.

Accessibility

“We believe that Rice.edu should be accessible to all people,” Rieger said.

The new homepage has been developed to meet not only Section 508 of the Rehabilitation Act, which makes electronic and information technology accessible to people with disabilities, but also meets the more strenuous Web Content Accessibility Guidelines standards.

“It’s just another example of us looking toward the future,” Rieger said.

The new navigational system is based on a “mega dropdown” format that has been recommended by usability experts.

The homepage also includes user-intent controls and allows easy navigation with screen-reader software used by the visually impaired. The menu can be also be accessed through tab, directional key and letter key navigation, and the menu reformats into usable sized buttons for mobile devices.

More content

One goal of the university homepage is to help tell Rice’s story to the world.

“It is to convey many of the exciting things happening here and how they impact the future,” Rieger said. “That thinking led to the new look and feel of the homepage.”

The clean and open design focuses the user’s attention on the content. Generous amounts of white space were used to frame the large and colorful imagery of the stories.

The former homepage was capable of holding eight stories and three calendar events, which rotated off the page every few days. The new page features large images, four calendar events, video capabilities and will accommodate 24 stories in a flexible configuration, as well as the latest happenings in the social sphere via a real-time Twitter feed.

The old Rice homepage had the capability to display a total of 44 links into the content of the Rice.edu domain. Using the new menu system, the new page can accommodate 250 links. None of the links that were on the old homepage have been removed.

The links that have been added were taken directly from the old site’s gateway pages for each topic. Rieger’s team used input from all over campus and data from site traffic analysis, to design links that bring the visitor at least one click closer to where they want to go.

“Rice.edu is now a living, breathing, continuously evolving being that still provides a front door to the university, but also invites visitors into our heart and soul and personality — our students, faculty and staff, our academics, our research, our community spirit — everything that distinguishes this university,” Vice President for Public Affairs Linda Thrane said. “Our Web team understands that online communication needs to be a conversation, that people need to come away with a quality Rice experience — and this website does that and more.”