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.

 

Responding to an accessibility concern

At the beginning of the month we changed our normally static homepage to include the following animated gif:

Watercolor image of a fountain on campus, showing a bunch of leavesWe tend to swap the homepage image to be an animated gif about three or four weeks before classes start, and link it directly to our registration platform. While these images can be pretty, after you’ve watched them for a couple of minutes, they start to feel really annoying. And, invariably, after a week or so, the first complaints show up. But here’s how we respond:

Traffic graph for that image, showing a sizeable bump in the days after we launched it, with a dip lin the weekendThose images drive hundreds of clicks in the weeks after we launch them. So, annoying or not, if they’re achieving their objective, that’s what’s important, right?

But then we got a complaint email that wasn’t about the image being annoying, it was about the image being distracting. And that got me thinking – they were probably right. Motion can negatively impact people with various cognitive impairments.

Before we go into how we responded, let’s talk a little bit about why we’re using a gif. I mean, the gif format is 30 years old. Almost everyone has moved on to web video. But when we launched the updated website, we were stuck supporting all the way back to Internet Explorer 6. And for Internet Explorer 6, 7, and 8, there was no non-flash video option. So we build the website with support for images, but often not video (though we’ve been adding some support, it hasn’t been across all parts of the site).

WCAG 2.2.2: Pause, Stop, Hide

Stuck with gifs, I tried to resolve this as quickly as possible, since there was someone out that I knew was negatively impacted by the image. I quickly skimmed the WCAG 2.0: 2.2.2 standard, but it turns out this one is a little more complicated than I first thought. Here’s the full text:

2.2.2 Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information, all of the following are true: (Level A)

  • Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and
  • Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.

On a first read, I assumed this success criterion didn’t apply. After all, there’s no moving, blinking, or scrolling information. Leaves are moving, but text is not. But, as many high school teachers I ignored told me, always read all of the instructions.

Attempt 1 – the programming solution:

My first thought was to do some searches and see if I could find a way to quickly add a pause button to animated gifs, since that would be an easy, site wide fix. I was definitely reaching here, but it turns out it’s a somewhat viable option. This solution involves creating a png of a single frame of the gif, and swapping them on click. That felt problematic to me. While it might work if you click to pause the image, because our image is linked to our registration platform, I’d need to add an actual button over the image somewhere. That can be rather involved, with making it cross-browser, all screen size friendly, and ensuring it’s sufficiently accessible itself.

Attempt 2 – reduce complexity:

With the button ruled out, I thought that the easiest thing we could do would be to just remove some complexity from the image. We could make the leaves go slower, and maybe remove a few leaves. After a bit of work, our student designer put together this image for us within a few hours of the initial complaint:

The same image, but with about half as many falling leavesThat image has about half as many leaves, so it’s a lot less complex. And the leaves stay off the screen for a bit, meaning there’s always time without motion on the screen.

But while I was able to confirm the reduced complexity image solved the problem for our user with the complaint, I couldn’t shake the feeling that I really ought to read the entire standard. 

Returning to the standard

It turns out that if I’d just scrolled the page down a little bit, I’d have seen the information in the very first sentence. Here it is:

The intent of this Success Criterion is to avoid distracting users during their interaction with a Web page.

While I still think the success criterion needs some edits to be more clear about what constitutes “information”, certainly the purpose of the standard is to reduce distraction. And both Penn State and WebAIM agree: animations need to be very short or user controllable.

Attempt 3 – short animation:

The next easiest fix was to turn off looping on the animation. That way there’s still enough motion to capture attention, but not enough to distract. Here’s what we came up with:

The same image, but with looping turned offOf course, there’s some some downsides. For instance, say you embed a gif halfway down a page, and it takes more than 5 seconds to scroll there (like this page! If you’re not seeing motion, reload the page and scroll quickly). The visitor will never see the animation (note – this is fixable with lazy loading of images, but those weren’t a thing when we built this site, and we’ve had trouble grafting them on). But for us, with the image essentially at the top of the page, it’ll probably work. This also doesn’t work for cinemagraphs, which depend on perfectly looping images to create the effect of slight motion in an otherwise still world.

Next steps:

After we had an actual fix in place, we did a quick check across the entire site for other animated gifs, and found only one other place where there was a problem. That image has since been removed completely.

