Tag: Drupal

Better Ways to Track Progress

In an effort to understand the progress we’re making, we spent a few minutes earlier this week figuring out what the biggest “chunks” of the website are. Of course, once we had some data, we had to do a little bit of analysis. The results are now linked on the menu bar up above under “Current Progress“.

On that page, there’s two graphs which display the percent of our chunks in these five statuses:

Status Meaning
Cut Chunks that are just going away – still stored on backups, but not linked from anywhere.
Archive Chunks that pertain to old projects that need to be kept around for either legal or historical reasons. They’ll be stored on the Site Archive
Review Chunks that have been moved into Drupal, but need a final review before deployment
Done Chunks already moved into Drupal
Not Complete Chunks still on the old web server. This is chunks that are in progress or haven’t been started

Here’s the first graph, which shows the percentage of individual pages in each status:

Here’s the second graph, which shows the percentage of departments in each status*:

The best part about these graphs is that they update every time we update our spreadsheet. So, some day several months down the road, instead of these images showing a lot of grey with a little bit of yellow, they’ll show a lot of orange and no grey at all.

Unfortunately, I only have statistics for the pages that are still on the web server. If I included the work done last summer, when we deleted over 5000 pages, which would have made that first graph 46% blue!

* technically, this is the percentage of top level folders on the web server in each status, but that’s a pretty close approximation to departments.

Progress Report

So, it’s been two weeks since my last post. What have we been up to?

First, we set up a new Google Mini, which gives us access to updated software that’s years newer than what we were using for search. We’ve also changed what pages we’re searching. Instead of only searching the Lane Website, we’re now including some of our other websites, including Titan Athletics and the LCC Knowledge Network.

Tuning a search server is pretty tricky, and since ours is indexing over 50,000 webpages, any adjustments we make take some time to see – sometimes hours. But we’re watching the logs, and trying to make it easier to find the things that you search for most.

We’ve also deployed a few more of our websites to Drupal. Here’s a list of all the “chunks” of the site that are now hosted on Drupal:

There’s a ton more “chunks” to do, but we’re making progress. As always, please let us know if you spot something not working! If you’re responsible for your department website, check out the ATC Training Schedule to to find a workshop so you can get trained.

Lane goes to DrupalCon

Recently, two of us got to go to DrupalCon Denver. There were a lot of other drupalista’s there:

DrupalCon Keynote, Day 1

We saw all sorts of sessions, but the one that stuck with me the most was Luke Wroblewski‘s keynote address on the last day. He gave a talk on the importance of Mobile First Development. You can (and should!) watch the full presentation at the his site, but here’s the thing that hit me hardest.

When you’re developing for mobile devices, you lose 80% of your screen size. That means you need to focus your pages on your core mission. Here’s the example he used, from Southwest’s website:

Southwest's website on the desktopWhereas here’s their exact same website, viewed on a (pretend) iPhone:

Southwest's website, viewed from an iPhoneFlickr does something similar. Here’s their site on the desktop:

Flickr's website, viewed on a Desktop computerAnd once again, here’s their site on a (pretend) iPhone:

Flickr's site viewed from an iPhoneIn each case the mobile website shows only the things you most want to do – buy a ticket, check in, upload photos, and seeing photos taken nearby you, which is hard to do on a regular old computer. The sites are, in many ways, actually providing a better experience than the normal desktop website, and are sometimes even providing capacities that can’t be found on a desktop.

We’re super excited to be committed to a mobile first approach, and are pumped from a week of learning all the latest and greatest things about Drupal. Plus, we learned that next year’s DrupalCon will be in our own backyard (be sure to resize their site and to try scrolling it some to see some awesome css/html5 effects!).

Git and Us

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:

Upgraded Templates

You may have noticed the new contact page on the Lane website. This is the first page that we’ve moved, or ported, to Drupal (only 11,999 to go!). You’re going to see many more pages start looking like this soon, so let’s spend a few minutes going over some vocabulary, and then talk about what’s different.

First, let’s talk porting. This just means moving from one platform to another. For example, say we made a really awesome video game for one console, perhaps an XBox. The game is finished, it works great, and it’s tons of fun. But we can’t play on any other console, like a Wii or a Playstation. To use another platform, we’d need to modify the game for that other system. Because the content of the game is done, porting takes a lot less time than starting from scratch, but we still need to find all the little differences between the systems. We’re doing something similar. The content of our website is done, we just need to move (port) it from one platform (static HTML pages) to another (Drupal).

The second thing we need to talk about is templates. As we port the content of the website, we’ll be putting it in a big database. When it’s time for Drupal to show you a webpage (like the contact page), Drupal grabs the content of that webpage from a database, inserts it into a template, and returns the dressed up webpage to you. So a template simply says how the page is going to look. This way, look and feel is totally separate from content – we can change either the design or the content without impacting the other one. Of course, the big important question is, “What’s the template going to look like?”

