Web Leadership’s Role in Higher Ed

Last week, I was fortunate enough to graduate in the second annual Pittsburg State University Leadership Class.  This is a program modeled after other similar programs around the state and nation, programs which are designed to groom and cultivate forward minded people into folks capable of stepping up and contributing to the growth and development of the university (Does your university have a leadership program for employees? If so, be sure to mention it in the comments, they seem to be fairly rare.).  About sixteen of us spent the past two semesters meeting once a month to listen to state and community leaders, do exercises, and discuss ways to better position ourselves to impact those around us (not to mention it looks great on a curriculum vitae!).

As I walked back to my office Friday afternoon, certificate in hand, I got to thinking about how critical leadership can be in a web office, and how our role at a university puts us in a position unique from almost anywhere else on campus.  First, it’s important to stress that real leadership isn’t about power, it’s about service.  I cannot stress that enough.  Almost more than in any other profession, in higher education when you are willing to take a leadership role, it means truly committing and putting yourself out there above and beyond your job description.  Maybe you’re sitting on extra committees, coordinating efforts, or taking part in things like a classified senate.  Regardless, becoming a leader requires you to commit beyond your job description and to give yourself over to serving others with the skills you have.  It isn’t just about being in charge of a bunch of people and telling them what to do.  Being a boss and being a leader are different creatures.

The reason we are in such a unique position is because of how connected we are across campus.  Public relations knows a lot of stuff, so does Advancement.  Ultimately, however, most of these entities are limited and restricted from certain aspects of campus.  The web, however, is different.  I’ve stressed before that a good web office sits under neither Marketing, nor PR, nor IT.  Instead, it should be between them all.  A hub, not a spoke.  When you serve as the hub, all things go through you.  PR isn’t particularly interested in the syllabus posting needs of faculty, or the photo gallery requirements of Athletics.  IT… well, they’re IT.  And Marketing’s main goal is to get students and money on campus.  All of them have on blinders.

We can’t work that way.  Recently, a group of about six offices came to me wanting a solution for doing things like storefronts, taking donations, and otherwise using the web to make money.  Great idea, that, because obviously with budgets getting cut, the more we can do to make easy money, the better.  It just so happens that with our web ear to the wall, we discovered at that exact time the Budgeting Office was meeting with vendors for a billing and payment processing system for campus.  Without that connectedness, this first group would have been in the dark, and we would have ended up with two different groups doing two totally different things towards basically the same goal, and spending way more money than necessary.  Instead, we stepped in, got people involved, and worked it out so everyone could benefit from a single tool.

It’s situations like that which have lead me to declare that any time I ever hear the word “web” or “internet” mentioned, I simply inject myself into the meetings and discussion.  If I don’t, there’s no one else here that is, and more often than not the result is people making less than well informed decisions.  In the case of the payment software, I didn’t necessarily have an obligation to step in and put the two groups together, but I knew that action would better serve them, the campus, and my office.  It’s no new thing that on a big campus, the left hand doesn’t know what the right hand is doing, but a leadership minded web office can serve as the nervous system that sends signals to both, and gets them working together to do things like play the guitar.  Metaphorically speaking, of course.

We all have a ton on our plates, no doubt.  But these small things and actions can go a long way to proving and solidifying the importance of a well resourced web office.  Imagine the money that could be saved when web steps in with recommendations for taking certain data operations online, or like in my case, when they hear two different groups working towards the same goal.  Imagine the time that is saved.  No one else has as many feelers out there as we do, and that leaves us in a prime position to take a leadership role, and help serve the campus to keep it running straight and efficiently.  Pick your metaphor: we’re the nervous system, we feel the pulse, we sense the weather changing – it all comes down to knowing how much we can do and offer for campus, even if you don’t have to.

Photo Credit: CC BY 2.0 pedrosimoes7

Mobile Analytics: The Neglected Mutant Step Child

How many iPhones visited your site yesterday?  Can you tell me?  Could you get it set up if you needed to?  At many universities, concerns about the usage of mobile devices (i.e. PDAs and smart phones) are increasing with respect to their web sites.  Are they meeting the needs of the users?  Can the users even get in to the pages in the first place?  It’s a worthwhile question, and having become a recent inductee into the Cult of the Almighty iPhone myself, it quickly becomes apparent how crucial data tracking of mobile users can be.  At first glance, there’s no easy way to extract that data from Google Analytics.  In reality, there’s some in there, tucked away, just waiting for you to get at it.

Before I go too far, I will mention that if you have the money and desire, you can always go with a paid analytics solution like Amethon or Bango that has software set up to specifically track mobile users.  It’s tailored and customized for exactly that purpose.  I have not, however, used them, so I can’t actually testify as to the accuracy or quality of the results.

First, some harsh reality: Google sucks.  I’m sorry, but they do.  As far as generic JavaScript/cookie based analytics go, be it Google or someone else, they just aren’t that great at tracking mobile devices well.  Bryson Meunier did a comparison of Google to Bango quite recently that showed a pretty stark 88% loss in tracking with Google.  Was this a hardcore scientific study?  No, but it certainly sets up an example of what you could possibly be missing.  Greg Harris also tries to compare apples to apples with Mobilytics and Google, and describes the problems.  But, my point isn’t to go spend a bunch of money on a tailored analytics package.  You absolutely can get some valuable mobile traffic data from Google Analytics, and we’ll look at how.

What We Can Track

Mobile Browsers in Google Analytics

Mobile Browsers in Google Analytics

It’s important to note that Google Analytics can certainly track some mobile details with some consistency.  Some of those that you should be able to specifically sort out are:

  • Safari / iPhone
  • Safari / SymbianOS
  • Mozilla / iPhone
  • SAMSUNG-SGH-I607 / Windows Mobile
  • HTC-8900 / Windows Mobile
  • Palm750 / Windows Mobile
  • HTC-8500 / Windows Mobile
  • SAMSUNG-SGH-I617 / Windows Mobile
  • HTC-8100 / Windows Mobile
  • Opera / SymbianOS
  • Vodafone / (not set)
  • HTCS620-Mozilla / Windows Mobile
  • PPC; 240×320; HTC_TyTN / Windows Mobile
  • many others…

Generally, smart phones from the past two years on have been getting better at executing JavaScript.  As that rate increases, we should be able to see more of the OS/browser combinations becoming apparent.  Obviously, if they can’t execute JavaScript, you can’t track them at all, and if they do it poorly, you may or may not get matches with the list above.  Where Google is fairly successful, however, is tracking screen resolutions.  Obviously your phone resolution is nowhere near your monitor’s, so with some filters and regular expression fun, we can narrow down our tracking with relative success.

Setting Up A Filter

Mobile Resolution Filter Setup

Mobile Resolution Filter Setup

The fast answer is to just create a mobile traffic profile, and apply a filter to it.  The iMedia Connection Blog has a handy regular expression for just this task.  It recommends (^[1-2]?[0-9]?[0-9]|^3[0-1][0-9]|^320)x([1-3]?[0-9]?[0-9]$|4[0-7][0-9]$|480$).  To get started, go to your Google Analytics page and click on Add Website Profile on your overview page.  Name it whatever you like, like “Mobile Traffic Report,” and set it to Add a Profile for an existing domain.  This sets the profile.  Now, go back to the overview page and click the Edit link for the mobile profile on the right hand side.  On the profile settings page, look around the middle for the Filters Applied to Profile section and click Add Filter.  You can see the settings in the screen capture on the right.  You want a custom include filter for a visitor’s screen resolution that matches the above regular expression.  Then save changes and wait.