We’re currently exploring finally adding video support for some of the last areas of the website that don’t support it. Video would not only provide a way to pause animation, it would also allow for much higher resolution images and more complex animations. But fitting video into pages is also more complex, and if we’re unable to find a way to do what we need without a lot of work, we might end up waiting for the next iteration of the website. More details on that soon!

Correctly Linking Images

We all know how to make an image accessible. And we all know how to make a link. But how do we make them play together? How do we do something like this:

Download the Graphic StandardsSince we’re good people, we add alt text describing the image, right? Maybe something like “Graphic Standards Cover”? That’d give us (overly simplified) HTML like this:

<a href="standards.pdf"><img src="cover.png" alt="Graphic Standards Cover"></a>

But that’s actually not so great for accessibility. A screen reader will read “Graphic Standards Cover”, which doesn’t make the action (downloading the standards) clear.

My first instinct was to add a title to the link. But the title is almost never read by a screen reader, and may even make things worse. The reader will read the alt text. To make it clear what the link does we need to change the alt text:

<a href="standards.pdf"><img src="cover.png" alt="Download the Lane Graphic Standards"></a>

Now we’ve solved the accessibility problem, but we may have created a user experience (UX) problem. Scroll up a second and look at that image again. Did you know that you should click that picture to download the PDF? Or did you think it was just a picture? We can’t even rely on people discovering the picture is linked by hovering over it with the mouse and the cursor changing: it isn’t possible to hover with your finger on a phone.

Sometimes it may be immediately clear that a picture is clickable from context. If it isn’t we may need to add some help:

<a href="standards.pdf"><img src="cover.png" alt="Download the Lane Graphic Standards">Download the Lane Graphic Standards</a>

Now we’ve solved our UX problem, but we’re back to an accessibility issue! A screen reader will read the alt text and the link text. It’ll be like the same sentence is printed twice. The solution to this is to have explicitly empty alt text:

<a href="standards.pdf"><img src="cover.png" alt="">Download the Lane Graphic Standards</a>

Explicitly empty alt text will be ignored by the screen reader entirely, while missing alt text can cause unpredictable or even negative behavior.

You could also go back to adding descriptive text as the alt text. In our example above, that isn’t appropriate, since the cover is really just decorative. But consider another example:

A cat chewing on a monitor. Link opens a larger image.That image is linked to the full size picture. Describing the contents of the picture is completely appropriate. But remember that most screen readers can pull links out of a page, and let someone navigate from link to link directly. For that reason, our alt text is “A cat chewing on a monitor. Link opens a larger image.” The alt text serves double duty.

This post does not, of course, mean it’s always appropriate to use an image. It’s important to avoid off-brand or inappropriate images. It’s important not to add so many linked pictures that your page hierarchy gets lost and navigation gets more difficult. And if something can be done in CSS, it probably should be. It wouldn’t hurt to use images as pictures as rarely as you can.

If you’re not sure what to do with links at Lane, get in touch! We’re always happy to help.

Using all Capital Letters

An instructor asked me the other day, “How does a screen reader read text in ALL CAPITAL LETTERS?”

I didn’t know, and through it was a great question, and had to figure it out. Let’s start with some sample text:

It’s VERY important you remember these:

  • USPS
  • NASA
  • DVD

There’s four words in all caps there. Let’s look at each one, from the bottom to the top:

DVD is an initialism, meaning you read each letter in it, like CPU or FBI. NASA is an acronym, meaning you read it as a word, even though each letter stands for a word. USPS is another initialism. But VERY is just a word, with all capital letters being used for emphasis.

Of course, it’s wrong to use capital letters in this way – you should instead be using an em or strong tag (though which one is complex, and I didn’t find the examples in the specification very helpful). But the instructor’s question wasn’t about what should happen, it was about what does happen. How can a screen reader know which of those words it should treat as words or acronyms (which are like words, in terms of pronunciation), and which it should treat as initialism (and read letters instead of the word)?

I ran each of the examples through the say program on my Mac, and here’s what I got (sentence case was pronounced like lowercase):

Word Uppercase Lowercase
Very word word
USPS letters word
NASA word word
DVD letters letters

