Coming Soon

In the mid to late 90s, you could count on most websites having some sort of under construction or coming soon message on them. Often as a gif. Mental Floss reports this was due to people seeing a website as a project, like a film or a book, that would be eventually completed. Website design reflected that process: outline your chapters, then fill them in. Hence the placeholder messages and gifs, just so people didn’t get confused when they got to an empty page.

But now we know the web isn’t like that. We now know the web to be a continual process. Content gets stale and you have to revisit. Images need refreshing. And while we can miss certain amazing pieces of 90s web design, I don’t miss the under construction gifs.

Site under construction image
Unless Bill Clinton is the president and you’re excited to replace your VHS tapes with DVDs, you’d better not be using an image like this on your site.

As of right now, the phrase “coming soon” appears on the Lane website 15 times. In 10 instances, buried in the text is a promise that more information on a certain topic is coming soon. On 4 pages, the phrase “coming soon” is the only text on the page.

“Coming soon” and “Under construction” are aspirational messages. They’re a way to tell a visitor that we’ve thought about content we know they’ll care about, and remind them to check back later.

But these intentions often don’t work. Remember those four pages that just have a “coming soon” message? Here’s the last time they were edited:

  • March 30th, 2020
  • February 20th, 2020
  • October 19th, 2018
  • October 16th, 2017

The other pages have a similar range of edit dates. “Coming soon” sometimes seems to mean forever. If I’m browsing the web and I that message, I don’t set up a calendar reminder to come back and check later. I move on.

Here’s a scenario. There’s some new program, and we know about 90% of the information. But we’re waiting on the state to tell us about the application process. We need to alert students to the program, but until the state gets back to us, we can’t tell them how to apply.

First option better than just saying “coming soon”? Add a date. Simply saying “information on the application process will be released by May 15, 2020” creates a whole different impression of the page. But what about when there’s no date?

A good option is to use that opportunity to drive people to another communications channel: “We’re currently waiting for application information from the state. Follow us on Twitter to be updated as soon as application information becomes available.” As an alternative to social media, this could be a great time to get an email list going, which you can repurpose later to promote other programs.

Sometimes that won’t be appropriate either. As a last resort, at least add a note about when someone should check back: “As of April 27th, we are yet to receive application information from the state. We will post an updated message here by May 11th.” Then you can keep updating that message, even just to tell people that you still don’t know anything new. Not only does that help to demonstrate to the visitor that there will actually be information here, it forces you to remember to actually go back and update the page.

Coming soon messages happen with new pages too. Someone will be thinking about how to redesign their site, and they’ll create some empty pages as placeholders, or they’ll be thinking about some cool new feature on their site. Except then something doesn’t work out, or some more pressing task comes up, and we end up with a page that just says “Coming soon”.

Solution? Always have your content ready first. We’ll actually be adopting this rule as a policy going forward for the web team. While we’ll be happy to talk with you about what a webpage could look like, we won’t actually create the page until you can show us some content first.

Over the next week or two, expect some nastygrams from Lori or me as we try to clean up some of these content gaps. And if you’re having trouble trying to think around a difficult “coming soon” situation, let us know. We’d love to help.

More accessible phone numbers

In the last post, I learned that not only does phone number format matter from an SEO perspective, but phone numbers can be really annoying to the blind. Depending on the screen reader, a phone number like 541-463-3000 could be read as “five hundred forty-one dash four hundred sixty-three dash three thousand”. That seems terribly annoying.

I started out trying to implement the solution at the end of this blog post, but then my curiosity got the best of me, and I got digging deep into CSS speech modules. It looks like support is limited even though they’re so cool! But the limited support means I’m going to stay away.

Instead, we’re back to the regular expressions replacements, using the Drupal custom filter module. Currently, we look for

/\((\d{3})\) (\d{3}-\d{4})/

And then replace it with

 <a class="telephone_link" href="tel:+1-${1}-${2}">${0}</a>

Over the last few days, we’ve changed that to grab each number individually:

/\(((\d)(\d)(\d))\) ((\d)(\d)(\d)-(\d)(\d)(\d)(\d))/

and replace it with something much, much longer:

<a class="telephone_link" href="tel:+1-${1}-${5}" aria-label="${2} ${3} ${4}. ${6} ${7} ${8}. ${9} ${10} ${11} ${12}">${1}-${5}</a>

