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
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.
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
- 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
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. 🙂