Color Blindness Testing

As we prepared to launch the new design, one of the things we were sure to focus on was accessibility. While that’s been covered in previous posts, there’s another area of web accessibility that’s often forgotten that I’d like to highlight here: Color Blindness.

Color Blindness is a complex condition, manifesting one at least ten different ways, and  affecting some ten million Americans. Although most color blind individuals are actually color weak – meaning some vision of a color, but trouble distinguishing it from nearby colors – we chose to do our tests on the more severe form, rationalizing that if we can design a website that works for true color blindness, it will also work for weakness.

Here’s some simulations of different areas of our site for different types of color blindness:

Homepage:

Future Students:

Current Students:

Community:

Content Page:

The primary thing to look for in those images is contrast. Do the color choices of our design ever create a situation where a color blind person wouldn’t be able to find some of the text? For example, if the design had adjacent green and orange elements, a person with Protanopia would probably be unable to tell them apart. From what I can see, we’re in pretty good shape. And just to make sure, I double checked with a colorblind coworker.

Another thing to think about with Color Blindness is the use of color to convey important information. For example, say you receive a message on a website, “The email was not sent”. If that message is in red, most of us would assume that it was a bad thing – the email we were trying to send didn’t make it. But if that message was in green, then most of us would assume it was a good thing – the message we desperately didn’t want to send was canceled. For this reason, Drupal includes a checkbox next to “good” messages, and an X next to “bad” messages, so that the intent of the message is always clear, even if the color isn’t apparent.