It’s a bit of an ugly regular expression, but not only will this hopefully make a better experience for screen reader users, it’ll also introduce a new phone number format as currently recommended by the AP: 541-463-3000.

Does phone number format matter?

The other day, Lori pointed out that the phone number format on one of the mockups from iFactory was different from what we normally use. In accordance with AP style, we use (541) 463-3000. But the new mockups use the format 541-463-3000. And it’s pretty common to see phone numbers formatted with two dots: 541.463.3000. Does the format matter?

Yes. It turns out google is better at recognizing some formats as phone numbers than others. That post tested ten different formats, and found that the one we use and the one iFactory used are the ones best recognized by Google. The double dot notation? To quote the linked blog: “The phone number format you should avoid at all costs is #3: [###.###.###].

Of course, that doesn’t settle which of those two is best. So I checked to see if there are any accessibility considerations with phone numbers. There are, but they don’t relate to visible format. All phone number formats are terrible, and something like (541) 463-3000 would probably be read to a blind person as “five hundred forty-one [pause] four hundred sixty-three three thousand”. There’s a fix for that, using aria-label on a surrounding link, but that just adds something for my todo list, and doesn’t solve the debate here.

And that’s how I found myself at 10pm, doing a survey of college websites, to see how they format phone numbers:

541-463-3000 25 Harvard, UO, OSU, Washington, UC Denver, KSU, UMass, FSU, F&M, UCLA, MIT, Cal State Fullerton, Ohio State, Penn State, VT, Louisiana State, Wisconsin State, Yale, Georgetown, Alaska, Berkeley, Skidmore, Colby, Baylor, OHSU
541.463.3000 10 Portland State, Gettysburg, NYU, SNHU, WGU, U Phoenix, UVA, Middlebury, GA Tech, U Maine
(541) 463.3000 1 Gonzaga
(541) 363-3000 13 Idaho, UVM, Dickinson, Michigan State, Kentucky State, U Penn, UConn, Binghamton, Dartmouth, Cornell, Ithaca, Notre Dame, American
Mix 2 Rutgers, Princeton
This, for a variety of reasons, is not a scientific study. They’re just the first 50 colleges and universities that came to mind (and now you know I don’t follow college sports), and I didn’t check their style guide. I just looked at the first contact number I could find. As I said, not a scientific study. Just evidence of a person who’s too far down this rabbit hole to give up, far too late on a weeknight.
 
Of course, that left me with a clear winner. And I had to know why. From a blog post in 2006, I learned AP changed their preferred style, and Lane hasn’t kept up. A quick email to someone who owns a recent AP style guide verified it.
 
So we’ll probably go with 541-463-3000. The parenthetical format, (541) 463-3000, feels like it come from an age when area codes were mostly optional. And for many of us, me included, that’s no longer the case. Just please don’t use the dotted phone notation on your pages!
related XKCD comic
 

Progress on the Website Redesign

We’ve been working on the website redesign for a while, but I’m afraid that I’ve totally dropped the ball at posting updates to this blog. Things have been much busier than anticipated. Though I’m sure I’m missing some parts, here’s a quick overview of what’s happened so far.

Completed a brand and identity inventory

In order to help iFactory get to know Lane as a college, we answered a multi-page inventory covering basic items like what our roles are, questions on our market, our programs offerings, and even our guided pathways efforts.

Hosted an on-site visit by the iFactory team

Three iFactory employees came to campus to get to know us even better, eat some delicious Eugene food, and conduct focus groups with students and employees to learn more about what the campus thinks is important in the website. Afterward, they surveyed more than one hundred current students for their thoughts about our website.

Developed four personas to make sure our web content meets everyone’s needs

Well, at least as many needs as we can. Think of personas as pretend people which you can use to evaluate the site. For instance, we have Colleen, a traditional high school student interested in taking some classes at Lane to save money before transferring to a 4-year college. The other three are even more complicated, with tricky backstories. While we’ll never capture every unique situation at Lane, our personas are different enough to make sure we look at every piece of this redesign from at least four very different perspectives.

Evaluated six different mood boards to see which images and designs most feel like Lane

Having collected a lot of information about the college, we were presented with six different mood boards. You can think of these like Pinterest boards for the college, with different collections of pictures and screenshots of other college websites. We provided feedback on each one, and explained why they did or didn’t feel like Lane.