There’s some interesting logic there. I think this table shows my Mac will always read dictionary words as words (like “very”). And I think it shows that my Mac also has a list of known acronyms and initialisms, so it knows how to read those. For words that aren’t in either list, but also aren’t in the dictionary (like USPS), it reads all capital letters as initialisms, but lowercase as a word (a reasonable assumption, since most of the time it encounters words that aren’t in the dictionary, it’s probably due to the lang attribute not being set correctly.

Of course, this is just say on my Mac, which isn’t even a screen reader. WebAIM has some general rules for how screen readers read things, but it isn’t really predictable how a screen reader is going to pronounce words in all capitals. Pronouncing typographic symbols is hit or miss as well — some, like @ and % are read correctly. But most others (like the parenthesis, or the mdash in the previous sentence) aren’t read universally. Rare punctuation, like the interrobang (‽) may not be read at all.

I was hoping that abbr would influence how screen readers pronounce words, but that doesn’t appear to be the case (and, if you’ve been around HTML for a while, remember you’re not supposed to use acronym at all — though it probably wouldn’t do anything here anyway).

What does this mean for you at Lane?

Use the abbr tag to specify acronyms and initialisms if possible. Even though screen readers won’t necessarily change how they handle pronunciation, abbr with a title attribute makes it easier for anyone to understand meaning. Try hovering over this: NASA.

If you want to use capital letters for emphasis: don’t. Instead, use either an em or a strong tag, depending on if you’re trying to emphasize something or make it note that it’s more important than surrounding text. And, of course, never use strong in place of a header.

If you want to use capital letter for aesthetic reasons, then you should use a bit of CSS to make it happen:

.all-caps {
  text-transform: uppercase;
}

Screen readers ignore CSS, so this use is entirely for presentation. Just make sure you don’t confuse presentation with meaning.

I ran a quick search on our website for pages that have a lot of capital letters all in a row:

SELECT entity_id
FROM   field_data_body
WHERE  body_value REGEXP BINARY '[A-Z ]{10}';

There were 748 results. Editing 748 pages obviously won’t happen overnight, and on each one we’ll need to determine if we should instead be using a header, a strong, an em, or just normal text. For now, I’ve queued a task for us to tackle in the future, but if you’re editing your page and notice some misuse of capital letters, we’d be forever appreciative if you’d fix it.

A couple no-nos

I’m taking a break from our accessibility posts this week to instead post on a couple bad practices I spotted across the website while trying to meet our website goals.

&nbsp;

Many typewriters, especially less expensive ones, used the same amount of space for each letter – that way, the platen of the typewriter would advance the same amount no matter what character you typed. Your page would end up being monospaced  – here’s an example on screen using a monospaced font:

Lane’s mission is to transform students’ lives through learning, but how do we know this is so? To know, we must develop clear learning outcomes and evaluate our curriculum and pedagogical practices regularly to ensure a quality learning environment. Assessment of student learning focuses on students’ attainment of knowledge and skills at the course and program or discipline level. This is accomplished by infusing the curriculum with general education learning outcomes intended to prepare students for success in the 21st century.

Because each character is the same width, it can be hard to distinguish sentences. So people taught to type on typewriters were often taught to include a second space after the period, like this:

Lane’s mission is to transform students’ lives through learning, but how do we know this is so?  To know, we must develop clear learning outcomes and evaluate our curriculum and pedagogical practices regularly to ensure a quality learning environment.  Assessment of student learning focuses on students’ attainment of knowledge and skills at the course and program or discipline level.  This is accomplished by infusing the curriculum with general education learning outcomes intended to prepare students for success in the 21st century.

As computers and printers become commonplace, new fonts were available and proportional spaced fonts, which had always been used in professional printing, came back into use. Here’s our sample paragraph again in a proportional spaced font:

Lane’s mission is to transform students’ lives through learning, but how do we know this is so? To know, we must develop clear learning outcomes and evaluate our curriculum and pedagogical practices regularly to ensure a quality learning environment. Assessment of student learning focuses on students’ attainment of knowledge and skills at the course and program or discipline level. This is accomplished by infusing the curriculum with general education learning outcomes intended to prepare students for success in the 21st century.

Every letter gets the appropriate amount of horizontal space. Narrow letters, like i, l, or I get much less space than wide letters, like W, M, or G. Characters like the comma or period are built with an appropriate amount of space after them already. So what happens if you were trained on a typewriter and have been typing double spaces your entire life? Right now, you get this:

Lane’s mission is to transform students’ lives through learning, but how do we know this is so?  To know, we must develop clear learning outcomes and evaluate our curriculum and pedagogical practices regularly to ensure a quality learning environment.  Assessment of student learning focuses on students’ attainment of knowledge and skills at the course and program or discipline level.  This is accomplished by infusing the curriculum with general education learning outcomes intended to prepare students for success in the 21st century.

Let’s put aside that the font wasn’t designed to work with double spaces like that, leading to it looking like there’s holes in the text, and increasing the chance that our text will have rivers (in other words, it looks funny). Let’s instead talk about how HTML gets double spaces to work.

HTML wasn’t designed to support two spaces after a period, so browsers automatically collapse repeated spaces into just one. So to create to spaces after a period, as I did in some of the examples above, I had to insert a non-breaking space character. It’ll appear as a normal space when you’re viewing it, but if you were to look at the source of the page, you’d see &nbsp; – & in HTML means we’re about to start a character entity of some sort, the nbsp means non breaking space, and ; finishes the entity.

Non-breaking spaces act like invisible letters, and have some weird effects. They’re designed for places where the text shouldn’t break – that is, move onto two lines. So say we have a brand name, like ACME Products, that we don’t ever want to be on two lines. We’d put a non-breaking space between, like ACME&nbsp;Products, and then no matter how we resize the browser, we’ll always see those words together: ACME Products.

If you use them in regular text, you do weird things. If you have a space, followed by a  non-breaking space, your non-breaking space might become the first letter in a line, and you’d have something like the second line of this paragraph. It just looks weird. If you’re not seeing it, here’s a picture (since you’ll only see it at certain widths):

screenshot of the text of the previous paragraphYou might also have trouble centering things:

This line should be centered 

This line is actually centered

I doubled the size of the text to make the problem more pronounced, but it’s true at any size. Since non-breaking spaces are invisible unless you know to view the source, they can be an endless source of frustration when you try to lay out your page.

There’s a place to use the non-breaking space, but almost everywhere it’s used on our website it’s used incorrectly. This week, we’ll be adding a filter to remove double spaces after periods when when the page is rendered. This is an imperfect solution, since the non-breaking spaces will still be present in the editor, and this won’t fix other problems, like the text centering problem above. But it will make our website look a little more uniform.

Horizontal Rules

The HR tag used to be strictly a presentation element – it was there so you could draw a horizontal line across your page. While HR’s are still usually rendered as a horizontal line, they now have a semantic meaning. From MDN: The HTML <hr> element represents a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section).