Although we tried our best to test a few regular content pages (like http://www.lanecc.edu/esfs, or http://www.lanecc.edu/finaid), with over 4000 pages, it isn’t possible for me to hand check every one. For that reason, if you’re a content editor, please try to keep contrast and intent in mind when you’re working on your pages.

I created those images using GIMP, a free software program, using the Color Deficiency Filter (under Views). If you’d like to try seeing your page, there’s a number of color blindness simulators online. I’d recommend http://www.etre.com/tools/colourblindsimulator/

Google Mini Issues

We’ve mentioned a few times in meetings around Campus that we’re tracking search volume on our Google Mini. Our plan has been to use the last year’s data to see how the new website impacted visitor’s abilities to find different things. In other words, if for the last year everyone searched for “Schedule”, and now suddenly no one searches for “Schedule”, we can assume that we succeeded in making Schedule more visible. On the other hand, if no one used to search for “Moodle”, and now suddenly everyone is searching for “Moodle”, we know it’s hard to find Moodle.

We also tried to make the MegaMenu as small and as lightweight as possible, to make it load as quickly as possible. Right now the entire Megamenu uses about 30k – less than your average Internet Cat Picture.

Picture of a cat in a hollowed out computer monitor, with the caption 'I'm in your internet, clogging your tubes" (spelled wrong)
For example, this picture uses 31k.

But unfortunately, when we put these two things together – a super optimized mega menu and a desire to track search engine statistics – something broke.

The Google Mini has different collections. For example, we have a collection that searches just our COPPS documents. The biggest collection is the default collection, which searches all the pages in the index (all collections, plus pages not in any other collection). When you search the Mini, a bunch of parameters are sent in with your query, telling the Mini which collection to use, which set of styles to apply, etc. If you omit all of these parameters, search still works – the default collection is searched and you’re shown your results in the default front end. I assume that also meant that the searches were logged as belonging to the default collection.

Unfortunately, it turns out this is not the case. Here’s a streamgraph of our search traffic:

Search volume to Lane, showing varying ups and downs throughout the year, then a sudden dropoff for the last two weeks
428/12 – 4/13/13

See that real small area on the right hand side, where traffic falls off a clif? For the last two weeks searches were correctly logged in the search engine, but are not given to the default collection for inclusion in search reports – effectively making them invisible to us.

We added the hidden parameters to the search bar in the MegaMenu, and verified today that we’re seeing an 800% increase in search traffic in reports over what we saw yesterday. Apparently those parameters are not as optional as I thought.

In a way, this error isn’t a big deal. Right after launch, we expected a surge in search traffic as people searched for things before getting comfortable with the new layout. So we’d always anticipated throwing out the last two weeks of data in our analysis. But as a bit of a data nerd, I’m always sad when any data is lost, and we’ve had a hard time interpreting how people are interacting with the new site.

I’d also like to point out that we added the MegaMenu to the search results page. If you search for something via the search engine and discover that you’re not getting the results you want, you can also try AskLane from the search box on the MegaMenu. Of course, we’d also encourage you to submit some search feedback to us (the form moved to the bottom right), so we can try to improve the search engine to give you better results.

Two final notes. If you ever find yourself managing a Google Mini, and pulling your hair out because the new XSLT you applied isn’t rendering your new styles, it’s because you need to add &proxyreload=1 to a search string, to clear the style cache. Second, this weekend we’ll swapping www and www2 (don’t worry – all links will continue to work regardless which one you use), and as part of that we’ll be resetting the search engine index. That should clear out a lot of old pages that aren’t really relevant any more, and are no longer linked, but are still out there on our old web server. It’ll take most the weekend to rebuild the index, but hopefully next week you’ll get even better search results.

Caching Changes

Once again, we’re on a quest to make the website as fast as possible. Drupal doesn’t make this easy – on an average page load, our request for that page passes through three servers, sometimes generating hundreds of database calls and touching dozens of files. But through caching, we’re able to skip most of those steps and serve you content that was already waiting for you.

Now that we’re a couple of weeks post launch, we’re going to start making our caching a little more aggressive. If you’re a web editor, this might impact you.

Previously, the cache time on all of the objects (pictures, fonts, stylesheets, etc) on our pages was set to six hours. This makes sense the first few days after a big launch – we were anticipating lots of changes. But now that things have stabilized some, we’re turning up the cache lifetime on our stylesheets and javascript files to one year, and turning the cache lifetime of images up to one month. For 99% of visitors to the Lane website, this will result in up to 17 fewer requests to our servers – a 70% savings – creating a significantly faster web experience.

Unfortunately, this also means that there’s certain circumstances when a picture you’ve added to your website remains in the cache, and you’re unable to force someone to use a new one. Let’s say that you have a picture, called “kitten.jpg”, of a kitten eating a hamburger. You save your page, and people flock to see your awesome image. Every one of their browsers sees that the picture has an expires header of 111600 seconds – 31 days. Next time they visit your page, their browser won’t attempt to download that picture again unless at least 111600 seconds has passed.

The bad situation happens when you want to replace your kitten picture with a better one (say, a picture of your kitten eating a cheeseburger). You upload your new file as “kitten.jpg”. But your visitors will never see the new picture – their browsers see the same filename, and they know that particular file hasn’t expired from their cache yet.

So how do you fix it? Well, for one, remember that the picture will automatically fix after 31 days. But if you need an immediate fix, there’s a simple trick. Just rename your picture as “kitten2.jpg” and add it to your page like a new image. Now when the browser visits the page it’ll realize that it doesn’t need kitten.jpg anymore, and grab kitten2.jpg instead. We’re setting the cache at 1 year for JavaScript and stylesheets because we’re able to depend on Drupal to create new stylesheet and JavaScript names automatically when they change, and effectively do the same thing as we did with kitten.jpg in the example.

Things are actually a bit more involved than what’s above, but it’s not worth the extra confusion. If you’re interested in how we’re actually implementing caching, please send me an email or leave a comment.

I know this extra renaming step might seem painful, but we can’t ignore page speed. Google is incorporating speed into their rankings, and for users on slow connections (3g, in particular), we want to make sure the page renders in less than 1 second. Caching will take us a long way towards where we want to be.

Curriculum & Scheduling and Facilities Deployed

Two chunks deployed today:

This upcoming weekend we’re tentatively planning to try switching www and www2, which is one of the final steps in our migration process. There will be no further deployments ntil then. Also, this will require a short outage Friday night while we rewrite a bunch of URLs and do some DNS changes. Expect the outage during the myLane maintenance window, some time between 6pm and 11pm. We’ll try to tweet more details later in the week.

7 departments and less than 500 pages to go!

Launched!

Welcome to your new website!

New Homepage, containing each of the regions further described in this post.
Lane’s new Homepage

Ready for a quick tour?

The Mega Menu

The MegaMenu open, displaying a set of commonly needed links.Up at the top of every single page on the site (and soon, other Lane websites) you’ll find this menu with the most popular and requested resources on the website. Make sure to check out all five tabs!

We’ve also upgraded the search:

The expanded Search box, showing search optionsWhen you click on the search, you’ll see a list of multiple search options. For now, this will let you directly search the Lane website or use AskLane. Soon, you’ll also be able to search people and departments.

And if you ever need to get to the homepage or one of the landing pages, just click on the Lane Icon on the left hand side:

The different homepage options available in the MegaMenu. These are the same as is listed below, in the Landing Page Menu area.You’ll see a link not only to the homepage, but also to each of our visitor landing pages.

Landing Pages

On the right hand side, you’ll find a menu with links to pages designed specifically for our different visitor types:

Links to our four landing pages: Future Students, Current Students, Community, and EmployeesAnd immediately below that you’ll find an area with announcements relevant to you.

Banner Links

On the large, colored banner on the homepage you’ll find a set of some of our most often needed links.

Image of the central banner links for the homepage. The purpose of this banner changes on the Landing Pages. Here, the banner links you to categories of content. So, on the Future Students Landing Page, when you click on “Paying for College”, you’ll be transported to a list of related links to help you find information about paying for college: Financial Aid, Tuition, Scholarship Information, etc.

The 'Paying for College' category of links. These are viewable at http://www2dev.lanecc.edu/future#PayingforCollegeWe conducted extensive surveys to learn how people categorize and name the resources we have on campus, to try and make these as intuitive as possible.

Events

During our research, we heard time and time again that you were interested in current, relevant content about what’s happening on campus. At the bottom of every page, you’ll find our two places you can learn about campus events and news.

The 25 Live Calendar Feed. There are no items displayed in this sample image.

On the left side is a feed from 25 Live, our Calendaring System. Each event is linked directly to a page with information about where and when that event is happening. This feed will update every time you visit a new Lane webpage, showing you the events happening that day (often, multiple events are happening, in which case two arrows will appear to let you scroll between them). If you’d like to see even more events, just click the calendar icon.

Dispaying a recent tweet about the beautiful weather we had on campus Friday.

On the right side are snippets from our Twitter account. You can use the arrows to scroll through our ten most recent tweets, or you can simply click the ellipsis (…) to go directly to our Twitter account.

Social Media and Applications

Links to the college map, Facebook, Youtube, and Twitter accounts, the Lane Titans website, our blogs site, Staff Email, and Moodle and MyLane.At the bottom right, in addition to links to Lane’s Social Media Presence, you’ll also find a link to the campus map, Moodle, and MyLane. If you’re an employee, you should know that the old ‘Groupwise for Staff’ link has been replaced with a single “GW” icon.

Footer Links

There were also a number of other links that we found visitors always needed easy access to:

In addition to some common footer links, there's also a link to the the campus on Google Maps and the main campus phone number.

These are in the bottom left of the site. In addition to these common links, you’ll also find the campus address (linked to us on Google Maps, in case you need directions), and the main phone number (if you’re on your cell, just click it to give us a call!).

Lost? Stuck? Can’t find something?

We can help!

Thank you!

Finally, thank you for all the feedback you’ve given us during the last few years as we put this together!

Finally

Remember, websites are always evolving. Although we’ve made some real, significant improvements to the Lane website, there’s still lots of places to improve. We’re constantly collecting analytics, getting visitor feedback, and looking for ways to making the website a better place.

Arts & Center

Two sites deployed today:

With those done, we’ve completed 91% of departments and 85% of all pages, and we have a new student worker hammering away on the remaining pages. He’s spent the entire day just working on Marketing and Public Relations pages – our biggest remaining chunk, with around 400 pages. Only 12 departments left to migrate!

Today’s deployment also marks another milestone for us: our first time having less than 200 404 (page not found) errors. That’s down from over 1000 a few months ago. Not bad, for over 10,700 pages of content checked.

Also, an important announcement:

Only 4 days until we go live!

Blog posts have been rather sporadic the last month or two while I’ve been hammering out the new theme. There’s no pictures to show yet, but after we launch (Sunday!), we’ll continue to refine and perfect our theme to improve support for all devices from IE8 on up. So expect news in the future about some of the details of our theme and some of its awesome features.