Category: techblog

New year, new consolidated blog(s)

So you may have been redirected here from one of my old blog sites…I decided after a year of neglect in 2014 and prior years of sporadic blogging on both my personal and tech blogs, as well as maintaining a personal website, that it was time to just consolidate everything into one spot. So here it is: archive.tiffanyb.net.

I’ve been retroactively posting all day today so there is much more “going on” in 2014 now that when I started yesterday. Jeremy and I had talked about wanting to note which recipes we try out of our shared Evernote folder, so that combined with inspiration from Melissa McKelvey‘s renewed food blogging, and I’ve decided to post a lot more this year. Whenever I photograph a dish we’ve made and I have a recipe it will (hopefully) make it up on to this blog, more than anything just for my own sanity so I’m not searching back through my browser history trying to figure out which recipe I used for a given dish (hello Thanksgiving. Happens. Every. Year.). I’m always taking photos of food but don’t feel like it all needs to go on Instagram, so instead it will go here where, if nothing else, I can remember what I had for dinner one night…and if you, dear reader, are inspired or intrigued, then that’s even better!

This will also be the spot where I share the “work” side of me…articles I’ve enjoyed, presentations I’ve given, random thoughts on social media things, all that will be going here too.

So here’s to a new year!

More

#heweb13 poster: Deciphering Facebook Insights

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?).

Recommended Facebook Insights Resources
New Insights
EdgeRank and News Feed
Tips on utilizing the “full” Post and Page Insights data exports
More

Hey good lookin’…introducing W&M’s new responsive design

Cross-posted from the W&M Creative Services Blog

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

The announcement

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:

The motivation
desktop

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

Prioritizing

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

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

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

What’s next

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

What do you think of our new design?

More

Responsive Design Resources

(Cross-posted from the W&M Creative Services blog)

As we’ve gone through the process of redesigning the W&M website to follow responsive paradigms we’ve amassed a list of resources we’ve found useful, ranging from general topic familiarity to issue-specific tools and tricks. Since there are many organizations out there starting to take a look (or are already knee-deep) in a responsive design, we thought these links may be of interest to others as well:

General
  • Responsive Web Design – Ethan Marcotte – The article that more-or-less started it all
  • Responsive Retrofitting – Since many folks don’t have the luxury of a full rewrite
  • Common Misconceptions About Touch – Steven Hoober – Since fingers and touchscreens are what have prompted us to even really need a responsive design in the first place, it’s best to know what you’re getting into
  • The State of Responsive – Stephanie Walter – A great summary of the current state of the art
  • Improving UX through Front-End Performance – Lara Swanson – Just making your site adjust to different sized screens doesn’t make it mobile friendly
  • Printing the Web – Hans Christian – Since  we’re trying to accommodate all kinds of devices, can’t forget paper (plus it helps you focus on your content, which is helpful in any size and medium)
Tools, tips and tricks
Retina images

Many of these links were discovered courtesy of two mailing lists: Responsive Design Weekly and CSS Weekly.

What other responsive design resources have you found that have been helpful?

More

A proliferation of social media presentations

Over the last few months I’ve been asked by various offices and organizations on campus to give presentations on social media and how they can use it to market themselves to their many campus audiences. It’s been a fantastic opportunity to meet with many new folks on campus and “spread the word” about how social media can help them achieve their marketing and publicity goals.

Deciphering Facebook Insights

W&M Social Media Users Group, December 6, 2012

Like Us! Follow Us!

W&M Greek Leadership Institute, February 10, 2013

Stepping forward into Social Media

W&M Auxiliary Services, February 20, 2013

Social Media Bootcamp

W&M Social Media Users Group, April 5 2013

More

More than just a social media directory

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?

More

When is 100 > 10,000?

Last month I gave a presentation to William & Mary’s Social Media User’s Group on Facebook Insights and audience reach. A few folks in the group had voiced concerns about Facebook’s latest round of updates that appeared to reduce the aforementioned reach of a Page’s posts and requested that we have a meeting where we could learn more about that.

As I was creating the presentation I came to a realization. Although these metrics can certainly be useful in gauging how “successful” a given post is (where success is defined as posts that had the highest number of likes or shares or comments) what really matters in the end is, is what you present to your fans interesting? Is the information you’re providing what they’re looking for from your page (if they’re liking and sharing it, chances are this is the case)? Is what you think is engaging the same as what your fans think is?

