2013 SUNY Oswego annual report

Each year, the annual report gives other SUNY presidents, faculty, and staff a glimpse into what the college has been up to in the previous year. It’s usually something that is placed in the same template as the rest of the site (see the annual report from 2010, 2011, or 2012) and has sections that highlight achievements of the college. The content (writing and photos) have always been very good, but the lack of depth in the web department usually means that the content gets put into an old template because of time constraints.

Since I joined SUNY Oswego’s public affairs office, there are now more resources and man power to make things stand out a little more. This year, we looked for a way to highlight the already awesome content in a modern way, using some cutting edge design patterns that looks simple, but has a decent technology stack going on under the hood. I think we achieved our goal and then some with this project.

A few screenshots

Landing page for "modern" browsers that can handle HTML5 video
Landing page for “modern” browsers that can handle HTML5 video
This is the basic template for a content page. Same nav at the top, large full width photo with a headline and introductory text.
This is the basic template for a content page. Same nav at the top, large full width photo with a headline and introductory text.
A little further down the page.
A little further down the page.

View the 2013 SUNY Oswego annual report

It was definitely the largest team project I’ve ever been involved in. Given how many people contributed to the project, I think it went smoothly.

Credits:

Writing & organization: Julie Blissert
Project manager / UX decisions: Rick Buck
Art direction / designer / UX: Nick Malchoff
Photos: James Russell, Peter Finger
Video content: Jeff Newell
Photo & video support: Jennifer Osborne
Front end development: yours truly

Features:

  • Device agnostic
    • Used “graceful degradation” to ensure people with older browsers could at least access the content.
  • HTML5 video
  • Modern design patterns
    • “Hamburger” menu button
    • Large, full width photos with overlays
    • Custom typography
  • Performance optimizations
    • Concatenation and minification of site assets (CSS/JS)
    • Minified images
  • Development environment that supported rapid development/deployment
    • Git for version control
    • Grunt for task running; concatenation, minification
    • Rsync for easy deployment
  • Sprinkles
    • JavaScript based table of contents with scroll meter

Stay tuned, I’ll be writing more about some of the front-end development aspects of this project, since that was mostly what I worked on. Grunt, git, performance optimization, oh boy! Sounds like a lot of fun. 🙂

What do you think?