This filter should start matching any traffic coming from sources with a resolution of 320×480 or less.  This will be regardless of the browser or operating system it may (or may not) be able to report on, allowing you to better capture traffic.  You’ll also not accidentally capture some of those people still in the 640×480 dark ages, though you could miss some PDA traffic that has managed to get VGA resolution.  This is where the rough edges start showing a little.  Like I said at the start, Google Analytics is far from perfect on this.

There is an alternative mentioned at E-nor.com suggesting a similar filter, but using some of the identified phone operating systems instead.  While it will work, keep in mind that this won’t pick up phones that don’t identify themselves.  Plus, you’ll have to constantly keep up with adding new phones as they become available.

A third technique I’ve used with some success is setting up an exclude filter for visitor non-mobile web browsers matching the expression (Internet Explorer|Firefox|Safari|Chrome|Netscape|Opera|Mozilla (Compatible Agent)?|Camino|Konquerer|(Lynx ,)?gzip|Playstation 3).  Though you have to be careful with this, because you risk excluding Mobile Opera and iPhone/iPod Touch users (I created this filter before those days, I’ve since switched to the screen resolution method).  You could add some additional filters though that could make this work by testing the OS as well.   Basically it’s operating on the principle that anything not matching the regular expression must be mobile.  Again, you’re making some assumptions, and it’s one that’s bound to skew results higher than reality.

What To Do With This Data

Now that you’ve got a profile collecting your mobile traffic data, keep up with it.  One of the first critical areas to address is where people are going.  Try to address the top landing points, and maybe offer custom mobile versions, or make sure the key data on the pages is easy to get at, such as login links, news, and other resources.  Maybe the numbers warrant putting forth the effort to write a mobile specific stylesheet.  Also consider, if your programmers are considering publishing something like an iPhone application for your student portal system, it might be valuable to know if you even have any iPhone users on campus.  In cases like that, you might be saving yourself a lot of work addressing a demand that isn’t really there (maybe you just have one or two very vocal, and perhaps annoying, users).

Likewise, you might be surprised by the amount of traffic you get from mobile devices, only to discover your site is practically unusable on phones.  In that way, you can identify a major need and prioritize it accordingly.  Know the technosphere your web site lives in, and make sure it is adapted properly for evolution and survival against potential competitors.  If demand is outpacing your ability to supply proper support, you’re potentially losing  opportunities to capitalize.

Also be sure that you know the problems that the data poses.  It isn’t perfect, it’s analytics.  In this case, it’s an even more rough approximation than normal, so if people start dissecting your data and picking apart figures, be prepared to cede the idea that you might not be able to wholly prove anything with absolute certainty.  You simply can’t trust in a mobile device’s cookie and JavaScript handling to be bulletproof, so you’re not going to get perfect data.  Not by a long shot, not with Google at least.  The solutions offered here are just to get you started, so you can at least begin to gauge the scope of your situation, and start formulating some strategies with at least some kind of basis in reality.

We’re Rich, Have a Strategy, and Want Better Data!

Great, then don’t use Google, because odds are you’re going to be disappointed in the metrics.  If you have the money, check out Mobilytics, Bango, comScore, or Amethon.  These companies all take specific approaches to measuring people on those many tiny screened devices.  One could hope that Google is able to step up and improve its system, but one of the main limitations is simply in the JavaScript nature of the tracking.

The takeaway is that mobile analytics tends to be neglected.  Since so many of us use Google Analytics, we don’t have access to high quality metrics, and since the filters aren’t there out of the box, we don’t always jump right in and set up mobile profiles like we should.  That leaves us missing out on a growing market segment.  Additionally, mobile computing is like the new Internet Wild West, and it has a lot of challenges due to the decentralized technologies involved.  It’s better to start facing some of them now, and leave yourself better able to evolve later, rather than finding yourself way behind scrambling to catch up.

Large Sites and Information Architecture

I apologize in advance, because this is going to be more of an article of philosophy, than a technical how-to.  A while back I wrote a piece on the subject of breadcrumbs.  In it, I made a comment about how breadcrumbs are a tool that helps expose the information architecture (IA) of a site to a visitor.  A discussion ensued where a rebuttal was offered that visitors simply don’t care about a site’s IA.  David Poteet said about IA (or rather a breadcrumb’s effect on IA) that certain ideas “…make the assumption that users understand or want to understand the structure of our sites.”  I ceded that point based on the fact that I believe he was, in part, correct.  Today, however, I wish to expand the topic some, and explain that while I believe they don’t care, they also certainly DO care.  Your information architecture plan is very important, and you should understand why things get placed where they are.

Information architecture is not science, it is art.  Like conducting a symphony.  It’s one part knowledge, two parts skill, and three parts just saying stuff like you know what you’re talking about and hoping others will go along with you (How often have you had to defend why page X was in folder Y instead of subdomain Z?  And with all the XYZs, imagine you did the site for Sesame Street!  I think my head just exploded…).  But at the same time, if users don’t care about it, why bother with it at all?  I’ll tell you why.  Let’s take, for example, two sites: my blog and your university site.  Both have very different IAs (In theory.  If they don’t, one of us is in serious trouble, and my “I’m with stupid” t-shirt is at the ready.).  My blog’s IA has very little active thought behind it, and is almost totally informed simply by the functionality of the CMS that I use for it (WordPress).  That’s not to say I didn’t put actual thought into a couple areas, I did, it just wasn’t much as far as these things go.  A university site, on the other hand, is vast, and generally requires constant thinking and rethinking and questioning of why and where things go.  You need a blueprint to inform that construction process.  Even the best CMS can’t just spit out a functional IA based on how you put information in to it for a site of that scale.

In a way, this compares to two businesses – let’s say Bob’s Lumber and Home Depot.  Bob’s Lumber is your local, downtown lumber yard.  They’ve been there for 50 years (But unfortunately due to the economy, probably won’t be there for 50 more.  That has nothing to do with the example, just trying to build a whole picture).  Then there’s Home Depot.  They carry ten times as much stuff, and have eight times the square footage of floor space.  In terms of these two stores’ “information architecture,” no one would argue that Bob’s needs to have maps posted around his store.  No, you might look overhead for a sign (landmark) once in a while, but you would assume it’s small and structured enough that even if you’d never been there, within a minute or two of walking in the door, you probably would feel like you could track down what you wanted (this would be like my blog).  Home Depot, on the other hand, has a map as soon as you walk in the door.  Then they have more posted throughout the store.  There are big signs over every aisle, and each aisle has additional itemization of what’s there.  They still have stuff organized in a familiar and (semi)logical format, so why the difference?