If your website uses HR’s to break paragraphs that have very different subjects, you’re in great shape. But if there’s another element that might indicate that break, then you shouldn’t use the HR. So, for example, if you have a series of paragraphs, each labeled by a header, don’t use an HR since the headers act as the break. Similarly, an HR should never be the first thing in a section (like pages that start with an HR), because there’s nothing to break at the start of a section. And you should never have more than one HR in a row.

We’ll be removing some HR’s from the site in the coming weeks where they’re not used properly. If you’d like some more info on HR’s, you can go into depth in the specification.

Understanding WCAG 2.0: 2.4.5 – Multiple Ways

The next standard we’ll explore in our series on understanding WCAG 2.0 is 2.4.5, Multiple Ways. This standard is required for WCAG level AA compliance, which is part of what Section 508 requires. Here’s the complete text:

2.4.5 Multiple Ways: More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process. (Level AA)

At first glance, it might be surprising this is even an accessibility guideline. But the WCAG 2.0 guidelines are designed to help everyone use and navigate the web. And this guideline is all about helping people navigate the web.

There’s two pieces to this guideline. The first requires two different ways to get to a given page. That’s not a hard guideline to meet. The easiest way is to have each page linked to from another page as well as each page accessible from a search engine. That’s what we strive to do on the Lane site. Orphans, pages that aren’t linked at all, directly violate this guideline (though we’ll come back to them in a minute).

Another option is to use a site map. But be careful with this one. The SEO definition of a site map is something more akin to our sitemap XML files. But those pages aren’t accessible at all, nor even intended for humans to read. The WAI has a great example of a human accessible site map that does help to meet this guideline.