Evaluated three different mockups of potential homepage elements, to get a feel for the design language which will eventually build our site

From the mood boards, some simulated pieces of a  new site were created for us to critique. We provided feedback again on which directions we wanted to pursue.

Provided feedback on two rounds of information architecture for the new site.

While working on some of the design tasks, we were presented with two iterations of an information architecture (IA). The IA is how the site is going to be structured, and starts to provide some structure to the navigation on our site. While we’re pretty confident the IA we’re going to use is roughly correct, it’s still being polished.

Completed a content inventory

We were provided with a spreadsheet of more than ten thousand different URLs that are a part of the Lane domain. While they weren’t all part of the Lane website, they were each linked somehow from the Lane website and a part of our domain. Our job was to determine what to do with each page. Was the content correct? Could it be merged elsewhere? Should it be archived? This task took several weeks of near full time work, and resulted in our cleaning a lot of content. Due to the sheer number of pages to look at, we weren’t able to consult with everyone on each page, but I did talk to dozens of people about their content throughout December and January.

Provided feedback on several rounds of wireframes of possible college pages

One common step in website development is to draw a rough layout of content, without putting any color or pictures in it. The goal is to get you to stop thinking about the appearance of the content and instead think about the layout and the flow of the text. Some wireframing software will even make the lines look like they were drawn with a crayon or thick marker, just so that you know immediately that we’re just roughing in content elements.

Evaluated two different homepage mockups (with help from 44 of you!) to see what direction we want to go with the college homepage.

This is when things got really exciting. Finally, in the last month, we’re starting to see some fairly polished concepts of what the new homepage might look like. We’re still finalizing some of the language, so they’re not quite ready to share, but we’re getting close.

What’s next?

We’re currently working through wireframes and mockups for several other types of pages, and have started preliminary conversations with their developer. Soon, we’re going get an outside perspective on the actual content of our website, and see where we have some gaps. Quite a bit of time this spring is likely to be occupied with content development, since we know we have some content gaps.

I’d also like to share the first change that we’re confident that is going to impact our web editors. On the current site, almost all of your content is in one field called “Body”. This is great, in that it’s very customizable, and terrible, in that it’s very customizable, leading to broken, inconsistent pages. Best practices developed a few years after our previous launch suggest  providing reusable components that you can plug into any part of your site: a slideshow here, a callout quote there, some text over there. They also suggest making them remixable, so you can lay out your page however you’d like, using a common language of elements, letting your page be instantly familiar to everyone as a Lane page, but also customized to your content.

We’re going to be adopting that approach as a part of this website launch, which I hope will help meet some of the website customization needs I haven’t been able to meet over the last few years!

More details soon, honest!

Let’s talk about FAQ Pages

As part of our website redesign, over the last two months I’ve visited each and every page on the Lane website. As part of that process, we’ve cut a lot of pages, and at just 3413 nodes, the Lane website is now smaller and more svelte than it was when we launched it back in 2011 (and that includes more than 100 nodes that aren’t even real pages!).

But also as part of that process, I discovered that there were two categories of pages that had a lot of pages, and a lot of good information, but not necessarily a lot of value.

The first was contact pages. By convention, we try to have a page, usually located at a url like lanecc.edu/department/contact, which contains contact information for a department. This is an important page, and the way we structured things was an attempt to bring some standardization to the Lane website. But it also resulted in duplicate information (contact information is sometimes on the department homepage, and some departments also created employee directory pages). We’ll likely to contact pages differently next time around.

The second chunk was frequently asked questions pages. There are probably forty or fifty pages on the website that are full of FAQs. And while often the information in them is helpful, just by presenting that information in the FAQ format we may be making it less likely students will find and understand what we need to tell them.

For a good overview of why FAQ pages can be less helpful than other  content, you should read this A List Apart article. A brief summary of  issues:

  • Duplicate content – many times information on a FAQ is contained elsewhere
  • Lack of order – FAQ content doesn’t tend to flow question to question, making it harder to understand and process
  • Repetitive structure – since all the content gets phrased as questions, you’re often introducing extra words to the page that get repetitive to read
  • Increased cognitive load – often a student will come to your page with a specific question, phrased differently from how you’ve asked it, resulting in increased processing to determine if your question matches their question

I also think FAQs are problematic for people that aren’t searching for an answer to a specific question. If you’re just exploring a site, trying to determine if a program is for you then a FAQ often fails to guide you through content in a meaningful way.