compass_256The difference is wayfinding. Peter Morville talks about this at some length in his book Ambient Findability (which, for the record, is a great book and I’ll be reviewing it here shortly).  The way we navigate space and the web, and the way we assign symbolic references to the web that mimics space is intriguing.  Also, Jared Spool from User Interface Experts has a nice mini e-book on this subject that David mentioned call Designing for the Scent of Information.  The reason I bring it up is that the idea of the way we apply “scent” to words, layout, and structure is absolutely part of the “instinct” of wayfinding we use.  David talked about scent in the breadcrumb article’s comments, explaining that to be useful, breadcrumbs need to be properly scented.  That notion applies to many things though.  Header/footer links, primary navigation, even the header tags and descriptive text.  Like a bloodhound, our brain digs into that page to smell out where it is the instant we land there, because assuming you need to continue on from there to accomplish your goal, or because your interest has been piqued about something else, you’re going to have to know where to go from there.  This isn’t something you do consciously, it’s just the reaction of our wayfinding instinct kicking in.  If you haven’t put a structured IA in place, that instinct will get lost, and the ability to use a site will go down.

Another example: imagine you are driving down the highway.  You have no map.  But at least you know you’re on a main highway (it’s four lane and has a 70mph speed limit) and that you’re headed where you want to go (sign just said “Kansas City 45mi.”).  But oh crap, you’re out of gas!  So, you pull off at the next exit to stop at a gas station to fill up, after which you get back on the highway, and continue your trip (eventually arriving safe and sound in Kansas City, even though a stupid bird flew right into your grill and cracked a headlight. Stupid birds.).  But you never looked at a map, so how did you do it?  Scent and wayfinding.  And more specifically the “information architecture” of the road system.  You didn’t get out a map to figure out where a gas station was, and you didn’t need one to get back on to the highway.  You didn’t even need it to know you were on the highway to begin with.  And the best part, you don’t care.  You don’t want to know all the intricacies that go into road planning and exit ramp design, at least not consciously.  Unconsciously, however, is another story.  The whole time you travel you’re noting signs, landmarks, inferring direction, relationships, etc.  Assuming it’s all well designed.  Try dropping a new person on the highways in and around Atlanta, GA and watch their confusion.  This is because their road system grew at such a frantic pace, it didn’t have time to be well thought out necessarily.

Back to one of my first points, I agree with David that users don’t care about how our sites are ultimately organized.  They don’t care how we set up folder architectures, page heirarchy, or content cataloging.  They don’t care if we have breadcrumbs, footer navigation, or tag clouds.  What they do care about, is that we’ve made some effort to expose enough markers to them that their instincts can orient them.  The bigger and broader a site is, the more important this is.  They come with a goal, and that’s that.  But that’s all conscious thought.  Unconsciously, it all matters a great deal.  We are constantly positioning ourselves in the web.  We like to think of it in spacial terms, because it allows us to reference locations easier and describe how we got places.  On a small site (Bob’s Lumber Yard), this is all less important, because there’s less to infer, and thus we build an accurate assessment faster.  But on a large site (Home Depot), you want as many maps, symbols, artifacts, and signposts as you can muster.  A breadcrumb trail, for instance, may never get used.  But, that doesn’t mean it isn’t a component of the visual cues we pick up and make mental notes of when we land on a page.  We don’t usually land on a page going “Where on this site am I?” as our first thought.  But our brain certainly does, because if you come with a goal, you can’t accomplish that goal without inferring aspects of the information architecture.

My point is, always keep in mind how your site grows.  Universities and colleges have been terrible in the past about letting things just happen willy-nilly.  That’s no longer effective.  We should have plans, and goals, and intent with respect to what happens where on our site.  The next time someone asks “Can I put this on the site?” be sure to consider if it’s best under their department, or maybe as a special area in their college site.  While it’s not about being right or wrong, it’s all about wayfinding.

Photo Credit: BY-NC-SA 2.0 Photo by Ti.mo

Functional Debate: Categories vs. Tags

Several days ago (or more, seeing how long it actually took me to get this finished, whoopsie), Twitter user @stomer brought up a question to the Twitterverse regarding a common tool we use any time we work in social media these days: “This a fair description?: categories are like table of contents items, tags are more granular like items that would be in index?” I happened to be on right when this hit the feed, and replied: “Categories are for organizing, tags are for identifying.”  It was a simple exchange which prompted a third comment from @jdwcornell asking for some expansion on this idea, to which I am happy to oblige.

categories_v_tagsCategories and tags are two functional elements that many of us who use things like blogs, Flickr, YouTube, or many content management systems are familiar with using on a day to day basis.  It’s easy for us to see how they work and what they are for because we have such a high level of exposure to them.  But that’s us.  I know that I’ve found myself on more than one occasion explaining the tag cloud on our university’s home page.  These systems are very smart, and apply these things in cool ways, but users can tend to be, well, not so savvy.  To some people, functionally, they seem very similar, which is exactly why I came up with my simple description that categories are an organizational tool while tags are for item identification.  Generally this helps people get over the hump of understanding them.  YouTube does a pretty good job of exemplifying this, where they have just over a dozen categories (like “Pets & Animals”) that you choose from, and then a blank field where you could freely tag a video (like “dog, boxer, barking, trick”).  The first tells you where it goes, the second tells you what’s in it.  Flickr lets you tag photos as well, and you categorize them through the use of sets.  In that case, you get to name the sets (as opposed to YouTube where they are predefined by them), but they are basically serving as a category the same as anywhere else.In our case, we use both categories and tags in the university CMS (we use dotCMS).  When a user creates content for the university in the content management system, we ask them to do both of these things.  The first question that usually follows is: “What?”  This is quickly followed by the second question: “Huh?”  In all fairness, I can’t blame them on this.  Both of these fields can be used on the front end of the web site (or not, depending on what it is), but we also use them in the CMS to enhance internal searching for content.  Under this setup, categories form the basic structure of the college: office names, departments, organizations.  Tags then allow specificity in identification.  The result of this is searching for content categorized as the “Admission Office,” and then tagged with “checklist,” or “forms.”  Or if you needed more generic information, you could search for content tagged as “contact information” and pull it from all the areas, or categories.  This exposes the idea that the tags are simply identifying what is in the content.  We use a similar mechanism for the calendar, categorizing by area, and tagging by topics.  Then, any department or office can get a customized event feed of their category, or more general areas can pull from them all by tags.  Seeing this type of stuff in action usually really helps people understand the difference when they didn’t before.

To make further comparisons, categories are kind of like folders.  They are designed to help users located related content based on the implied relationship of the category name, usually based on a theme or topic.  Generally, categories are predefined by some kind of administrator ahead of time, and aren’t added willy-nilly.  For instance, there’s the “Admission Office” category in our CMS.  It’s there in a list for the contributor to select from when they make content, and so they couldn’t make a new category called “Admissions Office” or “Undergrad Admission Office.”  They are bound to what we have set up.  This makes them useful for building things off of because they are predictable and structured.

