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

@samsh1ne: #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.

~Tiffany Broadbent Beker (@tb623)

@jbvandyke
#wmgrad Walking there!

@lolciraptor: Tryna walk across campus #wmgrad

We’ve all probably learned the hard way that a spell-checker won’t catch all typos, but it certainly doesn’t hurt. While the spell-check feature of some browsers will work while editing the content area of a page (the little red squiggly lines under misspellings), you can also have a full-page check done as you submit your edits. This will include your page title and other text fields as well as the primary content area.

How it works:

1. Before you submit a page, expand the “Advanced Options” (located just above the Submit button).
2. Check the box labeled “Check Spelling” and hit Submit.
3. If there are any unrecognized words you will be presented an easy-to-use interface.
4. Use the options to modify the word, accept a suggested spelling, add the word to your dictionary or ignore it.

Happy editing!

~ Jesse

We’d like to know a little more about you. Many thanks to Google Analytics for their Audience Overview. Here’s a little something from our stats that jumps off the page.

In the past year, over 11% of visits to the W&M website were from a mobile device. In the past 4 months – 13%. In the last 30 days – 15%.

Looks like a trend to me, and judging by the saturation of ads for amazing new tablets and ultra-hip smartphones I am guessing it won’t trend down!

- Mark Windley

Enter responsive design.

It’s new. It’s exciting. You won’t believe you ever lived without it! Those crazy web designers and programmers have done it again. Just start with a common blender. Add your code, strong coffee, Funyuns (to taste), some more code, and yes maybe just a few tears. Blend for several months… and… Voila! A beautiful and responsive site!

Warning: Side effects among your visitors may include euphoria, uncontrolled tears of joy and doing the Dougie.

In a nutshell, responsive design allows friendly display of your web content in any web enabled device. This means a great experience for the visitor using a desktop at home as well as the visitor reading your news on a phone at the airport.

Granted, arrangement of the content across the different-sized devices is not necessarily going to be the same. And here’s where the fun begins. A 4″ phone screen cannot handle a 3-column layout, right? But don’t you just love that beautiful 3-column layout on a full-size monitor?

With a new bag of tricks we’ll present our existing content to best fit the detected width of every visitor’s device. (And, oh yeah, this will work in IE too.) Best of all, nothing will change for our diligent web editors using our current CMS. It’ll be business as usual creating King Content.

You may remember that we already dabbled in responsive design with our homepage. Since then we’ve created an inventory of all our pages, images, plugins, whatzits and doohickeys and mapped out a plan… Complete responsive W&M by early summer, then on to our graduate and professional schools!

- Mark Windley

As promised, here are the slides from the presentation:

What topics would you like to see covered in future SMUG meetings? Leave a comment and let us know!

~Tiffany Broadbent Beker
@tb623

Wrangling your right column may require some tough decisions.

There will come a time when you’d like to highlight (or you’re pressured to highlight) the office’s next 5 events, the 7 most recent announcements and that program for which you just built a spiffy new widget. It simply can’t all fit. Stop us if you’ve heard this one: if you highlight everything, you highlight nothing.

Try these techniques for shortening your right-hand column:

• shorten a listbox by limiting them to display 3, 2 or even 1 item at a time
• shorten or eliminate the summaries for your Events and Announcements
• find other high-traffic pages within your site to sprinkle widgets
• rotate your right-column features based on the seasonal traffic to the site

For more formatting tips, visit the Writing & Style Guide. There you’ll find best practices to help you create content to draw visitors in and showcase your department’s best attributes.

~Jesse

ReCaptcha is the tool we use for this purpose in our web applications, but lately some of ReCaptcha’s challenges are hopelessly munged. To be fair, ReCaptcha provides a button that refreshes the challenge image as often as you want without affecting the contents of the page, but it is not as obvious as we’d like and we’ve learned that many of our visitors are missing it entirely. For this reason, we’ve chosen to include a “get a new challenge” text link above our Recaptcha boxes that produces the exact same refresh effect as ReCaptcha’s button.

If you’re interested, here’s the html…

the additional javascript (yes, we are jQuery junkies)…

and the css…

A link can be added any number of ways, but the key is to call the reload() function of the ReCaptcha object, using a click event as the trigger.

~ Mark Windley

Do the font colors, spacing and justification look like they should and adhere to the Web Writing & Style Guide?

If not, you may have inadvertently copied in hidden (and erroneous) code from Word, email, a web page or other source. Try editing the page, removing the troublesome content and re-pasting it after you click the Paste as Plain Text button. You can also clean up your text by first pasting it into a text editor such as Textpad or Notepad.

Happy editing!

~ Jesse

The opening video for the 2012 Charter Day ceremony won a Gold award in the video viewbook category. The theme was “There is only one William & Mary.”

One of our own, Rosemary Willis ’13, was crowned Miss Virginia last year and went on to compete in the Miss America pageant. The ad produced by Creative Services for the Miss America magazine was awarded Gold in the magazine/single ad category.

Finally, taking home a Bronze award is the Admit It! Blog in the social media category. This blog, while designed and moderated by Creative Services, is one of the primary communication tools for W&M’s Undergraduate Admission Office as they write about everything prospective students and their parents need to know about admission to William & Mary.

Kudos to all that contributed to these projects!

~ Tina Coleman

1. Select the announcement you want to hide and UN-publish it (click the Publish tab, select Un-publish, Submit).
2. Click the Edit tab and then the System sub-tab.
3. UN-check the “Include when publishing” and “Include when indexing” boxes and Submit.
4. Publish your site folder.

When you’re ready to reactivate your hidden announcement:

1. Select the announcement.
2. Click the Edit tab and then the System sub-tab.
3. Check the “Include when publishing” and “Include when indexing” boxes and Submit.
4. Publish your site folder.

~ Mark Windley