This year for the HighEdWeb conference I presented a poster, Deciphering Facebook Insights. I received lots of great questions from the attendees and have lots of ideas coming back to W&M both from the poster session, and the conference as a whole. This event is always a great time, with lots of amazing knowledge and educational experiences being shared and it’s also a great opportunity to catch up, in person, with all the folks that I typically only get to interact with via email or Twitter. Definitely looking forward to seeing everyone again in Portland next year (or maybe sooner?).
Back in April we mentioned that we were working on a new responsive design for the main W&M website (www.wm.edu), and after a few browser fights (thanks Internet Explorer), a dozen test devices and many hours coding and tweaking, we launched our new design on July 23, 2013. (Grad school sites will follow suit in the coming months.) Now every office, every academic department and every other page on the W&M site adjusts its layout to best accommodate how you are viewing the site, regardless of what device you’re using (desktop, laptop, tablet or mobile).
To announce the launch our office made a little stop-motion video (our first!) starring the computers, phones and tablets of various Creative Services staff members:
Desktop/laptop view of the W&M website. The green bar on the left is the page navigation, center light tan area is the main content, and the darker tan boxes down the right side are the supplementary content.
The idea behind this change was spurred in large part by the fact that our mobile and tablet visits have gone from less than 2% of our site traffic in 2009 to over 17% of our traffic this summer. With so many mobile and tablet visitors (and more sure to come) we wanted to ensure everyone could easily navigate and view all of the content on our website, not just our homepage (which we made responsive last year).
So what was involved in this redesign? Up first was evaluating which parts of any given page are the most important, and it is, unsurprisingly, the main content. That main content is why you search Google, click a link in a social media post, or work your way through navigation menus. This needs to be front and center (and top) regardless of how you are looking at the website. So, after our global site navigation and header, the most prominent thing you will see is always the main content. We then ordered the rest of the content: page navigation, supplementary content, etc.
The major changes
Tablet view. Here the right column has been moved below the main content area and the top “global” site navigation has been adjusted from one row to three.
As you begin decreasing the width of your browser window we adjust the global navigation to become three columns rather than one row (since the single row will no longer fit).
We then move the right column, which contains “widgets” with photos, Twitter feeds, related links and other supplementary content, down below the main content area.
So, with this first batch of changes nothing is removed, only rearranged to best showcase the content (this is a key feature of responsive design). Once the page width is even narrower, the menu on the left side of the page drops down below the main content as well (keeping its familiar green background for continuity). However, keeping in mind that page navigation is a useful and important part of the page, we provide a “Site Menu” link so you can quickly get to that area when you need to. In between all of these steps the content is stretched to fit the width of the page, and photos and tables are resized to be as visible as possible.
Those with a careful eye may also notice a few style tweaks, all made to enhance the user experience. We removed busy lines from the menus, adjusted the color and size of the content headings, and increased the font size and line height of the content. All of these updates were made to give the site a bit more space to “breathe” and to make things easier to read. We also ensured that our treatment of text links is consistent throughout the site, helping with the overall usability of the site—if a word is bright green (underlined or not) it is always a link.
Cheap as free “mobile version” for all, no app needed
Mobile view. A link to the site menu replaces the menu itself and the main content comes up front and center, with supplementary content following.
One of the best parts about a responsive design is that it is a seamless improvement for the folks creating the web content. Nothing changed in Cascade (our web content management system) from the web editor’s perspective. They still enter their page title, content, photos, links and so forth, just as they always have, except now the content they entered is mobile (and tablet and desktop) “friendly.”
Currently our team is focusing on updating our four graduate school sites with their own responsive designs. Along the way we’ll also be making a variety of supporting sites responsive (those W&M sites not hosted in Cascade, like the directory, W&M Experts and W&M Events).
In previous years our office had helped collect photos for the Commencement ceremony opening slideshow. With the doors opening at 9:30 am, this slideshow repeated for a couple of hours, followed by a video of the graduates making their traditional walk across campus as they prepared to enter the arena. This year we still wanted to do a photo slideshow, but with a twist; we wanted something that was different, something engaging and something fun, so we turned to social media.
Last year we used the #wmgrad hashtag to track Commencement-related activity (and archived it in our first Storify). This year, in the weeks leading up to graduation, we teamed with the folks in Student Affairs to get the word out. Realizing the wealth of potential photos available, we encouraged the soon-to-be-graduates (via email listservs, our student services portal, Twitter and Facebook) to post photos of their graduation experiences to the photo sharing site Instagram using the #wmgrad hashtag…and we were not disappointed!
@tobesurprised: Ringin that bell. #wmgrad #onetribe
@jocelynray: GRADUATING! #wmgrad
Within hours of the first email being sent out with the instructions, photos were retroactively tagged with #wmgrad and new photos came streaming in. We had dozens of photos from each graduation-related event, from ringing the Wren Bell on the last day of classes, to the Candlelight Ceremony the night before graduation, the Walk through the historic Wren Building and across campus to the Hall on Sunday morning, and finally coming out onto the arena floor and being greeted as the W&M Class of 2013.
We wanted to be able to monitor the photos coming in as well as present them in an appealing way, so we turned to a great little site called eventstagr.am. Evenstagr.am offers a service where they will pull photos from Instagram for any given hashtag(s) and create a web-based slideshow (with various customization options). All of our interactions with the eventstagr.am support folks were stellar; they answer questions with lightning speed and even offered to be available on the weekend for support during the event. On Sunday, as new photos came in to be moderated and were approved, they were instantly and seamlessly added to the live slideshow playing on the big screens in W&M Hall. Those seated in the audience were able to watch a near-real-time photo feed of their graduates’ experiences leading up to this momentous day.
@tlchamberlin: Alma mater, hail! #wmgrad
It was exciting to see the photos coming in, with over 10 photos a minute coming in during the peak of the walk across campus. We ended up with 322 photos in the slideshow (tantalizingly and ironically close to W&M’s 320 years of existence). Nearly 200 graduates participated via the hashtag and we had over 1,100 photos tagged with #wmgrad by the end of the weekend. Afterwards, all of the photos used in the slideshow were put into a Storify and shared on Twitter and Facebook so students, their families and friends could find the photos later to look back, reflect and enjoy (so far the story has been viewed over 830 times!). We also created a Storify of the entire weekend’s events so that we could showcase some of the photos and well-wishes from, during and after the Commencement ceremony.
So by all accounts this social media experiment was a success, and we look forward to adding this as a “new tradition” on W&M’s historic and tradition-filled campus.
In my previous post I talked about W&M’s Social Stream(a combination of the latest posts from the College’s official social media channels and a social media directory for all College-related organizations) and how it has evolved since it’s creation two years ago. While writing the code for this, (and truly satisfying my organizing obsession by going through our student club directory and A-Z office listings to ensure that our directory had all of the accounts listed that we could possibly know about) I began thinking “what is the
Photo by quinn.anya
purpose of having this directory?” Yes, like a phone book you can use it to look up a particular organization’s social media channel, but that usually means you already know it exists (either the organization or the channel). But what about if you’re a newly admitted student? Or a newly hired employee? Without even really looking at the particulars of the list it’s easy for them to see W&M is (as so many colleges are nowadays) very present on social media. By seeing this, they can look through the lists and find organizations that they want to connect with, or are interested in joining, in a more personal and interactive way than just visiting their website.
A social media directory isn’t just useful for new folks or for looking up a random account. If you’re in charge of social media for an academic department, you can go through and see what your fellow departments are doing, get ideas, share posts or tweets, perhaps even strike up a conversation with the person behind the page. For Creative Services, I know these lists are invaluable for keeping tabs on the happenings of campus and what our community is currently focused on. By following all of the student organizations on campus you get to hear about the little concert that is happening in the student run coffee house, or about the award a volunteer organization was given for their service, that you may otherwise not hear about. You can then share those stories on your “official” channels, helping your followers and fans feel more connected to campus.
Twitter lists are maintained on the main @williamandmary account for all of the Official-ish and Unofficial accounts and make sure that the main accounts follow every account on the list in an effort to show support for those accounts and what they’re doing.
Every three months Creative Services does an audit of all of the accounts, checking to see whether they have posted anything in the last few months. If a “slogger” (aka, slacking blogger) is encountered, an inquiry email is sent to the manager of the account, asking if it is still active or whether another page has replaced the one on file. It may feel a bit “big brother-ish” but often this helps the manager to realize that the page or account has been a bit neglected, and either they request help with ideas for things to post (this is where they are referred to the W&M social media resource pages and SMUG group), or the email simply spurs them to post just a bit more if it went off their radar over the past semester.
What other uses do you see for a social media directory?
This month W&M Creative services launched a revamp of the Social Stream site. The site is a combination of a “what’s going on now” snapshot of all our official social media accounts’ activity (the “Official” section) and a social media directory for all of the College administrative and academic offices (“Official-ish“) and all the student organizations and various “W&M personas” that have appeared in the past few years (“Unofficial“).
This project started over two years ago, combining a “Web Communities” page that was maintained in our content management system and a Twitter-only stream of updates from the (then) two dozen or so College-affiliated accounts. Realizing that updates for more than just Twitter could be shown using the various RSS feeds and web API’s available, the stream of updates was expanded to include Facebook, YouTube and Flickr. The list of Twitter accounts that had been used in the previous site, along with the Facebook pages, YouTube channels, blogs and Flickr accounts that we knew of from the Web Communities page were combined and divided into two lists so things would be a bit easier to find and particular audiences could have an easier time finding what they needed.
This directory worked well for a while, but as more and more organizations on campus joined in on social media and the variety of social media options continued to expand (Instagram, Pinterest, Tumblr, LinkedIn) the two column list began getting a bit unruly. So at the end of 2012 the social media team decided to revamp the directory portion of the site by moving the data into its own database (using Codeigniter to manage things). This allowed the lists to be more easily filterable, offering different viewing options as well as creating an administrative back-end so that anyone on the team could add or update an account (rather than hand-editing a PHP file).
Do you have a similar site for your institution? What challenges have you faced implementing and maintaining it?
Our office has been playing around with a site called Storify over the past few weeks (http://storify.com/about) which helps you to tell a story by curating social media content. The idea behind Storify is that you search for a particular Twitter hashtag (like #wmgrad for this year’s commencement), or for comments on a given Facebook page, video from YouTube or photos from Flickr, Instagram, etc. and then hand-select the best bits of content to use to tell the “story” of an event. You can intersperse your own text in amongst the social media entries as well to provide more context or detail to a story. Using a simple and friendly interface, Storify lets you create a permanent record of (typically fleeting) tweets, posts and photos about a common topic that otherwise would be floating around on the internet seemingly unrelated to each other.
I first played with this personally using April’s spooning record breaking attempt as an example. Intrigued and impressed by how easy it was to create a fun story, I presented it to our social media team and it was decided to create an account for W&M to use to capture all of the great bits of social media content generated by our community.
I wanted to spread the word about a new site that launched on Friday called EDUniverse. It’s a great centralized place to keep up to speed on blog posts and presentations from higher education folks all over the web. The site is a great resource for finding new, relevant and interesting higher ed related content, discovering higher ed folks on Twitter, and just keeping up with what’s going on in the industry. I was asked by mStoner to be an early contributor to the site and am so excited to see it live (and had a great time at the launch event in Boston this weekend, so great to meet and chat with so many amazing higher ed folks in person). I’d encourage you to sign up for an account and start exploring.
Yes that’s a lot of Twitter hashtags but that’s what’s been filling up the past few days for me. I, along with four other folks from W&M Creative Services, travelled to Austin earlier this week to attend HighEdWeb 2011 in Austin, Texas. Tina Coleman and Andrew Bauserman presented on our new events system at W&M, and Joel Pattison and Justin Schoonmaker offered a Photoshop workshop. Our former director Susan Evans (now at mStoner) also presented on creating a Creative Services team.
I presented alongside Doug Gapinski from mStoner about mobile strategy for higher education. The talk was well received on Twitter (tracked via hashtags for each session, ours was #tnt8) and I’m excited that folks were so interested in our topic. HighEdWeb’s magazine Link summarized our talk summarized our talktwice (!) if you’re curious about what we discussed.
I attended a lot of great talks and have some great ideas to bring back to campus. Here are their Twitter hashtag commentary (with a quick-and-dirty archive courtesy of Twitter RSS) and summaries courtesy of Link:
While working with William & Mary’s Foursquare presence and from my personal use of Foursquare over the past year or so, I’ve collected a few links I’ve found particularly useful, ranging from explaining what Foursquare is to those unfamiliar with the site, to resources for folks in higher ed in particular:
Foursquare 101 offers an excellent introduction of what Foursquare is and how it works courtesy of the About Foursquare blog (this blog also offers a lot of great info and tips, as well as the latest Foursquare news)
The Foursquare Support site is a good starting point for more specific questions, from how to use Foursquare to etiquette to software issues, all this is info straight from the source.
Official Foursquare for Universities page is the place to start to see how other schools are using Foursquare, benefits to using Foursquare on your campus, and to apply to have your school get a branded page.
Badges are quite popular on Foursquare and they’ve made a set just for colleges and universities (just make sure that the primary category for each venue is “College/University – <type of venue>,” otherwise checkins at these venues won’t go towards unlocking the college-themed badges).
If you’re looking to flesh out some of your school’s venues with some photos (and you don’t want them to be ones just from your mobile phone), About Foursquare describes a nice way to upload photos from your desktop (a little programming knowledge is required).
Working with all of William & Mary‘s venues I’ve spent a lot of time using a site called tidysquare. It will display, on a map, all the Foursquare venues for a given location, show you possible duplicates, as well as find venues with incomplete information. It’s a great place to start if you’re working to clean up your campus’ venues or just looking for a way to gauge how much of a Foursquare presence has been established in your area.
So one of the things I think is really cool (and smart) about Foursquare is that they crowdsource the maintenance of their venues. Folks known as “superusers” are given permission to update and add information to the various venues in an effort to keep the data as accurate as possible. There are three levels of superusers, ranging from 1 (the lowest) to 3 (the highest), and Foursquare just opened things up yesterday so that anyone can apply to become a superuser (as long as you promise to use your powers for good). I had been a “Level 1 Superuser” courtesy of all the work I’ve done with William & Mary’s Foursquare presence but, being the geek I am, I applied to be upgraded yesterday to a Level 2 Superuser. The whole thing really appeals to my super-organized side so I’m excited to appease that and help out the larger Foursquare community at the same time
So after all that I encourage you to create a Foursquare profile for your school or organization if you don’t have one already, claim venues around your campus, add new venues, offer tips to share some insider knowledge about your area, and find out all the new places this location-based stuff can take you.