Tags are almost never preset like that.  Instead of folders, these would be like contextual post-it notes you stick on papers in the folder.  You might agree on a policy to use some kind of convention (like always pluralize words, never capitalize, don’t include spaces, etc…), but generally there are no restrictions on their use, and authors can create and assign them during authorship of content without any extra help.  In many ways, tags are a type of visible meta information, and you will hopefully break out a thesaurus if using them well.  Not to confuse the matter, but it is possible to also create tags that can serve the purpose of categories, a kind of “super tag,” if you will (but it would rely on use of a convention to function properly).  That kind of functionality will normally depend on your infrastructure, but the idea is that a tag, in a way, is basically a type or subset of categories.  But they tend to be much more fluid and less predictable than categories.  I could pull information based on the tag “student,” for example, but at the risk of missing stuff tagged “students,” or if you have the ability you could use the tag “student” to match things like “student employment,” “student events,” “student groups,” etc…  In this way they are less useful functionally, but far more useful in identifying, connecting, and relating items.  And looking at the big picture, properly implemented tags get picked up by sites like Technorati to help identify and group similar information from thousands of web sites on a macro level (for more information on this, take a look at the rel=”tag” microformat).

So there you go – categories organize, tags identify.  Ultimately, their basic function and usage might change depending on what you’re using them in (a blog, Flickr, a CMS, etc…), but that basic principle will generally always stay the same no matter where you are.  When users question their function, try to give them a simple example to go off of.  If they don’t get it in our CMS at first, I tend to find refering to Flickr and YouTube to be nice examples that everyone seems to get.  For more information on the discussion, I recommend the Categories vs. Tags articles at Haacked, or Usability Post.

Tasty, Useful Breadcrumbs

Did you by chance read User Interface Engineering’s article “Design Cop-out #2: Breadcrumbs?”   I’ll admit that I am a little bit late getting back around to this topic, which I originally read sometime back in… oh… August?   October?  Regardless, right after reading it I knew that I needed to offer a counterpoint, because while not completely incorrect, I felt that the original author was not entirely even handed with the topic, and in some cases sort of dropped the ball.

amazon_bc

Here’s the recap/summary of the original article linked above:  Crumb trails, like many things, are a tool.  You use them like a localized site map, helping to expose your site’s information architecture to the user in a useful manner.  Creation of a crumb trail is not a good use of time, however, because they take resources to create.  These resources could be better used determining WHY a user needed to use it in the first place.  In other words, they either aren’t really needed, or are a symptom of a larger problem.  When they aren’t needed, time isn’t really taken to craft them “right” or “well,” and if people are using them a lot, then you have to wonder why your site is designed so poorly that they are so necessary.  That was the basic point of the article, and in some ways, it is a good point.  In most other ways… not so much.

doteduguru_bc“So, Michael,” you might be asking yourself, “what do you disagree with then?”  Well steady reader, I’m so glad you asked me that!  The thing is, I agree with them that you should pay attention to their usage, and if a lot of people are turning to them, you might take some time to ask “why?”  But, the answers can be many: maybe they are awesome useful, for example.  That’s possible.  Maybe they don’t get used at all, except by a few people, but if those few people use them, I’ll lay money that if you removed them, you’d hear about it fast.  This is a similar case to the idea of a “quick links” drop down menu on a home page.  I HATE these and feel that if there’s one tool that qualifies as a cop-out, that’s one, because it’s just a link dumping ground.  But when we removed it during our redesign, my how we heard about it.  Ceaselessly.  And still are.  You could also think of it like an A-Z index.  It amazes me how many people I work with who will turn to it before anything else to go places on the site.  As the original author mentions though, I live in the IA of our site, the users don’t.  What they will do however, is find a tool that works, and stick to it.  These types of navigational tools are secondary aids, and what people tend to do is use them in cases where it gets them where they want to go.  Many times, they will mix and match. It’s rather fun to watch them do live, while you stand there behind them pulling your hair out as they butcher what you thought was a smooth, flowing information architecture.  Not that it isn’t still nice, it’s just that users will find a way that they think works best, and even if you show them a faster, simpler way, a lot of people don’t like it because it is both different, and not something they did on their own.

delicious_bc

Crumb trails are just such a tool.  The fact of the matter is, if 11% of your users are hitting them (as Jared mentions in that original article), it’s because they are a useful tool.  To them.  The original author goes on to mention this:

“The idea behind how breadcrumbs should be used is simple: the user ignores them until they get to a page that isn’t quite what they wanted. They discover the trail of links and click on the one most likely to contain the correct path to what they were originally seeking.”

Which I think is patently incorrect.  A user doesn’t necessarily click on a bread crumb because they think it will take them somewhere better or put them on a correct path, nor is there any reason to believe they are used only by lost visitors in the first place.  They click them so that they can surface up in a web site and potentially begin navigating anew.  It’s almost like zooming out on a picture.  Maybe they’ll look for the same thing somewhere else, or maybe they want more information on a related subject that is in that same basic branch of the site, and then again maybe they want to surface quickly to look for something new all together.  I will agree that they might use it to take a new path, but the purpose and destination could ultimately be entirely different.  Assuming you have taken the slightest modicum of care with building bread crumbs, users will recognize them as a reflection of the hierarchy of your site’s information architecture, making them a tool that users have no reason to ignore if they are viewed as an aid to going where they want to go.  Using the previous example, it’d be like saying users ignore an A-Z index until they simply have no other recourse than to look there for something.  Theoretically that might be true, but in practice, there are a lot of people that view such a page as their primary navigational element (even though to us, technically speaking, it’s secondary).  Unfortunately in analytics, we can’t really measure intention or perception.  In the index case though, it’s our 7th most visited page, with 60% of entrances coming straight from the home page, and the top 10 pages from there being things that are not hard to find.  The end conclusion then is that there’s no reason to believe this generic navigational tool is a cop-out. (note: I wish I had stats on our crumb trail to share, but unfortunately I do not, at this time. I’d love to see stats from others though, either for or against this opinion.)

ku_bc

“Many users don’t recognized them and, therefore, don’t take advantage of them. They may recognize them, but become confused because the elements in a location breadcrumb doesn’t represent any path the user thinks they’ve traversed.”

This is another statement that sort of sits sideways with me.  I don’t know whether it is true or false, but the author doesn’t give any kind of research to back it up, leading me to believe that he might think this is true, but doesn’t actually know it.  I’m probably hardly one to criticize that, because I do the same thing, but to say most users don’t recognize them and therefore don’t take advantage of them is a pretty bold statement, especially when early in the article he directly references some informal statistics claiming that 11% of users are clicking them.  That’s certainly a big enough group for me to pay attention.  I admit that I’ve done no usability testing on crumb trails, but my lack of testing is not something I’d use as a basis of discounting the feature.  Lucky for me, others have.  Further, analytics certainly can’t tell you a user’s opinion on the tool, and if that idea came from a usability study, I would like to read it.  On the contrary side, I highly recommend Jakob Nielsen’s article “Breadcrumb Navigation Increasingly Useful” from last year which lays this matter out far better than I could hope to.

“We’re recommending that when teams see users needing breadcrumbs, they look for other holistic design solutions. They’ll need to watch users and see the circumstances leading up to how the need arises. In almost all cases, they’ll find a better way to solve the problem than traditional breadcrumbs.”