The second half of this guideline deals with an exception. There’s sometimes information that needs presenting as a result of a process, which isn’t appropriate for people to find any other way. For example, say there’s a confirmation page which appears after you register for a class. It isn’t really appropriate for this page to be found through search or even to be linked at all. It should only be seen in the context of successfully registering for a class.

A couple places you should look out for issues. If your server has a robots.txt file that prevents search engines from indexing pages, remember that search engines may not index your page, so beyond linking to your page, make sure you offer a second path (either a separate internal search engine, a site map, or one of these other techniques). Also be alert to pages that you might have excluded from your sitemap file (the SEO kind), since those pages are a lot less likely to show up in search. And watch out for pages behind authentication, as they’re usually not indexed by search engines, and due to permissions levels can be hard to integrate into site maps.

If you’d like to read more about the multiple ways guideline, you may also be interested in these techniques, which provides examples and more detail.

Interested in more? Check out the listing of all the posts in this series.

Goals for 2017 on the web

There’s two months left in 2016, and the web team wanted to set a couple goals for the Lane website before we close out the year. An important part of our mission is to keep our pages as readable and relevant to our visitors as possible. One way to do that is to prevent and remove ROT – redundant, outdated, or trivial content on the web.

Redundant Content

Redundant content is dangerous content. If the same content appears in multiple places online, it’s only a matter of time until only one place is updated and the content is out of sync. Then we’re providing conflicting messages. Beyond that, redundant content makes it confusing for search engines to know which pages to serve. Pages are scored by search engines primarily by the number of other pages that link to them.

Here’s a (super simplified) scenario. Say we have two different places that describe our refund policies, and both of those pages link to the same page of meeting notes about changing those policies. Sites, both internal (on the www.lanecc.edu site) and external (including sites run by other organizations, but also places like moodle), link to a page on refund policy. But some link to the first place, and others link to the second page. When you search for refund policies, what do you get in your results?

We can’t be sure – and you might even get the PDF, because it’s getting some page rank from each of the two other pages. But if we had that content on just one page, everyone would link to it correctly, letting search engines value it correctly and making search better for everyone.

Outdated Content

That outdated content is an issue should be obvious, but even content that’s just several years old and no longer relevant can be an issue. We have 732 pages that haven’t been updated in over 4 years. Some of that content has certainly changed since then, and is now incorrect. It’s going to be a tremendous effort for us to go through and figure out which of those pages need updating, and which can just be removed.

Trivial Content

Trivial content is a difficult one. It might be content that you find really important – say, a photo album of an event a few years ago. But if that content isn’t helping the mission of your site and of the website as a whole and isn’t required to be there by law or by grant conditions, ultimately it’s trivial and should probably be removed..

Trivial content doesn’t need to be an entire page. Sometimes it’s just a line, like “Welcome to the Underwater Basketweaving Department!” that purports to make the department look friendly but falls flat. This excess content confuses search, and makes it dififcult for people to find what they need, ultimately leading people to feel like website is cluttered and difficult to navigate.

Long Content

We also have a problem with content length on our site. Sometimes pages are necessarily long, like COPPS policies (though there’s certainly some of those that could use help!). But often pages are so long they make it difficult to find what you need. Due to the way we store our pages, I don’t have an easy way to count words on pages, but I can count letters. These aren’t perfect counts, because they include some of the HTML that helps to style the page, but they’re a great estimate. I did a count of our pages last night and found some crazy pages: 50,000 characters. 80,000 characters. 90,000 characters. If we use an average of 6 letters per word, that’s as much as 15,000 words on a page! Positively insane. How can students find what they need?

Our Goals

As editors on the website, we’re enlisting you for help! Here’s the goals we’d love you to help us meet this year:

  1. Reduce the total number of pages on the Lane website by 5% (from 5768 to 5475).
  2. Reduce the number of pages with more than 20,000 characters by 20% (from 193 to 155)
  3. Reduce the average character count of our pages by 10.5%, from 4803 to 4300.
  4. improve the average age of our pages by 6 months, from roughly 24 months old to 18 months old.

Except for the total page count, these goals and statistics are actually calculated against what we call a “basic page”. So these don’t include news releases, COPPS pages, or the landing pages.

On December 1st, we’ll post an update with how we’re doing on each of the goals, then check in again on January 1st to see if we met them.

And of course, if you need any help getting back into editing your pages, let us know! Just contact Lori, Jim, or me and we’ll be happy to help.

 