Some folks have asked how many followers is a “good” number to have, or how many likes on a post. My response to that question is to actually turn it around and say, how many people do you want to be genuinely interacting with?

Do you remember Shel Silverstein’s poem “Smart“? If not, in the poem a child is given a dollar by his dad and he then trades that dollar for two quarters, “because two is more than one,” then trades those two quarters for three dimes and so on down to five pennies, not realizing that just because he’s accumulating more coins he’s not increasing the value of the money in his hand.

I think this is a (I’m sure unintended by Silverstein) fun analogy for social media. Are the fans you have “valuable”? Are they engaging in conversations with you based on your posts? Are they sharing and commenting on your content (therefore propagating your content to their friends and increasing your Page’s “reach”)? Or did your fans come to your page once to Like it and never return? This is when 100 > 10,000…100 genuinely engaged Facebook fans (or Twitter followers, or LinkedIn connections, or whatever) are more valuable to you than 10,000 indifferent users. Those 100 fans will do more for your page’s visibility with their sharing and liking, bringing your content onto the Timelines of others and thus further propagating your posts, than 10,000 fans who never interact.

More

How to tip the odds in your favor in search results – Headings, images & content (part 3 of 3)

(cross-posted from the W&M Creative Services Blog)

So you’ve set up the framework for your page, placing it in the appropriate spot on your site, giving it a readable URL and meaningful title, and filling in the description metatag. Next we will take a look at what goes into the main content area on your page.

Useful Headings

Headings help to create a hierarchy of information on your page. One way to think of headings is as if you were writing an outline of your page’s content like you did back in middle school for a research paper. If you skim the headings do you get the gist of what the page is about? W&M’s Web Writing & Style Guide encourages you to use headings thoughtfully and sparingly, which is also good practice for SEO. Use heading tags where it makes sense. If there are too many headings on a page your users will not know where to start visually; they will not be able to quickly determine what content is important, and they cannot easily scan to find what they were looking for on the page. Keep in mind, if your user cannot find what they’re looking for amongst a sea of headings, how will the search engine?

Images with “alt” text

Images may seem like just a nice visual element to add to your site but you can optimize them for search engines as well. All of your images should have “alt” text that is descriptive and can serve as a reasonable alternative (thus the “alt”) to the image if it cannot be displayed or is being “seen” by a screen reader for those users with vision impairments.

Another helpful SEO tip is to give your files meaningful names (just like your folder System Names). Rather than IMG0123.jpg, name it crim-dell-bridge.jpg (being sure not to use spaces, capitalization or any special characters aside from dash (-) and underscore ( _ ) ). Google looks at file names just as it looks at the URL and page name of your site, so giving it a meaningful name will help both the search engine and yourself find images.

Descriptive Links

Anchor text, the clickable text that users will see as a result of you adding a link to your content, should tell users (and Google) something about the page you are linking to. Avoid using “click here” or similar phrases. Instead describe where the link will take the user. This way it is easier for the user (and search engine) to scan the page and find relevant links as well as understand what the page you’re linking to is about.

Quality Content

Putting up clear, quality, relevant content on your website, whether in the form of an informative page title, well structured links, or useful image descriptions will help your page become more relevant to search engines. However, what influences your website more than any of these factors is the main content of your page. Creating compelling and useful content is what drives users to come to your page in the first place, and is what will prompt them to share that content and create the buzz that helps build the reputation and credibility of your site.

Content Questions to Ponder

If you are finding that your site does not appear where you expect it to when searching for a particular term, examine your content (this includes your page title, links and headings as well as the main content). Do you mention the search term you’re looking for anywhere in your content? Is it important enough that you should adjust your page title to include the term? You never want to “stuff” your page with search keywords to try and increase your rankings. However, if you find that people are searching for “agenda” when you are using the word “program” you may want to tweak your content to use that more common search term instead.

So with SEO it pretty much boils down to: write good content, name things clearly and concisely, and just generally be “friendly” to your users. These steps will take you a long way in making your site more relevant to Google and its searches, both on wm.edu and on Google’s main site. Happy searching.

More