If you happen to be stuck at home with some time to do website edits, one thing that would be really helpful is working on your FAQ page. Here’s my suggestions for slimming down, or dumping, your FAQ:

  1. Read through your questions, and make sure you still feel like each question is important. If one isn’t important, remove it. You might be surprised by how much old content is out there.
  2. Find any questions in your FAQ that have answers elsewhere, whether on your site or another page on our website, and get rid of them. Reducing duplicate content is possibly the most helpful thing we can do. We’ve found that many people have tried to be helpful by copying content from elsewhere on the website, ostensibly to simplify things for their audience, but almost always this ends up making the website bigger and more confusing.
  3. Find any FAQ questions that are related to some other page on your site, and incorporate them into the content on that page. For instance, if you have a question like “What prerequisite courses do I need to take before applying to this program?”, consider moving that content to your program application page under a heading “Required Prerequisite Courses”
  4. Are there any groups of questions that are related, and which could be combined into just a paragraph or two of more effective content, either on a new page, or as a new section on an existing one?

After all that, you may still be left with some FAQ questions which just don’t fit in anywhere. And that’s ok. Sometimes a FAQ provides the right solution. But even just shortening the length of your FAQ page can help students to better find information and improve the quality of your other pages.

As always, if you’re working on something like an FAQ and have a question, send us an email at webmaster@lanecc.edu.

Kicking off a Website Redesign

With the start of the new school year comes to the launching of our website redesign project! We’re pleased to announce that over this year, we’ll be working together closely with iFactory, a Boston based company specializing in higher education and non-profit websites, to completely re-envision what Lane’s front door on the web looks like.  iFactory has done a lot of college websites, including Santa Barbara City College, Central Wyoming College,  and Prince George’s Community College, and has already impressed us with their transparency and project management skill.

Since our last redesign, it’s become clear that the front page of an effective college website needs to be oriented to the needs of prospective students. The other primary audiences (current students and employees) need to have a better home online which more directly serves their needs, and which integrates the tools they most commonly use. So as part of this launch, we’re hoping to move some employee-centric pages (like CPDT, FPD, Budget, and others – there’s about 1000 pages in total that are really only important to employees) to a more employee oriented site, where we can offer greater flexibility in terms of content editing and viability. 

And we’re interested in your opinions on the college website. Some folks from iFactory will be coming to visit soon, and they’ll be conducting some interviews with folks around campus. But of course they won’t be able to talk to everyone. So if you have any feedback on the website (and remember, we’re just talking about www.lanecc.edu here – myLane and Moodle are outside the scope of the redesign), please email us at webmaster@lanecc.edu. We’ll be sure to pass that feedback along and use it as part of the research phase in this redesign. 

Accessibility and Pizza

This is just a quick post to share some news about the ever evolving legal web accessibility landscape. The LA Times has a nice write-up of Robles v Dominos, and how by declining to review the 9th Circuit ruling, we’ve conclusively determined that the Americans with Disabilities Act does apply to websites and apps.

While this doesn’t impact the college directly – we were already subject to website accessibility requirements – it does serve as a great reminder that digital accessibility lawsuits are on the rise, and we need to continually work to ensure what we do is accessible.

And remember, that work doesn’t include just websites, but all things posted online, on any website used in relation to Lane. PDFs have some pretty good checking tools that are worth looking at.

Posts that spark joy

The other day, I saw this blog post about tidying up your website using the Marie Kondo method. While I think peak Kondo-mania is likely behind us (unless she’s renewed for a second season, of course!), as our date for content migration approaches (probably late this upcoming spring!), that post got me thinking about how her tidying principles can help provide a good frame for tidying and improving websites here at Lane. There are six principles:

Commit yourself to tidying up

Like any other tidying project, working on cleaning up your website is going to take some time. The most Kondo-like advice, of course, is to carve out an entire afternoon. But at the very least, try to find a regular time to dedicate to tidying your website and cleaning out the ROT. Even an hour every other week is enough time to make a considerable impact.

Imagine your ideal lifestyle

If you spend a minute imagining what your dream website would look like, I’d be willing to bet a lot of your dreaming is related to the look and feel of the website. Don’t get me wrong, website appearance is important. But design alone is never enough to capture, retain, or influence an audience. As you imagine your dream website, I’d encourage you to think first about what your website goals. What specific behaviors are you trying to influence through your content? What actions are you trying to get visitors to take?