Writing for Readability and SEO

This is the last post in a series about rewriting content. Though you’re welcome to read it by itself, you might want to read the first four posts first: One, Two, Three, and Four.

Now that we’ve fixed our page so that it’s easier to read, we need to make sure it’s easy to find. When we talk about making things easy to find, we really mean making them easy to find by Google, as more people find our content on the website via Google than they do any other source. Writing easy to find content is one aspect of Search Engine Optimization, or SEO.

Writing for SEO

Soon, we’ll be adding a new tool to the Drupal edit interface to help you perform a keyword analysis. To use it, you’ll simply edit a page, then scroll all the way to the bottom:

The Drupal content analysis box

After we turn it on, if your user has the correct role, you’ll see that Content analysis tab. Let’s start with doing a Quick SEO analysis, and put a phrase in the box. I’ll use “Where to print”, since that’s something I think people might google to find out where to print. Then click the button.

Content Analysis Results page

Your results will pop over the page, and be very hard to miss. But don’t worry – if you accidentally close that popover, the results will still be in the page. Let’s look at each of the sections in the results.

Page Title – The title is probably the most important place to put important keywords, but it’s important not to make it too long. Our current title is “TitanPrint”. That’s also something that people might google, especially as we try to message out about TitanPrint. So I’m ok with it, and we’ll leave this alone.

Body – The body is the second best place to put your important keywords and phrases. We’re missing my phrase entirely. So I should probably fix that. Let’s rework the second to last sentence:

You can use your print allocation at locations around campus.

And instead we can write:

Curious where to print? View print locations to across campus.

And of course we’ll link print locations to to the proper page.

Meta Keywords – We don’t use these. They’re generally ignored.

Meta Description – When you search for something, Google helpfully tries to use a snippet of the page to give you a preview of what’s on the page. If you’re finding that snippet to be unhelpful, you can enter a description that Google may use instead. If you’d like to enter one, check under the “Optional Fields” tab at the bottom of the page, and fill out the Search Engine Summary field.

Readability

In the popover, there was another tab labeled readability, which provides a series of different reading level scores. Depending on your content these may vary wildly, so it’s usually best to just use the average.

The reading level content analysis interface

Our reading level has an average of 8.3 – pretty close to what HemingwayApp told us. This interface isn’t as friendly as HemingwayApp, and doesn’t provide live feedback, but it saves you a lot of copying and pasting, so we encourage you to give it a try.

That’s it!

We’re almost done testing content analysis, so hopefully by the time you read this post you’ll be able to use it. If you have any trouble finding it, or using any of the tools we’ve covered in these posts, please, please, please contact us at webmaster@lanecc.edu and we’ll help you out. Also don’t hesitate to contact us for additional help with SEO – we have a bunch of information from Google Analytics that we’d be happy to share.

And be on the lookout for some upcoming sessions where we rework some content together, live, in person. Keep checking the announcements box on the Drupal dashboard right after you log in.

Hard Sentences & Tone

Need a review? Check out parts one, two, or three first.

While we’ve made some big improvements, our page still sounds institutional and still has some pretty complex sentences in it. Let’s start in HemingwayApp (here’s the text, if you’d like to follow along)  and check out our list of things to be concerned about:

  • 6 hard to read sentences
  • 2 very hard to read sentences
  • 5 uses of passive voice

Let’s do the very hard to read sentences first, since they’re our biggest problem. Here’s the first:

Print jobs are sent from workstations in these labs or your computer to a print release station, a print cloud, or directly to a machine, where jobs are released and paid for using your TitanPrint credits.

Usually when HemingwayApp finds something complex it’s because of the number of ideas expressed. Let’s break this sentence up:

Print jobs are sent from workstations in these labs or your computer to a print release station, a print cloud, or directly to a machine. Jobs are then released and paid for using your TitanPrint credits.

Fixed! On to the next one:

Once your print allocation is used, you must add funds to your TitanPrint account to continue printing by using a credit card or a print card purchased from the Titan Store.

Again, we see there’s two distinct ideas here. The first is that once your credits are gone you’ll need to add more to continue printing. The second is that you can add credits either online or at the TitanStore. So let’s split this sentence as well:

Once your print allocation is used, you must add funds to your TitanPrint account to continue printing. Funds can be added with a credit card or a print card purchased from the Titan Store.