We don’t know yet. There’s lots of people (Faculty, Students, and Community members) involved in the process of figuring that out. But, figuring out what the webpage is going to look like takes more than a couple of days. In fact, it will take until at least summer. So we need a temporary template that we can use with Drupal, so that pages can be ported while we decide how they’re going to look.

The contact page has the temporary template. It looks a little (ok, a lot) like this:

The new template for the contact pageThis should look similar to the existing Lane pages, but it incorporates some subtle changes and updates that I couldn’t resist putting in. Here’s a cheat sheet of things to look for:

  • Social Media Links – In the bottom right hand corner of the page you’ll see links to Lane’s presence on various social media platforms (Facebook, Twitter, Google+, etc).
  • Access Keys – On pages using the new template, you can press your web browser’s access keys to jump to different parts of the page. For example, on Firefox on Windows, you can press Alt+Shift+N to jump to the Navigation links on the page, or Alt+Shift+C to jump directly to the content (Check Wikipedia to find your access keys). This improves our Section 508 Compliance (§1194.22 (o), if you want to be all specific).
  • A New URL – pages using the Drupal template will have a URL that starts with www2.lanecc.edu instead of www.lanecc.edu. Sorry about that. This is a necessary requirement while we’re porting content. In the future, all of the pages will be at www.lanecc.edu, though www2 links will work for a long time. If you need to use an url that likely won’t change in the next few years, you can just replace www2 with www, since we’ve done some magic to make those pages jump to www2 automatically.
  • Different URLs – some pages will have exactly the same URL as they had before. Some will be a little different. For example, the old contact page was at http://www.lanecc.edu/sf/info.html the new one is at http://www2.lanecc.edu/contact. For some time, both urls will work. But we’ll eventually be migrating entirely to the new urls, which we hope will be more descriptive of what’s on the page.
  • Automatic Update Times – Each page has an associated update time which will be displayed at the bottom. You can use these to see how old the page content is. We’ll be using them to see which pages are going “stale” so we can try to keep things fresh.
  • Telephone Links – Any phone number is now clickable. If you’re on your cell phone, you’ll see phone numbers underlined, with a little phone next to them. If you click on a telephone number from your cell phone, you’ll be prompted to call that number. If you’re not on your cell phone, you can still click on phone numbers, but they won’t be highlighted or have the phone icon. Clicking on them probably won’t do anything (unless you have a way to make phone calls from your computer).
  • File Type Icons – links to files like Word documents, PowerPoints, and PDFs will have icons next to them representing their file type, making it easier to know what you’re clicking. (This isn’t on the contact page, but be looking for them elsewhere!)

There’s one more exciting benefit to the new template. There’s now a mobile version, using something called Responsive Design. Since I’m over 900 words in this blog post already, I won’t go into detail yet, but for now, try viewing the contact page on your mobile phone, or try opening the page and then shrinking the web browser window on your computer to a much smaller size. Expect another post with more information about our mobile plan soon!

Time for an Upgrade

Let’s think way back for a minute, to a time when Gnarls Barkley’s “Crazy” was #2 on the charts and people were just starting to watch OK Go dance on treadmills. To when we got used to Daniel Craig as James Bond, and to Al Gore being on the big screen. To when Pluto was still a planet. To the last time Lane got a new webpage.

At the time, we had a nice, modern website. Unfortunately, our story isn’t much different from the guy who owns the nicest VCR on the block – times have changed. Our website was designed before there was an Internet Explorer 7 or any version of Google Chrome. There was no such thing as social media: both Facebook and Twitter launched to the general public after our last redesign. And perhaps most importantly, no one was looking at websites on cell phones – the iPhone wasn’t released until almost a year later.

I think we can all agree that Lane is (over) due for an update.

Our mission this year is to realize that update. But this isn’t a small task. Ever after three months of intense cleaning, Lane’s website has 11,795 pages of HTML files living on our server. If we want to update the design, we need to make a change to each and every one of those files. In other words, even if we started today, we wouldn’t be able to finish before it was time for the next redesign. Plus, we wouldn’t be fixing the information architecture of our site – we wouldn’t be making things easier to find.

So we’re going to build the next generation of the Lane website using a technology called a Content Management System (CMS). A CMS is going to offer us a lot of awesome things in the near future:

  • The ability to modify and change the website from anywhere in the world, at any time of day.
  • The separation of presentation and content – we’ll be able to change the design of the entire website without having to worry about what’s happening to the content.
  • Editing from the browser – no need to download any special software, just fire up your web browser and get to work.
  • A mobile version of each page – because presentation and content are separate, it’s easy to serve the same content with a design optimized for a mobile device.

The CMS we’ve picked is called Drupal, an open source project that powers all sorts of important websites, including The Economist and the White House as well as a number of university websites right here in our backyard such as the University of Oregon and Portland State University.

Obviously, a transition like this isn’t going to happen all at once. In fact, this one is going to take until summer, and we’ve already been working on it for almost a year! We’ll do as much as we can to keep you posted on changes through this blog. Expect a post in the not too distant future about some of the changes you’ll notice before we officially launch the new design.