Responsive Website
Web refresh features improved navigation, responsive design

Users may have started seeing a new look on some oswego.edu pages. The “refresh” offers easier site navigation, improved aesthetics and new responsive design.

imageWhile a new design featuring larger, more eye-friendly fonts on wider pages and new drop-down menus may be the first things users notice, the addition of responsive design—the ability of the site to automatically adapt to a variety of desktop and mobile devices—is the most comprehensive change.

A team consisting of Rick Buck and Tim Nekritz in the Public Affairs Office and Devin Kerr, until recently a visiting assistant professor of art, spearheaded the project that started this summer. Last week, a number of the high-level pages—including a redesigned home page—went live, with the rest of the site to be switched over by Friday.

Under responsive design, the layout and design of the pages adjust automatically based on the browser window size or viewport. “The site’s CSS detects the browser’s width via media queries and adjusts accordingly,” Buck explained.

The sitewide responsive design adjusts every page on the college’s website for different devices. In a separate project, the college has rolled out SUNY Oswego Mobile (m.oswego.edu) and apps for the Apple and Android stores that put the most popular interactive features at the fingertips of users on mobile devices (see related story). Mobile device users can access the full, responsive website from the task-oriented mobile site by clicking on the “Full Website” icon in its bottom row of home screen icons.

A major thrust of the responsive design project was providing better user experience in navigating the site with two new menu options that will appear on every oswego.edu page. A dropdown menu from the banner includes notable links under About, Admissions, Academics, Student Life, Alumni and Supporters, Athletics, and News and Events.

In addition, the Popular Links feature next to the search box means users can access the 10 most visited oswego.edu pages from anywhere in the site. So those looking for features like email, Angel, MyOswego, the A-Z index or Penfield Library can always find them one click away from any page.

Leading response

Responsive design is one of the hottest trends among websites, with notable examples including Disney, Microsoft, Sony and Notre Dame University. While many colleges are heading in this direction, Oswego is among the vanguard with sitewide implementation, Nekritz noted.

“I was at a web conference this summer where the presenter asked how many people had heard of responsive design,” said Nekritz, who oversaw content development and some project management details for the refresh. “Pretty much everyone in a crowd of more than 100 put their hands up. Then the speaker asked how many were working on converting their sites to responsive design, and only a couple of us still had our hands raised.”

The look and coding came together via “a collaborative process where we bounced ideas off one another to see the best path towards a solution,” Buck said.

Kerr took lead on the design and initial coding through the Twitter Bootstrap framework, from which Buck translated the templates into XSL he coded into Oswego’s content management system, Ingeniux. A student worker and summer 2012 computer science graduate, James Daniello, wrote a lot of the javascript under Buck’s supervision.

“It’s cutting edge,” Buck said of the work required to create the responsive site. “We’re doing things with emerging and advanced languages used by the likes of Silicon Valley and leading web development teams in places like New York City and Boston.”

But the ultimate achievement would be a better user experience, Nekritz said.

“Ultimately, if everyone from prospective students to current campus community members to alumni can find what they’re looking for easier and faster, and are more likely to stay connected to the college, then we can call the project a success,” he said.


PHOTO CAPTION: New and responsive—While users of the refreshed oswego.edu may first notice aesthetic changes plus added large dropdowns and Popular Links navigation sitewide, the more comprehensive change is the incorporation of responsive design. Responsive design websites automatically adjust the layout and design of the pages based on the browser size or viewport, from desktops to tablets to smartphones.

(Posted: Nov 02, 2012)