Here I will switch case and agree with him.  If your users need bread crumbs to navigate your site, I think you have some design/layout and information architecture issues to address.  The key to successful bread crumbs is that they should be a secondary navigational tool.  But, I would argue that people don’t use them because they need them, they use them because they see them as a means to get to where they want to go.  As far as the user is concerned, that might be a quick link, an A to Z index, a menu, or a bread crumb (and all of these, minus menus, are generally secondary tools).  The thing is most users neither know these terms nor care about them.  All they care about is “I click here and go where I want.”  I agree with Jared that given perfect IA, smart menus, and intelligent visitors, bread crumbs are a waste of time.  In reality, few people run sites that function in such a static bubble that one person has control over every facet of how information is disseminated.  This goes triple true in higher ed, when we’re lucky people can even put the right information anywhere, and you’re relying on 100 different people to do it all.  It’s like saying “In a perfect country, we wouldn’t need laws to punish robbers, because no one would steal from each other.”  The reality is, people do steal.  That doesn’t mean we shouldn’t strive to stop them, and shouldn’t minimize the problem, but you still must address the issue.  So what do we do?  We create a ton of secondary navigational elements, build them nicely into our layout, and let the user decide how they want to combine them to go where they need.

newegg_bc

This is why the last thing I believe a crumb trail is, is a cop-out.  Frankly, I think it’s our duty to give visitors as many tools as we can to find their way around the site.  To say a crumb trail is hard to “get right” kind of dumbfounds me.  There are only a few ways to do them, and none of them are particularly “wrong.”  The original author never even gives you an example of what a “bad” crumb trail is.  Admittedly, not every site needs a crumb trail, but certainly in higher education where we deal with sites that have tens of thousands of pages, the more paths we give to find information, the better.  Things like microsites, portfolio sites, or any sites that serve fairly singular purposes don’t really need them, otherwise, slap that puppy on there.  All we’re talking about is one line of text, basically, and any design worth their salt can find room for that in a layout.  Does it need a top level featuring?  Heck no. Maybe it ends up falling to the bottom of the page, almost an afterthought, but it’s there for the people that want it.  Just remember to keep things consistent, and meet users’ expectations.

Here’s an analogy:  Say I have a paint can.  One could argue that the right way to use it is to run it through a paint shaker, and then use a paint can opener on it.  Sometimes though, it’s just faster, easier, and more convenient to shake the crap out of it myself and use a screwdriver to open it.  Is that the perfect solution? Nope, but I always get the can open, and it’s no worse for the wear.  Crumb trails are the same thing.  They might not be the most perfect, elegant way to get around the site, but there are a lot of times where it’s a tool that can just as easily get the job done.

On a more minor note, it’s worth mentioning that good bread crumb trails can also be an SEO boost for pages that use them, which never hurts the ol’ analytics.  Bread crumbs can also help users develop a mental map of the site and view it in a hierarchal manner.  Both of these can help boost a user’s perception of your site.  If they see your pages higher in search results, obviously that helps credibility (not to mention the accuracy of the results, if you’re using keywords in the crumb trail).  If users mentally understand the setup and organization of your site, it will improve their opinion of the site’s usability, and also aid them when searching in the future.  Ultimately, the usability should be the primary concern for a crumb trail, but these are nice side effects to weigh as well.

What are the takeaways from this, in my opinion?

  • Not every site needs a crumb trail
  • Crumb trails are simple to implement
  • Crumb trails are hard to “do wrong”
  • Usage of crumb trails does not necessarily imply a problem in site architecture
  • There are a lot of reasons we should use crumb trails on higher ed sites
  • Crumb trails are not a “cop-out,” they are just one more in a list of ways to get around a site
  • Be consistent in their usage and meet users’ expectations with them
  • Crumb trails have SEO benefits
  • Don’t give me a can of paint

Evolving in a Recession: Opportunity in Open Source

Raise your hand if you see your budget on the chopping block for next year.  The current topic de jour has been how so many school’s are being asked to do more with less.  Budget crises from state to state have everyone scrambling to find ways to cut corners, and trim fat.  Some people are lucky enough to be well past a recent redesign, and have frameworks and tools in place for the future.  In those cases, be glad you got on the boat early.  But, that doesn’t mean that there aren’t still a lot of schools needing to evolve, or looking to retool.  One thing that is seeing renewed interest, are the potentials of open source software to help drive web sites.  For nearly any tool you use: CMS, calendar, E-learning, project management – there is some kind of open source alternative.

dotcmsAdmittedly, just because an open source alternative to commercial software exists, doesn’t mean it is good.  But, let’s look at a content management system, for example.  If you’ve ever had the chance to talk content management systems with me, you know I am a big proponent of dotCMS.  Why? Because it’s free, awesome, and crazy easy to use.  I have three words for you: Enterprise Open Source.  You might have heard about similar offerings from the likes of Drupal, who recently began offering a line of professional support for their open source CMS.  This is also basically what you pay for with things like Red Hat Linux.  The idea is that the software is free to use as you please, but if you need a backbone of support, you can pay for that, too.  Why this works so well for the likes of us is that it allows us to offer professional tools for a small (or no) line item on the budget.

Why is this important?  Simply put, have you priced things like RedDot or OmniUpdate lately?  Not to say they aren’t great systems, they are, but a lot of schools could see themselves coming into a demand to update their sites’ infrastructures without much in the way of financial support to cover such a change.  And while the temptation might be there for some to try and shoehorn a large and complex site into something like Joomla, it’s a good idea to know that there are better alternatives out there.  And CMS’s aside, if you are looking at applications for other areas of campus like community development, portals, CRM, etc, those costs can really add up fast.  Slap on top of that annual support costs and all you’ve really succeeded in doing is creating a great big money pit.

opensourcevectordiamondWhat dotCMS offers universities is a broad scoped tool, with granular permission controls, varied template designs, flexible content creation and repurposing, and an open source code base to build upon.  More importantly, being open source, there is a growing and very valuable opportunity for schools who have adopted it to begin networking.  These schools have the chance to pool resources towards goals.  Maybe that means taking several small amounts of money to do a “group-buy” on a desired feature (dotMarketing will custom code about anything you want and commit it to the code base, but if it’s off the normal roadmap, or a low priority, money obviously changes said positioning), or if the schools have committed Java developers, they could work on creating Viewtools and servlets that could then be shared between everyone.  It’s this spirit of communication, collaboration, and extension that makes a tool like this substantially more valuable than some closed source counterparts.

Enterprise support entirely aside, I am trying to encourage schools who have already adopted dotCMS to consider such a partnership.  There’s a group on the UWebD Ning site, and we’ve set up some basic help forums for the software.  My hope is that through collaboration, we can do a lot to help ourselves.  Users have a valuable opportunity to embrace and extend in ways that simply are not allowed or possible with commercial enterprise systems.  Imagine the driving force a network of committed schools can apply to open source projects that we see value in.  Not only can we make them better and grow them quickly, but we can expose people to the products.  Why do you think Apple loves getting contracts with schools?  When you get your product in front of people for hands on usage, when the time comes for them to make their own choice on what to use, what do you think they’ll choose?

collabtiveSome schools have created similar approaches to CMS development with things like Zope/Plone, and there’s no reason we can’t do the same in other arenas.  We are in the market of knowledge, and it only makes sense that universities should be the breeding grounds for supporting open source initiatives.  That’s the very spirit that drives us, and it’s the way we can really begin to carve out a valuable niche for ourselves going into the future.

