Let’s pretend you’re writing a big paper that’s due at the end of the week. Things are going pretty well, but suddenly you realize that maybe if you rework your argument a little bit and rearrange some text, your argument will be a lot stronger. But you’re not 100% sure it’ll work – there’s a chance you’ll shuffle a bunch of stuff around and it won’t read right, and you’ll regret you ever changed anything at all. What do you do? You make a snapshot of your paper, and save it elsewhere. So you might go to “Save As”, and create “BigPaperBackup” and then try out your changes on “BigPaper”. If things don’t go well, you can always switch back to BigPaperBackup.
But what if your paper also has some images in it, and they’re going to change in your new paper? Suddenly we’ve got to track two different things, so we can’t just rename the file. That’s ok, we can just create a folder, and save a snapshot of the paper and images in there. So now we have a “Paper-Backup” folder, and a “Paper-Working” folder, and we’ll just make all the changes in the Working folder. If things don’t go well, we can always switch back.
But what if our paper is actually a group paper, and there’s a bunch of people working on it? And what if we want to keep regular snapshots of what the paper looked like, so we can go back and see why we made each change? And what if I’m not actually talking about a simple paper, I’m actually talking about the Lane Drupal Migration, with has 8078 different files in it, all of which we need a history for?
The answer is a type of computer program called a Version Control System, and the little story I told up there is just a variant of the well known Git Parable. Git is the version control system we’re using here at Lane, but there’s actually a bunch out there, including Mercurial, which has an awesome tutorial and is a little friendlier for Windows users.
There’s another tool out there called Gource, which lets you take the commit log for your project and turn it into a video showing the changes you’ve made. Although you might not be able to see the effects of each of these changes (many are just fixes for little bugs that crop up in testing), here’s a video showing every change that’s happened over the last seven months:
Usually I’m all technical, but let’s take a break and just look at some pictures. Here’s one:
There’s two lines in that graph, both of which represent mobile visits to Lane’s Website. Both lines are for the time period December 7th to February 7th, but orange is last year while blue is this year. For those keeping score at home, that’s a 102% increase in traffic. Put another way, last year 1 in every 33 visits was on a cell phone, while this year it’s 1 in every 15. This is a trend we see accelerating.
So we’ve decided to adopt a Mobile First Website strategy. Our new website will be built first and foremost for mobile devices – but it’ll turn on extra things for fancier devices like normal computers and tablets.
There’s an important distinction here. Unlike some websites, which maintain two versions of their site (look for any website with a url like http://m.example.com), we’re only maintaining one site. This makes things a lot easier for us, but it also means that you always know you’re getting the exact same information, regardless of if you’re on a cell, a tablet, or a regular computer. It might just look different.
We’re implementing our Mobile First strategy using a technique called Responsive Design. Using this technique, we first check to see the size your screen using something called a Media Query. If your device doesn’t respond, or can’t respond, we assume that you’re on a mobile phone. This is the Mobile First approach – we first assume you’re on mobile. If your device does respond, we tell it to display things optimized for that device width.
Sorry – I got technical again. Here’s a picture of what it looks like:
There’s actually 4 different images there. Which one you get depends on the size screen that you have. If you want to see it in action, get on the computer with the biggest monitor you can find and try resizing your browser window while viewing our contact page.
We’ve reached the Information Architecture stage of our web-project planning, a.k.a. how are we going to organize the new site? The ideal experience for any web user is to simply find what they need when they need it, without having to think. The ideal site is completely intuitive. Steve Jobs has been quoted as saying the ideal technology does not require a how-to manual. The aesthetics are such that users can simply figure it out. Given the breadth of the Lane web site this may be out of reach, but it is certainly an ideal worth pursuing.
Taking ques from the de-facto experts on web usability and intuitive design (see Peter Morville’s Ambient Findability and Steve Krug’s Don’t Make Me Think), we have begun a series of card-sorting activities with our stakeholders.
Card-sorting is exactly what it sounds like. A small group is provided a stack of 40 – 50 index cards with site names on them (counseling, welding, child care, library, course schedules, etc.) and ask them to organize them into 5 (or less) categories. Minimal direction is given – groups can add new cards – combine cards – organize as they see fit. Then we watch and listen to the discussion… see what they devise and listen to the logic behind it. They have a small window of time to get this done – 20 minutes or so – and then we have an open discussion about the results. A simple exercise that gets folks thinking about taxonomy and information architecture without having to know those terms – without having to read Ambient Findability or Don’t Make Me Think! Useful. Insightful. Simple.
So far, we’ve done card-sorting activities with current students, potential students (high schools), and lane employees. And we are now at the stage of aggregating and comparing the results. We aren’t there yet, but thought it might be worth while to share some of the process (and pics) of this activity.