Bryn Mawr’s New Mobile Website Presentation Pioneers Move Toward Responsive-Design Approach for Higher Ed Sites

Posted October 6th, 2011 at 2:15 pm.

Have you visited the Bryn Mawr website on a smartphone lately? If it has been a few weeks since you tried it, you might give it another shot—you’re likely to find the experience much improved.

Smartphone screen with lantern icon

Smartphone screen with lantern icon

The Bryn Mawr site now offers smartphone users a compact lantern icon to add to a mobile device’s home screen, but it isn’t exactly an app, says Catherine Farman ’08 of Information Services’ Web Services team, who spearheaded the development of the new mobile presentation.

“An app is usually bought or downloaded from an app store,” she says. “Our mobile site, on the other hand, is available through whatever Internet browser your smartphone uses, so there are fewer barriers to access.”

Bryn Mawr’s new mobile style, more flexible than an app and less restricted in the information it offers, is a step toward an emerging, “future-friendly” strategy known as responsive web design.

Web designer Ethan Marcotte applied the term “responsive design” to the World Wide Web in a much-discussed article in the online web-design magazine A List Apart in May of 2010, and he published a book on the topic in the summer of 2011. Highly regarded among web designers, this approach is slowly beginning to trickle into the mainstream, and Bryn Mawr is a pioneer in the higher-education field in adopting a responsive-design strategy for its website.

What’s the difference?

An app, Farman explains, is a piece of software designed to run on a specific operating system, like iPhone or Android.

Some university web developers rushed to create iPhone apps, only to watch Android-based phones gobble up a larger share of the market—a market that now includes at least 17 mobile operating systems.

“Designing a separate app each time a new operating system appears is not practical,” Farman says.

The creation of a separate mobile site (usually with a different URL in the form m.university.edu) is a route that many colleges and universities have taken to avoid the access barriers presented by app development. But that approach has drawbacks as well, Farman notes.

“The ‘m-dot’ approach basically means maintaining two different sites.” she says. “Because of that, most m-dot sites offer only a small portion of the information available on the full site.”

“And keeping the sites synchronized is a real problem,” Farman continues. “We looked at a lot of university websites as we developed our mobile strategy, and in every case we found some information on the mobile site that conflicted with information on the standard site. This was true even of large, well-endowed research universities—the prevalence of the problem was actually kind of shocking. Maintaining two sites is clearly just too hard to do.”

For several years, the Bryn Mawr site’s content (such as text and photography) has been separated from its presentation (layout and graphic design).

A Bryn Mawr web page with the secondary (normally left-hand) navigation in the display position

A Bryn Mawr web page with the secondary (normally left-hand) navigation in the display position

The presentation is controlled by CSS, or cascading style sheets. Farman has designed a style sheet that is optimized for smartphones; the web server determines which style sheet to apply by sensing the width of the user’s screen.

Following responsive-design principles, Bryn Mawr’s mobile presentation is applied to every part of the College website that uses its standard templates, making redundant site maintenance unnecessary. The mobile style sheet has not yet been applied to subsites that use WordPress blog themes or other platforms for content management (like this one, Bryn Mawr Now!), but development of new styles for those pages is underway.

“If you’re using our standard templates, your content will look great on a smartphone,” Farman says.

A few key features of the new mobile style sheet:

  • Sitewide navigation options that appear at the top of every page when viewed on a desktop or laptop computer are presented in drop-down menus labeled “Go to” and “More.”
  • Similarly, secondary navigation options that usually appear on the left-hand sides of pages are offered as a drop-down menu from a tab, just underneath the Bryn Mawr header, that identifies the section of the website being displayed. The menu is signaled by a downward-pointing arrow that turns to face up when the menu is opened.
  • Information that appears in the center and right-hand sections of pages in a standard-sized browser is presented vertically, with center content preceding right-column content.
Bryn Mawr College homepage displayed on a mobile phone

The Bryn Mawr College homepage displayed on a mobile phone

There is one page for which the content of standard and mobile sites is different – the Bryn Mawr homepage, which relies heavily on Flash, a technology not available on the iPhone. The mobile version of the page presents large buttons linking to areas of the site that are most likely to be visited via mobile device. Web Services determined what these pages are using industry research and Bryn Mawr’s own site-traffic statistics.

The project still has a few miles to go, Farman says. She hopes eventually to develop a style sheet for the College homepage that allows all the information displayed there to be made available to mobile devices. She is also working on a style sheet for intermediate-sized screens like that of the iPad, which already makes up a significant portion of traffic to the Bryn Mawr site.Web Services will continue to refine the mobile style sheets as issues emerge.

There are also a few pages on the Bryn Mawr site whose content could be organized better for mobile display.

“When we applied the new style sheets on the test server, we realized that there are some pages that need to shift content around to make it easy for smartphone users to find,” Farman says. Web Services and College Communications will work with the owners of those sites to help them reorganize content.

Farman expects those tweaks to have a beneficial effect on the site as a whole.

“Generally speaking, it’s a good practice to have the most important content on a page be the first thing that appears on it,” she says. “Maintaining pages with the mobile user in mind makes it all the more likely that the important information will rise to the top.”

To report bugs or usability issues with the new mobile style sheets, send an email with the subject line “mobile issues” to help@brynmawr.edu.

Comments are closed.