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/

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

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:

When 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:

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:

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

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.

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

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.

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

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:

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.

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:

This 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!