Better still, consider how you can take and apply this kind of mentality to other tools.  Maybe you use SugarCRM, or Collabtive project management,  or Moodle E-learning software.  Any of these tools could give you the chance to build with others.  As an office, our two man staff can’t cover a lot of ground, but if we can combine our efforts with other schools, suddenly we have some horsepower to apply to needs.  Now, that doesn’t me coordinating such efforts is either easy or fun, but once established, they can become invaluable lines of communication and development.  Ultimately, universities are well-oiled machines when it comes to spending money, and we’ve spent a lot of years thinking that any problem worth solving is worth paying someone to solve, but that’s just not a model that appears to stay solvent as we move into the future.  Open source software gives us the chance to not only do more with less, but to simply make ourselves as individuals and employees, more valuable.

Look at it this way: anyone can form a committee and hire a company to do a job, but if you are specifically skilled at developing products, and have a resume full of OSS building experience, and you can show how that translates into saved monies, you’ll be pretty darn secure into retirement.

Getting There: Successful Goal Setting

Yesterday I had an interesting discussion with our other web guy.  We recently underwent a fairly large redesign of our web site, which included the addition of new features and tools (read: more work for everyone).  One of these is the addition of a home page centerpiece linked to stories about the people of the college: students, faculty, and alumni.  The thing is, it’s not our job to write the stories, and it’s not necessarily PR’s problem that it was determined we need lots of these.  And so the two groups talked yesterday about the scenario.

goalThis was all relayed to me, which got me thinking: What are they trying to accomplish?  There were lots of ideas thrown about, such as changing the release schedule, doing stories on campus things, highlighting groups or programs, etc.  My main concern was that some these worked against our original theme of showcasing the people of the university.  In all fairness, this original idea was made pretty arbitrarily.  We made an assumption that showcasing successful people is a good use of that space.
Us:  “What should go there?”
Them:  “I dunno, people like seeing people.”
Us:  “Okay, people it is!”

The problem now is keeping up, and trying not to impact people’s already full work load.  But I believe that there was a clear deficit in the problem that they missed.  What were they trying to solve?  There’s a lot of talk about problem solving and goal setting that goes on in the business world, and for good reason.  How can you effectively tackle a task without defined parameters?  In this case, the problem was two-fold: workload and story quality.  One of the ideas thrown out was doing stories on things like building history.  But, does this really solve initial problem?  Of course not.  You still have an issue of needing someone to write the story, and that writing still has to be concise, engaging, and compelling.

Our original line of reasoning, to develop a people-centric centerpiece, was sound enough, I think.  As a university, our commodity is people, after all.  Potential students, parents, and donors need to see a successful product, just as if we were making suspenders, or clever shoe horns.  If all we had to show were men with their pants around their ankles and shoes thrown to and fro, we wouldn’t be putting forth a successful air… we’d be Congress.  Using our above example, how could we better tackle this?

  • Define the problem: Be clear about what exactly it is that’s wrong. In education, there’s always someone around to tell you things are broken, we’re here to help define and explain exactly what that is.  Sometimes this means recognizing that the problem presented isn’t the actual cause.  Be sure you’re at the root issue.
  • Brainstorm answers to those problems: If the workload is too high, perhaps set up a slower release cycle, or stagger new stories.  The important thing is that these develop as an evolution from defining the problem.  In our case, tossing out alternative story ideas is certainly a different option, but it’s not one that addresses the problem.  The catch here is that good lateral thinking can create neat ideas, something we’re prone to get, just not necessarily productive ones to the problem at hand.
  • Simplify: Take some of the potential solutions and see how far you can distill them down and still be successful.  Bells and whistles can come later, for now, keep your eye on the ball.  It will save you time and frustration.
  • Decide how to execute the solution: If you’re changing the release cycle, what will you change it to?  If you change an editorial process, what workflow will be used?  Be clear about defining resources and responsibilities.  If PR needs to write X and marketing needs to review it, get that down.  That way if the process breaks down later, you can refer people back to the original plan.
  • Execute: Set a time to get this ball of goo rolling, and do it as quickly as you can after you’ve decided what to do.  Don’t give ideas time to get stale, or the problem time to magnify.
  • EVALUATE: There’s nothing that says problem solving like being able to show you did it.  This deserves a deeper look.

The whole point in problem solving is to set goals, and measure them.  In the end, it’s all well and good if we choose a couple ways to change our story writing process, but if we don’t have a goal, not only for the problem solving but for the original need, how do we know if what we are doing is working?  In this case, we need a primary goal, one for the centerpiece, and a secondary goal, one for the problem of story production.  Overall, our goal is to showcase the people of the university.  All well and good, but this isn’t really measurable.  What we need to say is that we want to get X% of home page views a month to clickthrough the centerpiece.  We would do this with enticing photography, and engaging quotes.  From there we might even say we want an additional X% of those people to go on to visit a related page.  There we have a defined goal, explaining how we’ll do it, and how we’ll measure success.

With the writing problem, we would say our goal is to generate Y new stories a semester, staggering their release ever Z weeks, and editorializing them through a new workflow.  The measurement for success would be twofold.  One, are we hitting our production cycle, and two, is our primary goal being met?  If our primary goal isn’t met, we need to sit down again and evaluate if the problem is still in the production cycle, or if it’s something new, like needing more exciting photos, better placement, more concurrent stories, etc.  Thus the process could start over.  But by measuring our goals, we improve our ability to define problems, and determine a course of action, and identify deficits in the future.

Ultimately, your best key to success is a clear problem definition, and somebody to lead your discussion logically to a solution.  We tend to come at a lot of problems with a “throw a bunch of stuff against the wall and see what sticks” mentality.  We’re also very good at going off on tangents or the previously mentioned lateral thinking.  That’s just how tech people are.  We love pretty, shiny objects.  When you get neat or useful ideas, you need to weigh them against what you’re trying to accomplish and perhaps put those off until a better time and place.  While these new, shiny ideas can frequently accomplish some kind of change, that change isn’t always solving the original problem.  The result is something different that just forces you to keep revisiting the same problems.  You just need to stay focused and keep the original problem and goal in sight.  Once those are addressed, you can start doing some of the new things, which will undoubtably create an entirely new set of problems for you to play with.

How Safe Is Your Job?

There was a point, about three years ago, where I was seriously wondering what job security in a jack-of-all-trades style web job was really like.  Was there value in it?  Was there a future in it?  These kinds of questions are inevitable when you consider where you are, where you can go, and what you can do between here and there.  The web is a big place, and those darn kids that won’t get off our lawn are sharper about web stuff than they used to be.  Are we destined to become a dime a dozen, especially at universities where we are effectively training people to replace us every day?

chickencubicleI think it’s always important to weigh your career once in a while, and determine what the longevity of it is, both as a job, and as a means to keep yourself satisfied.  That was where a lot of these questions originally came from for me.  I was trying to determine how to further develop myself professionally, and in what ways to do it.  The first thing I think I was able to really work out was that yes, we should keep ourselves sharp (a given), and that yes, the web is a great industry to be in.