No more very hard sentences, and we’re down to grade 8! Let’s tackle some of the merely hard sentences:

When you print a document from your lab computer, or laptop on the campus network, your print is routed to the nearest available printer.

can be simplified to:

When you print a document, your print is routed to the nearest available printer.

We lose a little bit of information here, because we’re not explicitly saying a computer must be on the network, but many students won’t understand what that means anyway, and the idea that printing needs to be done from campus is implied.

If you are in a heavy traffic location you will then need to release your job by logging into your TitanPrint account.

can be simplified to:

If printers are busy, you may need to release your job by logging into your TitanPrint account.

And this:

Color printing costs $.25 (twenty-five cents) per side of paper (resulting in $.495 per page if duplex / double sided).

can be simplified to:

Color printing costs $.25 per page ($.495 if double sided).

To make sure the decimal point is seen, we should write $0.25 and $0.495. So let’s fix that too. This next sentence:

Once your print allocation is used, you must add funds to your TitanPrint account to continue printing.

can be simplified to:

If you run out of credits, you must add funds to your TitanPrint account to continue printing.

Together, that gets us down to a 7th grade reading level – pretty close to our target. Let’s take a look at passive voice sentences (note that the above fixes fixed one of those for us too). If you’re not familiar with passive voice, here’s two sentences:

  1. “I’m going to throw the ball across the room.”
  2. “The ball is going to be thrown across the room.”

The second is clearly a much weaker sentence, but it’s the type of detached writing that’s often seen in academic journals. We want to avoid it wherever we can, because it’s boring to read.

The easiest to fix is “Funds can be added…”. Let’s have the reader perform the action, and instead say “You can add funds…”

Although that technically gets us under the suggested limit for passive voice use, let’s fix one more thing:

You will be charged $.07 (seven cents) per side of paper with a $.005 discount for duplex printing. Color printing costs $.25 per page ($.495 if double sided).

The troublesome part is “will be”, but we can do more than just fix passive voice here. Let’s make those two sentences work together a little better:

Each black and white page costs $0.07 per page, while color printing costs $0.25 per page. Double sided (duplex) pages receive a half cent discount per page.

While we’ve made some big improvements, our page still sounds a little institutional. So let’s look at the tone, using a Tone Analyzer. Go ahead and paste our text directly into the box and click Analyze.

Right now our text is 73% social and 26% writing tone. Writing tone is a little more formal. In our case, the words that are causing the Writing tone are Tentative and Analytical – not necessarily good things. Where possible, we should strive for text that’s friendly, almost conversational, but authoritative. That sort of tone is my goal in these posts – we’re having a conversation, but I’m trying to sound like I know what I’m talking about.

The bottom half of the tone analyzer has some suggestions on how you can adjust your text. You can try clicking on some of the words to see suggestions. I didn’t find the suggested words very helpful here, but it did make clear that the reason we sound tentative is because we keep having these hesitant sentences – things like “if” and “or” that make it seem like we’re never confident in what we write.

Unfortunately, there isn’t much we can do about that, due to the nature of what we’re writing about. But we can make our page sound a little more conversational by adding contractions. Just a simple change like “you are” to “you’re” helps make the text seem less academic. Don’t over do it, of course – the first time I catch a “y’all” in one of our pages, I’ll be less than happy to say the least – but try to write how you talk.

After all those changes, I ran through the text one more time, finding more ways to reduce the length of our content. That includes restructuring the first two paragraphs, so that the first one introduces TitanPrint, while the second one provides a high level overview of how it works. And now that our sentences are simpler, it’s easy to remove the last pair of adverbs. Here’s our final result:

Print Final

And, of course, our final text.

To summarize:

  • Split complex sentences up. It will say the same thing, but be easier to read.
  • To keep your sentences interesting, avoid using the passive voice

If you’re really passionate about language, you’re probably tempted to keep going, and keep rewriting. Believe me, I understand. This page is at least two grade levels higher than I’d like. There’s another dozen changes to make. But there’s a lot of other pages to work on, and writing on the web is all about maximizing the use of our time.

Next time, in the last post of this series, we’ll talk a little bit about writing for Search Engine Optimization and take a quick preview of some of the tools we’ll be introducing soon to help you write better right within Drupal.