Launching a college news site with Drupal

SUNY Oswego recently switched from a legacy install of Expression Engine to integrating with the rest of our web platform and using Drupal hosted by Acquia to “re-design” our new News site. Hopefully this post will help others thinking of migrating to Drupal and provide some helpful tips if you’re already in the process of doing so.

Our old site

Even though our old news site was in Expression Engine, the power of it being a PHP/MySQL app wasn’t fully utilized.

Now, this is through no fault of our office, it just hasn’t been looked at in a very long time. The old site worked well enough for what we needed so we left it alone until an opportunity presented itself to give it a little update.

As a result, the homepage was consistently static. Photos and images were dumped into one WYSIWYG text blob which meant it was difficult to display teaser photos or do anything that is possible with structured content.

Photo captions were placed at the bottom of the articles, separated from their photos. Tagging had no specific function other than creating a word cloud that kinda looked cool. Categories weren’t maintained and difficult to browse by. Finding a list of just all news ordered by date was a hard task to complete.

 

Moving forward

In order to move forward and utilize Drupal to the fullest extent, we planned out content types, audited our workflow, and looked for areas that could be improved as we moved into Drupal.

Auditing our content types

First we sat down and looked at what kind of content was being created. We had a few different content types that were regularly published. News story, People in action, and Spotlight. All of this content was published using one content type and tags to differentiate them in the system.

For the new news site, we now have the same three as before, plus a new Media mention content type. I separated each piece of content into different content types. This allows us to style the content differently and add different fields depending on what the content type needs. The content types are:

  • News story
    • This is the bread and butter of the news site. Most of the content being entered is a news story about something awesome happening on campus.
  • People in action
    • This content type is for faculty, staff, and students who are doing cool things but it’s not necessarily enough to make an entire story or Spotlight out of it.
  • Spotlight
    • This is for highlighting faculty, staff, and students in an in-depth in a Q&A format.
  • Media mention
    • When a news outlet picks up one of our stories, we log it in this content type and display it on the news site to show how our word of our college is spreading.

Social media sharing

When we looked at our analytics of the old site, it wasn’t surprising to find that a large portion of our traffic was when something was shared to Facebook or Twitter. This made the decision easy to invest some resources into:

  • Making sure that the site is easily sharable
  • Making sure the teasers look good on accounts

Metatag module to the rescue

The Drupal metatag module was a YUGE help in making sure that our teasers looked good when shared on social media. If you’re using Drupal, this module is a no brainer.

Beautiful social media teasers, made possible by content strategy and the metatag module.

Google news sitemap module

Another must-have module is the Google news sitemap module. This ensures your articles and content are in a format that is easily consumable by Google. This allows our news stories to be indexed by Google news.

How our news stories appear in Google news search results
How our news stories appear in Google news search results

Human-centered workflow

Last but certainly not least, massive improvements were made to the editorial experience. Drupal gives a site maintainer/developer a tremendous amount of control over the editorial experience, which I tried to leverage as much as possible to make the site easy to update and maintain.

Tabs for each type of content

I’ve referenced this technique in another post and I can’t recommend it enough for improving the editorial experience. By cloning some administration views, we gave editors a super easy way to look at all content of a certain type. This helps reduce cognitive load, making editors more efficient.

Our news admin content interface
Our news admin content interface

I can’t tell you how many times I’ve logged into Drupal with a task in mind, and by the time I figure out which admin area I need to go to, I’ve forgotten what I was doing. Small shortcuts like this technique can reduce these errors and make people’s lives a little better.

Make common tasks as easy as possible

One of the tasks that our news team needs to do is to switch out our featured story once or twice a week, depending on what is happening on campus. I tried to make this as painless as possible, understanding that our writers are not web people. They’re writers. They shouldn’t need to be a web genius to change the featured news story.

Using a combination of views and nodequeue, I added a column to the “News Stories” content tab that allows our senior editor to simply click a link to make that story the featured story on the home page.

Using Views and Nodequeue, a link was added to our news stories admin list to make switching the featured story as easy as clicking a link

Make content guidelines visible

For each of the different types of content, guidelines were developed to ensure that the content would look great once no matter where it is syndicated or in what context it is used.

To help editors know what character count they are at for the summary, I wrote a small module that counts characters for the summary field. As you can see from the screen shot, even the greatest technical solution is at the whim of people and process.

Syndication

A major feature of this news site is now the ability to syndicate news stories from the news site to academic department and college sites through the use of tags and AJAX.

We worked on a list of tags for editors to use that would allow them to syndicate a piece of content to a particular site based on what it was tagged. When implementing, I ensured the field had auto-complete in the add/edit form so we could reduce the number of slightly duplicate tags (for example, Physics department / Physics Department).

Example of news syndication to the Chemistry department website from our News site.
Example of news syndication to the Chemistry department website from our News site.

In closing: a note on people, process, and technology

As with any technology-related project, there are three components that lead to a successful product. People, process, and technology. People and process are vital, and also the most variable.