I, for one, don’t view the younger generations as a threat just because they are young and have been exposed to the internet from birth.  Had the web stood still, and never evolved beyond basic HTML, I think it would be a totally different story.  Luckily, the web is crazy dynamic, and evolving in ways that can blow even the most hardened veteran’s mind if they think about it too hard.

Compare it to a Model T.  If automobiles were all still as simple as Model Ts, we’d all be mechanics by now, and we’d never need shops.  That’s how the web in a bubble would be.  But as cars have evolved and become more complex, so too does the web.  We will forever need mechanics the same as we will always need “web developers” (whatever that really means).  And at universities, we’re always short on skilled people and resources.  It might be easy to find a talented youngster to fill a spot, but it’s much harder to keep them when someone else can wave almost twice the money under their nose.

The other side of this point, being a jack-of-all-trades, is equally valuable.  As I mentioned, many of us work in shops where our staffing is painfully low.  It pays then to be good at everything and great at nothing.  I’m not saying that you shouldn’t strive to be experts in things, it’s just hard to do, and as a human, I require sleep once in a while.  If you network well and know your resources, even the hardest questions can be quickly answered (thank you Google).  Then as you grow in your position, you become better primed for project management and leadership positions.  The captain of a ship might not be able to fix the engine of his boat, but a good captain would at least be able to talk to the mechanics on their level and know what he can and can’t ask for.  An expert programmer might be able to hammer out Ruby or Java code like nobody’s business, but by specializing in that, they sacrifice other skills.

Ultimately, if you’re happy in what you are doing, and your boss is happy with you, then it’s all good.  But I think we all need a little to look forward to from time to time.  Where do you think the most valuable skills lie in university web positions?  Project management? Development?  Design?  Information Architecture?  Where are you putting your chips at?  And by investing in those skills, do you think doors can continue to open for you on your current ladder, or have you already hit the ceiling?

Getting Synthy with Virtual Tours

Those of you who have kept up with some of Microsoft’s new toys (or who read my Twitter), have undoubtedly heard of a new little Seadragon based photo interface they have been working on in conjunction with the University of Washington called Photosynth.  This new spatial photo organization system sent the tech word abuzz when news, video, and a tech demo began passing back and forth across sites like Digg anv Slashdot.

photosynthA few days ago on August 20th, Microsoft officially took the technology out of the “look but don’t touch” phase, and began enabling users to log in and create their own “synths.”  This amounts to going out, taking a ton of pictures of something, and uploading them.  There’s no other user intervention needed aside from naming the synth and tagging it.  The system calculates groups, intersections, perspective, placement, etc.  Great on the time saving, not so great if you want to adjust something.  I noticed in my tests that a couple times it didn’t connect groups that clearly went together, and there’s no way to tell it otherwise yet.

My first instinct is that even though this is a little heavyweight on computing power needs, it’s an awesome idea for virtual tours of campus.  I was recently considering doing a bunch of videos around the university – walking around, looking at things, and other tasks.  The idea is to give potential students a better feel of “being there.”  Instead, I’m considering throwing in some time to build out some of the key areas of campus in PhotoSynth (along with the videos as well).  Some colleges are already playing with this.  The reason I see this as a huge opportunity is that it moves out of the passive nature that video has, and creates an active environment they can explore with about as much detail as you make possible.

Furthermore, the ways they are working on improving this technology are simply awesome.  It really gets me thinking about how interesting it is that 2D still images could really beat out video as an interactive tool on the internet.  In reality, almost everything is more interactive than video, but video is viewed as being more dynamic since it has moving pictures.  Just about the time Photosynth went live, this video came out detailing some of the advances they are already making for the photo tourism software.

Examples

I worked up four quick examples just to test run things, which I have linked just below.  I found that with anything of any size you should really try to hit with at least fifty shots.  I maxed my synths about 120 or so, but could see using way more on other things in the future.  I also found that it works much better if the camera is not necessarily the center of the synth.  Instead, try to make the camera be outside looking in.  In the first example of the Russ Hall stairway, clicking the “Switch to the next 3D Group” button will show you how many different groups it put together, because it seemed to have some problems organizing things in an indoor 3D space.  It also probably didn’t help that I was moving all over trying to cover things with different angles.  Note that in that video I mentioned in the previous paragraph, it looks like they are working on this very issue though.  Outside works much nicer though.  Taking a target and moving around it seems to produce nicer results.

You can also see how things work from a single vantage point (JungleTron), and how the orbits come together (statue).

What’s Good

  • Embeddable: You can embed the synths in existing web pages, and it has a nice splash prompt asking users to download the plugin if they haven’t (the splash even shows that specific synth’s thumbnail).  U of W’s web site also shows an example using a Java applet, though that doesn’t appear to be a publicly available feature yet.
  • Engaging: Rather than just asking a user to sit and watch something, or flip through a handful of disconnected images, you are encouraging someone to interact with your site and campus.  Consider the potential for Easter Eggs.
  • Easy (what’s with all these E words?): While the ease of use forces you to sacrifice control (see the other E word below), it makes it stupidly easy to deploy and use, which is a great time saver and makes the barrier to entry low.
  • Single Image View: Users don’t have to remain trapped in the interactive world if they don’t want to, and can switch to a simple thumbnail gallery.
  • Storage: Microsoft was generous in giving users 20GB of storage space for synths.  That’s a lot.  For comparison, my four synths are built from 364 1600×1200 images that took up .3GB (that’s point three, or a little over 300MB).

What it Needs

  • A preview mode: This is especially true if you are shooting in hi-res of any kind.  Prior to taking all the time to upload a couple hundred megs of photos, it’d be nice if you could make sure it looks right.
  • Better indoor modeling: Right now Photosynth seems to have some trouble modeling from inside a structure looking out. Recent demonstrations indicate this will be improved soon.
  • Manual stitching: If Photosynth defines a set of photos as a separate 3D group, it’d be nice if you could manually match it to another 3D group that it goes with if it made a mistake.
  • More OS support: Few tears will be spilled over those of us crazy enough to use Linux, but the Mac crowd is big enough that Microsoft needs to get on the ball at the risk of Apple, et al doing it better to please their customers.
  • Clean permalinks: Hopefully they will hurry up and do something about the links to individual collections.  At the moment, they contain long, and impossible to verbally telegraph synth IDs.  It would be nice to see something more like http://photosynth.net/username/synthname.
  • Editing: Currently, you can’t add or remove photos from a completed synth, and you can’t edit existing photos in place. You also can’t download all the images used as a batch (that I know of).

Is it Ready?

Unfortunately, not just yet, at least not as a primary campus marketing tool.  But, if you have the time and resources to start playing with it, I think there’s plenty of value in it, even at this early stage.  Since the whole process (besides taking the photos) is automated, it doesn’t actually take much to slap a synth together and post it.  Imagine groups like your art department and what they could show off with this kind of functionality.

