sitewide refresh and responsive design: teamwork, usability and action.

At the end of Friday, we officially launched a new look for key pages of oswego.edu, with goals of improving three things: 1) navigation, 2) aesthetics and 3) usability via responsive design.

The oswego.edu homepage, October 2010 to November 2012.

New oswego.edu homepage, launched Nov. 2, 2012.

The first thing users will notice are a megadropdown menu (seen open below) where key pages under our various sections (About, Academics, Admissions, Student Life, Alumni & Supporters, Athletics and News & Events) will now be available from anywhere on our site. Also quite notable is a new Popular Links feature on every page, where users will be able to access our 10 most-visited sites — such as email, the MyOswego student and faculty gateway, Angel online learning, A-Z Index and Penfield Library. In short, users should be able to access most top actions from anywhere on our site. Hard to improve a site’s usability more in one fell swoop.

Homepage with dropdown navigation drawer open.

We’re also quite pleased with what we consider a more eye-friendly look. Switching the font to Droid Sans with a better point size produced greater legibility. With the pagewidth going from 950 to 1170 pixels, we also have a wider field to compensate. The homepage takes advantage with larger photos in its various levels of information, which puts a premium on impactful photography and content that lends itself to this magnified stage.

What may be least obvious, but the biggest accomplishment, is the site’s transition to a responsive design that detects browsers or viewports — desktops, tablets and smartphones — and adjusts accordingly. Rick Buck, our very talented developer, coordinated the back end work, with Devin Kerr, who has been teaching graphic design at our college, using his design and CSS skills to create the look of the templates. Before he graduated, stellar student worker James Daniello (who’s available for hire!) added some fine coding work. The content, direction, design and development were a team effort as we bounced ideas and information off one another throughout the process.

Since I’ve endured two full redesigns at Oswego, doing something more in-between — a refresh, as we call it — was both (somewhat) less stressful and reflects the incremental redesign concept promoted by eduStyle‘s Stewart Foss. Rick and I are big fans of incremental and iterative redesign concepts, as well as agile project management. So plenty of theory and technical know-how went into this project.

But in addition to know-how, we also pulled out some can-do. Many talk about this kind of thing, but we were blessed to be able to take action. It did take more than a bit of lobbying, creative approaches, presentations, proofs of concept and old-fashioned teamwork … but in the end, we think all that work paid off.

4 Comments

Filed under Web

4 responses to “sitewide refresh and responsive design: teamwork, usability and action.

  1. Congratulations to you and your team, Tim…great work!

  2. I love your new home page! What other pages have been converted to RWD? How did you determine which to focus on first? We are embarking on a project to convert our entire site (gulp!) to responsive design, at the advice of our technical partner, as they feel this will actually be the easier route given the structure of our site and how our CMS functions.

  3. LOU: Thanks, as always, for your support!

    LORI: We rolled out a few key pages last Friday and the rest should go live this Friday. We use Ingeniux as our CMS, which is a plus for this in that content and design (“container,” if you prefer) are separate. So we update the coding on the template and as long as there are no conflicting commands within the page body, it should roll out cleanly. Glad you like it! Let me know if you have more questions!

  4. Pingback: nate silver and the rise of analytics: what it means to you. | InsideTimsHead

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s