The Lane website has a surprising number of pages that aren’t really about getting anyone to do anything, but are instead about documenting internal processes, documenting old projects, or displaying mandatory information. Some of this is unavoidable. Our privacy statement isn’t about to be tidied up. But imagine a page that’s just a photo gallery. They may be compelling photos in that gallery. But because they’re buried in a gallery on their own, no one is going to find that page and take the time to look through the photos. Instead, choose some outstanding pictures and work them directly into your content. If you really need to have a gallery, use a dedicated photo site (like your Lane Google Photos account), and link to it.

As you imagine, try to think about how all the pieces of your online presence – photo, video, social, and copy – support each other and to tell a compelling story and influence an action. Think about how you can show, rather than tell.

Finish discarding first

Our largest pieces of the site have over 130 pages, and hundreds of attached files. Not only can that seem overwhelming, but thinking about all that content can make your head spin. By discarding first (even just a sentence here or there!), you’ll get a better understanding of your content and where the gaps are, and maybe spot some opportunities to combine pages into one, more cohesive page.

Tidy by category, not location

The advice in that blog post is spot 0n – don’t just think about if you need this particular page, think about if you need all the pages like that. So, for instance, don’t just think about if you need a page describing Underwater Basket Weaving 201, which hasn’t been run in three years. Think about if you need pages describing your Underwater Basket Weaving courses at all – after all, the course descriptions should be in the catalog, which got a pretty spiffy update this year.

Follow the right order

One of the Google Analytics reports we’re happy to provide you is a page popularity report. For each of your pages, we can help you discover how many times it was viewed, how many times it was viewed by different people, how long they were on that page, and if it was their first or last page. I’d recommend you use these reports from the bottom up: start with your least popular pages. Since you already know they’re not being seen as often as you probably wish they were, you already know they need to change. Look elsewhere on your site to see if there’s a place they can fit in or, even better, see if you can get rid of them entirely. You can email Lori or me for help getting one of those reports.

Find joy

This one is complicated. Because the web isn’t your house, and how much a page brings you joy isn’t really the goal. The real goals relate to helping increase access to education and helping students meet their educational objectives. So find joy in what that page does, and in the goals it helps accomplish. If you can’t relate that page to a goal, thank it for it service, and say goodbye.

 

Understanding WCAG 2.1 – 1.3.4 Orientation

The very first success criterion we’ll look at is 1.3.4: Orientation (level AA). Remember that WCAG 2.1 extends on the work already done in 2.0, so because there was nothing added to parts 1.0, 1.1, or 1.2 we can skip those. Here’s the full text of the new criterion:

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.

This is one that definitely feels like a best practice in user experience. Let’s take a look at an the Garmin Connect app, which both follows this standard really well and really poorly at the same time.

Here’s one of the screens showing my steps for the day on my phone:

A screen, showing various widgets listing step information
Why yes, I did choose a day when I met my step goal handily.

When the phone is in portrait mode (the way most of us hold our phones most of the time), everything looks good, although the astute reader will note that app violates success criterion 1.4.1). But here’s what happens when we flip that onto its side:

It's the same picture, just sideways.When we’re in landscape (the way most of us should shoot videos on our phone), everything is sideways. It’s, honestly, terribly annoying, if not a little lazy. If those boxes were to all rotate with the screen, and maybe just be oriented a little differently, the screen would be just as useful, and provide the exact same information.

But the connect app also does a good job taking advantage of the different screen orientations to show different information. Here’s another example from an activity a while back:

Showing some statistics and two small graphs
It’s a little embarrassing how far back I had to look to find an activity.

But this time, when we switch to landscape, we get a different screen:

A close-up, just of the two graphsThe developers over at Garmin clearly felt that those graphs only make sense in landscape, where they can be a larger while maintaining proportion. I’m not sure I fully agree – sometimes activities are so long you need a monitor, not a phone – but they clearly feel that the specific screen orientation is essential to the information being displayed.

If you’re leaving out screen orientation as a part of your media queries when developing for the web, then you’re probably in good shape. And, on the topic of good shape, feel free to send me a step challenge on Garmin Connect. I’ve got a camping trip coming up this fall, and for once I’d like to huff and puff less than the other folks with me.

Looking for the rest of the posts in this series?