Sitting down with people to talk about their process is incredibly helpful when building the technical solutions. Often times when the technical team sits down to discuss process, the people who are closest to the process can’t really nail down what it is. That’s where it’s our job to ask questions and try to figure out how things work. This is absolutely necessary if we’re going to turn around a specific, concrete system that the process fits in.

It’s certainly a challenge and it’s never going to be perfect. People change and processes change. Good communication and trust between teams is the only way to get as close to the ideal as we can.

For this iteration, I think we did a really good job. The site is leaps and bounds better in regards to surfacing the latest goings-on at SUNY Oswego. Also, the editor experience is much better as pointed out by our writers who actually use the system (win!).

A local Oswego counseling practice gets a website

Heather Rice CounselingMy wife, who is currently in grad school studying mental health counseling, is logging practicum hours with a local practitioner. Their old site was in Wix and had terrible SEO value and wouldn’t properly display on mobile phones. To remedy this, I whipped up a WordPress theme using Bootstrap v3, and gave them a fresh new site to build their practice off of. The site features a blog, which will educate the community on topics relating to mental health. Heather Rice, who offers counseling services in Oswego, NY, now has a simple new website built on WordPress that can grow with her business.

 

SUNY Oswego’s 2014 Annual Report

2014 Annual Report

I’m super proud of what our team at work was able to accomplish in the midst of a Drupal build/migration, as well as our day-to-day tasks. The writing is top-notch and dives deep into the happenings of SUNY Oswego over the past year.

The primary designer of the project was Kelli Ariel, who had a large part in deciding how the site looked. I took the lead on the front-end development. Since I was so involved in the front-end code and design, that’s mostly what this post will be about.

What did this project take to build?

It was about a month of throwing around ideas, designing, coding and Slack conversations. Our process usually involved Kelli coming up with a quick mock-up of what certain parts of the site would look like, then she’d pass those mocks to our Slack channel, some brief discussion would ensue with our team and then I’d code it to work on the web. It worked pretty well for us and allowed us to get a lot done in a short period of time.

Design, development, and content were all intertwined throughout the project. This helped quite a bit. The primary writer, Julie Blissert was very flexible to work with. We were able to get a content structure formed in the early part of the process so design and development could go on, even though the content was still in the process of being written. For example, by structuring the content, I mean the blocks that you can hover over on the site were defined as having:

  • A headline
  • Optional subhead
  • ~325 characters of content on hover

hover-blocks

Without designers, developers, and writers working together to define things like that, a project can get unnecessarily messy.

Development tools:

  • Bower to manage libraries
  • Grunt to build, minify, and concat files to cut down on requests and file size
  • Git for version control

Libraries used:

  • jQuery
  • Waypoints
    • Used to lock in the sticky horizontal navigation
    • Used to fire an event when you hit the bottom of the page. This would then slide out the ‘next’ arrow near the footer.
  • CountUp.js
    • Used in the number panels to count up our statistics
  • Chart.js
    • Used on the Facts and Figures page to build the charts
  • Bootstrap’s grid system
  • Modernizr for feature detection

Fun features

Theme Color Cupola Card

Theme Color

With support for theme-color in the newest versions of Android, it allows web developers to customize their site’s appearance within the Android OS. For example, I was able to change Chrome’s title bar to be in line with our brand colors. I was also able to add our signature cupola icon to the ‘card’ when the user looks at all open apps.

It’s little things like this that are invisible to most users, but adds to the experience.

Sticky Header

On every page, whether you are on a mobile device or a desktop computer, the navigation will ‘stick’ to the top of the view port, allowing users easy navigation to other sections of the site. It seems particularly useful on mobile devices since it can be cumbersome to scroll all the way back to the top of a long page in order to reach the navigation again.

Scrolling Meter

Our web technical lead, Rick Buck pushed for the addition of the scrolling meter, which gives the user a subtle sense of orientation while reading the page. While scrolling down the page, a small green bar will appear under the navigation that shows how far down the page you are. When the bar reaches the end of the screen, you’re at the bottom. This can give users the ability to know where they are on the page with a quick glance.

scrollingmeter

 

 

My first jQuery plugin – check it out!

Well, I finally got around to it. I’ve been talking about making a jQuery plugin for months now but I finally put my head down and did it. I took the scrolling progress meter that we used for the 2013 SUNY Oswego Annual Report, and made it a plugin.

Still have some work to do. There’s some functionality I’d like to add and I just noticed it doesn’t work properly in IE8 (big surprise), but I’ll get that ironed out soon.

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

Children’s Museum of Oswego Gets A Website

cmoo

I’m happy to share with you a new website I did for the Children’s Museum of Oswego. It was a pleasure working with Jon and Jill Shaver on this and they are truly doing a wonderful thing for the Oswego community. While I don’t currently live in Oswego, I was born and raised there and know there needs to be more things like this there. If you’d like to find out more information about CMOO, check out their website at www.cmoo.org.