I think the keys to success with this are all in the “What it Needs” section.  If Microsoft can bull ahead through those issues, particularly making it OS and browser agnostic, I could see this quickly becoming the tour software de jour.  I’ll also be interested in what sites like Flickr will do in response, be it license the softwre, or produce their own.  There is always the “Microsoft” variable that can and will keep plenty of people from commiting to it.  I don’t entirely blame them, as I am frequently against putting all your eggs in one third party basket.  The only reason I differ on that opinion in this case is because, well, there is no alternative yet, and given what I’ve seen in that latest video, I’m not sure there’s much improvement even necessary.

E-mails, E-mails Everywhere and Not a One to Spam

It was brought to my attention the other day that there are some concerns about e-mail addresses published on our college’s web site and the effect it has on spam.  It turns out the filters here run through about 10,000,000 emails a day, about 7% of which are passed on as being actual, legitimate messages.  We are not a huge campus, but I’m going to guess that many of you would see a similar ratio.  Naturally, this has brought up conversation of obfuscating e-mail addresses.  We’ll set aside the “closing the gate after the horse got out” metaphor for now, because techniques can always help prevent spam from hitting new addresses, so at least that way we can lighten the load for our new users.

email_codeOf course, the ultimate e-mail obfuscation problem is how to do it accessibly.  By its very nature, if you are making information accessible to those without JavaScript, or with screen readers, etc, then you are publishing data in a fashion that can be picked up by spammers.  There are plenty of methods that work great, and I’d be happy to use them on my personal blog or such, but they simply aren’t feasible for a college trying to be 508 compliant (or otherwise, depending on if your state has its own guidelines as well).  If you have done any research on this topic, you have undoubtedly come across A List Apart’s article on this subject.  In a lot of ways, the conversation can start and end there, because they’ve broken the issue down to the atomic level, and reconstructed it as gold.  But, there are some other methods, and some other considerations I want to point out, especially because I’m in a non-PHP environment now, so I had to go another route to find a solution.

CSS (Code Direction)

This technique came to me by way of Silvan Mühlemann’s blog.  I think of any method, this is both the easiest and coolest, and it works in FireFox and IE6.  The problem is, it’s also the worst.  It relies on the idea that you can take a string, and with a CSS attribute reverse the flow of the information inside the selector and make it readable.  So, when you write the address, you say moc.elpmaxe@liame, and with CSS reverse it to be email@example.com.  The reason this is bad though is twofold.  First, you can’t make it clickable.  The CSS only works on content within the selector, so you can’t manipulate an href, and obviously putting the email in as a plain href is as bad as having it normal in the page in the first place.  Secondly, it breaks copy + paste, because copying the text causes you to copy from the source, which is backwards.  So pasting it pastes the original moc.elpmaxe@liame.  If you make the link not clickable, you darn sure better not break copying.  The bad part is that Mühlemann’s blog reported a 0% spam rate over a year and a half on an address encoded in this manner, so it appears to be great at stopping spam.

CSS (display:none)

This faces pretty much all the same problems as the other CSS technique, but instead relies on using a span inside an email address to hide a part and make it human readable: email@<span style="display:none;">I hate spam</span>example.com.  A user can read the address without issue, but still can’t copy it, and you still can’t make it a link.

Character Entity Encoding

This is the practice of taking an email address and encoding all the characters into HTML entity values, so email@example.com becomes &#101;&#109;&#097;&#105;&#108;&#064;&#101;&#120;&#097;&#109;&#112;&#108;&#101;&#046;&#099;&#111;&#109;.  This is better than having an email in plain text (affecting a 62% decrease in spam volume over plain text), and it allows you to make it clickable.  However, it’s straightforward enough that it comes in second behind plain text as the easiest to get past, though the decrease in spam volume was fairly significant.

A similar, but alternative method that appears to reduce spam load by 92% over plain text is to mix in entities for the “@” and “.”, producing a mailto like email&#64;example&#46;com.  This is probably because the crawlers are set to ignore single occurrences of encoded entities, and with them there, the email doesn’t match an email pattern (at least until they get smart enough to match this pattern).

Both of these methods can be considered viable for accessibility purposes, and they make a big enough impact that one could serious consider employing them full time.

Insert Comments

Inserting comments results in addresses like email<!-- -->@<!-- @ -->example<!-- -->.<!-- . -->com.  This however fails the test to make the address clickable.  It is more effective than fully character encoding the address, but less so than selectively encoding the “@” and “.”, receiving about 444% more spam than that method.  Comments decrease spam by 11% over full on entity encoding of the address.

Build with Javascript

The process of using Javascript to concatenate the components of an email string is almost foolproof in its ability to trick spiders.  This relies on setting a couple variables and combining them all in a fashion similar to document.write("<a href=" + "mail" + "to:" + string1 + string2 + string3 + ">" + string4 + "</a>");.  But naturally this is a problem for those not using Javascript.  They would simply get no output where this is used, in other words, it doesn’t degrade gracefully.

Use “name AT site DOT com”

If you look around on blogs and forums, there is a growing trend to type out an email in the fashion of “username AT website DOT com,” or some variation thereof.  First, this doesn’t address clickability, and second, it’s not really a trick.  All spammers have to do is Google a phrase, like “AT gmail DOT com” (I got 10.3 million hits) and start saving matches.  Oddly enough though, this appears to produce less spam than building with Javascript, but the click problem combined with almost inevitable circumvention makes this pretty useless to us.  And personally, I’m not a fan of making a visitor do extra work to change a deliberately tweaked address if it is at all avoidable.

ROT-13 Encoding

ROT-13 is a basic substitution cypher, that rotates a character 13 places.  This allows it to be encoded and decoded very easily.  Using this to process email addresses appears to be one of the foolproof means of avoiding spam crawlers (along with the CSS techniques).  Here’s a basic tool that you can test the technique on.  PHP readily includes the str_rot13() function that can be used for this.  But one last time, you’re limited to people using Javascript.

A List Apart Method

Rather than explain this, go read their tutorial.  It’s very clever, and is probably the best alternative out there, but only if you are using PHP and can write some custom .htaccess URI rewrite rules.

So, given this boat load of information, where does it leave us? I think many of us in the educational circles can use A List Apart’s system for any of our emails that show up in dynamically generated listings.  Email addresses added to a page by an editor or such would have to be handled manually though (you can get around this with some additional work using Apache’s mod_substitution).  My solution is a combination of techniques.  Our CMS is Java based, so A List Apart’s methodology doesn’t exactly work.  But, what I can do is combine ROT13 encoding with a <noscript> alternative that incorporates an image generator and character encoded link to make it clickable.  This would create an image representation of the address that is properly alt tagged so that screen readers can still interpret the address and users could still click it.  I think this is a good blend in my case.  There is a URIRewrite application on our server as well that would allow me to do some of the A List Apart system in the future.  The point being, you don’t have to use only one solution, you can combine different options to try and get the best of every world.  But there is no magic bullet if you are trying not to break accessibility.

For many of us, the horse may already be out of the gates, so closing the gate now might not do much.  But we can at least try to ease the load on new addresses that become published, and make the spammer’s job harder (and make email admins less likely to gripe at you).  There’s no good excuse for handing over emails as plaintext when we have tools to easily avoid it.  And ultimately, if a human can read it, it’s inevitable that spammers will crack through it.  For the time being, that process isn’t cost effective for them though, so we might as well take advantage of it.