Create your own intranet stock photo library

I was browsing through the WordPress media library of the soon-to-be-launched ONS intranet and came across a large batch of freshly-uploaded images. At first glance, I thought that the publishing team had purchased some flashy stock images to use on the intranet. And then I thought, Hold on! That’s the room where I spent a day training a bunch of new intranet publishers. And that’s the entrance gate for visitors, and that’s the Costa Cafe, which is my first port of call when I arrive at ONS! Continue reading “Create your own intranet stock photo library”

Why you shouldn’t “click here”

I collect examples of “click here” and similar word as hyperlinks on web and intranet pages. You’ll find them in the Click here gallery.  “Go there”, “more info”, “can be found” or “this link” are all common words that people use when adding hyperlinks to web and intranet pages. There are many reasons not to do this.

Links have no scent

People scan pages for things to click. Buttons, underlined and coloured text, icons and menus. The words or imagery that you use on anything that is clickable need to give a clear and quick signal of what will happen when clicked. People know that a  blue, underlined bit of text is a link. An envelope icon means that you’ll send an email. A text link using the words “Annual report 2014 PDF” might link you to a PDF document of the annual report. A text link called “click here” doesn’t tell you anything.

Extra mental workload

A link with no scent forces you to read the text around the link to make sense of it. If you are blind and using a screenreader to read out links on the page, it’s difficult to make the screenreader read out the text around the link. This extra workload and inconvenience gets a mental thumbs-down from your reader.

Hyperlinks and SEO

Google and other search engines use hyperlinks to discover pages on your site. And they also index the words that you use as hyperlinks. The words help to give the search engines further information about the target page. And although the search engines will use clever algorithms to ignore certain words, I have seen “Click here” as a heading in Google results.

They encourage passive voice

Not only are link words meaningless, they bloat the page with extra unhelpful words. “The information can be found here“, “the document can be downloaded here.”

How to improve your hyperlinks

Make your hyperlinks scannable.  Don’t expect people to read your web page from top to bottom. People don’t read on the web; they scan. When they read the text in your hyperlink, it needs to be meaningful.

Say what it is.  You can often use the title of the page or document that you are linking to. For example “For detailed guidance read the employee conduct policy“.

Add additional code to links. You can add  HTML and CSS code to repetitive links such as “Read more” on your listing pages that screen-readers can use but will not show up on the front-end. See the W3C guidance on hiding link text

 

Content Migration Guide

A move to a new CMS is an ideal opportunity to tidy the intranet, remove the clutter and possibly present things in a better way. You can choose to use your existing content as a basis for the new CMS, or wipe the slate clean and create new content. This guide covers moving content to a new CMS.

Methods of migration

There are several ways of moving content. It usually boils down to a combination of automated scrapes, exports and imports, and manual copy and pasting.

Using the bulk methods of scrapes and imports you end up with your existing content in the new CMS, and this means that you can do any content rewriting, culling and reorganising within the new CMS.

If you can’t use any automation then you’ll need to manually migrate content. This gives you the chance to rewrite and reorganise the content before it hits the new CMS, or you can still migrate everything over as is, and then do the rewrite work in the new CMS.

Inventory

Whichever method you choose to move content over, it will help to know what you’re dealing with. A content inventory gives you a detailed account of your intranet pages, documents and images.

I’ve written about my content migration spreadsheet before. It’s a combination of the content inventory and a migration dashboard, showing the live rate of migration and projected finished date. It’s a great tool for keeping an eye on migration progress, for keeping migrators motivated, and because it’s in Google Docs it means that you can work in realtime with other content migrators. I’ve shared this spreadsheet:

Duplicate the content migration spreadsheet from Google docs

Creating the inventory involves similar choices to the migration method. It may be possible to get an export of your site structure and assets from your old CMS that you can use as a basis for the inventory spreadsheet. Or you could produce a folder listing from your intranet server or from a scrape of the intranet. Or you can manually create rows in the spreadsheet.

Watch out for automated content inventory listings that may miss sections of the old site due to access restrictions, Javascript links or a single page on the old intranet that you plan to turn into several pages on the new intranet.

Audit

Once you have the content inventory spreadsheet complete, you can start to sift through deciding if the content is still required or not, whether it needs to be rewritten or combined with other pages. This is also an opportunity to move content around and to categorise and tag pages.

The finished audit will give you a spreadsheet that you can use for migration and ongoing content maintenance. It could also be adapted for an automated import.

Migration planning and practicalities

For manual migration, the order that you move things across can help to speed up the process. I have found it best to migrate documents and images first so that these are in place for linking up to pages.

You will generally need to do two passes through the migration spreadsheet. The first round will get all the content in place. The second round is for linking up the content. Attempting to get it all done in one go can be difficult because you may come to a page containing links to other pages that don’t exist yet. Keep a note of these pages during the first round of migration. And then whizz through them in the second round to link them.

Think too about your different types of content. For example, if you have a news section containing news stories that mainly link to your publications section, then it makes sense to migrate your publications section first. You save time when you come to the news stories because you can already link to the publications in the first round of the spreadsheet.

If you are pressed for time, you can leave older content such as news stories until after launch.

Pitfalls

The main pitfalls to watch out for are all caused by copying and pasting.  The first problem is that whether you copy from a Word document or live from an intranet page, you sometimes copy more than you bargained for. Hard-coded styles, font sizes, colours and tables may all be lurking behind your page and need to be tidied up. If this is a constant problem you may have better luck by pasting into a simple text editor first and then copying again before pasting into the CMS.

As well as hidden styles, you may also copy over HTML including embedded images and links to documents. Pages will display the image because they are still pulling it through from the old site. When the old site disappears the image will no longer display. In this case you need to link up the new page to the new image. The same can happen with documents; you copy over a link to a document on the old site, it still works when you test it, but it will break when the old site disappears.

Final checks

Once all the new content is migrated, a final broken links check will make sure that everything is linked up okay.

You can also setup some rules for redirections so that people with bookmarks or following links to the old site will be pointed to the new site, and preferably the relevant page in the new site.

How to use the migration spreadsheet

The spreadsheet is setup with 2 tabs. The Dashboard tab shows the high-level migration progress. The Main tab is for the content inventory.

On the dashboard, set your start date and target finish date. The rest of the information will update automatically using formulas in the cells. Key points are the projected finish date, which is calculated on the start date and the rate of migration. The dial shows percentage complete and the graph at the bottom shows where the projected finish date lies in relation to the target finish date. The dashboard does not count documents and images.

On the main tab, enter each new page, document or image to be migrated on a new line. During migration, enter your initials in the first column as each item is completed. This will feed into the dashboard to show progress.

Note: Columns D and E are used for the dashboard calculations. When inserting new rows, copy cells D and E from a completed row to the new rows. If you mark rows as completed and the dashboard doesn’t change, the likely cause is blank cells in columns D and E.

 

How to track documents as pages in Google Analytics

 

“But where are my downloads?” cried the website manager upon looking at her Google Analytics reports.

“They’re under Events,” replied the support guy.

“Oh,” said the confused manager.  “…What’s an event?”

People don’t like documents on the web or the intranet as a general rule. They prefer HTML pages. But sometimes they’ll go to the lengths of downloading a large, image-heavy PDF brochure or a 16 page, typeset application form.

Sound the trumpets! An event has occurred! Someone downloaded a document!

But hold on. This isn’t an event. It’s just someone reading your content, which happens to be in a different format to HTML. Why track it in a different section of your analytics? Shouldn’t you track it as part of your content?

If you track documents as part of your content, they become part of the content flow. They become page views and, as such, will have bounce rates, timings, referrers and unique views. This gives so much more information than a simple count of events.

To setup documents to appear as part of your content you’ll need to change your tracking code and setup some filters in Google Analytics.

Don’t pass this point if you don’t want to get your hands dirty!

Setup the tracking code

The trackEvent function is used in Google’s examples as a way to track document downloads. You need to change any existing tracking code for documents on your pages from the trackEvent function to the trackPageView function. See example code below.

If you don’t currently track documents, you can add a bit of jQuery to every page that will run when pages load, going through and adding the onClick event to the document download links, triggering the tracking code when the link is clicked. You’ll need to put this code within a SCRIPT tag on every page or include it as a separate .js file. Make sure that you have already included your regular Google Analytics tracking code.

Code available on jsfiddle

function gaTrackDownloadableFiles() {

var links = jQuery(‘a’);

for(var i = 0; i < links.length; i++) {
if (links[i].href.indexOf(‘.pdf’) != “-1”) {
jQuery(links[i]).attr(“onclick”,”javascript: _gaq.push([‘_trackPageview’, ‘”+links[i].href+”‘]);”);
} else if (links[i].href.indexOf(‘.csv’) != “-1”) {
jQuery(links[i]).attr(“onclick”,”javascript: _gaq.push([‘_trackPageview’, ‘”+links[i].href+”‘]);”);
} else if (links[i].href.indexOf(‘.doc’) != “-1”) {
jQuery(links[i]).attr(“onclick”,”javascript: _gaq.push([‘_trackPageview’, ‘”+links[i].href+”‘]);”);
} else if (links[i].href.indexOf(‘.ppt’) != “-1”) {
jQuery(links[i]).attr(“onclick”,”javascript: _gaq.push([‘_trackPageview’, ‘”+links[i].href+”‘]);”);
}
}
return true;
}

In Google Analytics reports, the domain name does not appear in the page URL for regular HTML pages, you’ll just see the initial backslash followed by the page URL. However, documents will appear with the full URL including the domain name. This can look a bit messy and is hard to read on your reports, when all you’re actually interested in is the document name which appears way down the end of the URL.

To present this in a better way when running your reports, we can add some filters to the GA account which will prettify the incoming document data.

Configure Google Analytics

You’ll need to create a filter. In your Analytics account, go to the Admin section.

Google Analytics admin button

Then within your View panel, choose Filters.

Google Analytics Filters button

Add a new filter and call it “remove domain name”. Then choose Custom filter, followed by Advanced.

Add filter - step 1

In the next form, choose Request URI  for both Field A and Output To.

Add filter - step 2

In Field A you’ll need to specify the URL pattern for your document folders. The URL pattern needs to be in a specific format, known as regular expressions. You need to work out what your common folder path is.

Here are some example folders:

Example 1
/docs/annual-leave-policy.doc
/docs/eye-test-voucher.pdf
/docs/staff-magazine-2012-09.pdf

Example 2
/hr/leave/policy/downloads/annual-leave-policy.doc
/health/dse/downloads/eye-test-voucher.pdf
/news/downloads/staff-magazine-2012-09.pdf

In example 1, the common path is /docs/ since all documents are stored in this folder.

In example 2, the common path is /anything/downloads/ since all documents are stored in a downloads folder, somewhere within a hierarchy of folders. Note that anything could represent forward slashes in addition to other letters and characters.

When you have worked out your common folder path, add your domain URL to the start, then take off the http:// or https:// bit, so that you have something like:

Example 1: intranet.luke.co.uk/docs/
Example 2: intranet.luke.co.uk/anything/downloads/

Apply the following rules:

  • add a backslash in front of any dots \.
  • add a backslash in front of any forward slashes \/
  • replace anything with (.*)

Example 1: intranet\.luke\.co\.uk\/docs\/
Example 2: intranet\.luke\.co\.uk\/(.*)\/downloads\/

Finally, add (.*) to the end, giving you something like:

Example 1: intranet\.luke\.co\.uk\/docs\/(.*)
Example 2:
 intranet\.luke\.co\.uk\/(.*)\/downloads\/(.*)

Et voila! This is your regular expression. Add your expression to Field A.

Then count how many times (.*) occurs in your expression. Use this number in the Output To field, preceded by $A

Save the filter.

There’s one more thing that you can do to improve your reports. By default, the documents will be entered into Google Analytics with the page title of the HTML page where the click to download the document occurred. To include the document filename in the page title in addition to the title of the page being viewed when the link was clicked, it’s back to filters again.

Add a new filter and call it “page titles for documents”. Setup the filter as follows:

Field A: Request URI
(.*\.doc|.*\.docx|.*\.xls|.*\.xlsx|.*\.pdf|.*\.ppt|.*\.pptx|.*\.jpg|.*\.gif|.*\.png|.*\.zip)

Field B: Page title
(.*)

Output To: Page title
$A1 ($B1)

Page titles for documents filter Save the filter.

On your filters lists, make sure that your page titles filter is below your remove domain name filter, otherwise your page titles will appear with the full URL. If necessary use the assign filter order option to change the order.

Filters

Now you should start to see documents appearing in your content reports, including Realtime:

Realtime analytics showing documents and source page
Realtime analytics showing documents and source page

NOTE: changes to filters have a permanent effect on your data view, so make sure that you have a copy of your raw data in another view or profile.

Guide to creating effective intranet news stories

Rule of thirdsNews articles generally have three text components. Headline, teaser and body copy. As with any other intranet content, they need to be edited and tweaked before publication.

Headlines

The basic rules for good web writing and SEO apply here. Keep your headlines short. Frontload and aim to get your message across in the first few words. Don’t start with words like “A” and “The” and don’t try a clever play on words that forces the reader to think.

Here are some examples taken from the BBC website. Note how few words they use to get across a very good scent of the story behind them.

  1. Heroin ‘worth £10m’ found at flat
  2. Further swine flu cases confirmed
  3. Police ‘failed’ custody death man
  4. Medic criticises eBay drug sales
  5. Routine aspirin benefits queried
  6. Many autism cases ‘undiagnosed’
  7. UK transplants ‘at record high’
  8. Malaria parasites ‘resist drugs’
  9. Late abortion tribunal challenge

Of course, most intranet news headlines hopefully aren’t as dramatic as these, but you get the point.

Headlines in search results

For news listings and archive pages where headlines are seen in some kind of date context, the example headings above would work fine. As they would for the content heading on the actual news article. For search results listings, you may want to consider the date implications. News on the intranet goes stale as soon as it is published. For staff who encounter news articles through search results, it’s helpful to have an associated date near the clickable headline title.

For routine update messages which typically have the same headline text every time, dates are especially helpful for distinguishing them apart. In these cases it can help to add date context to the HTML title metadata (rather than the H1 body content heading) so that it appears as part of the headline in search result listings. Avoid words like “today” or “next week” as these won’t make sense next month.

Teaser

I like to think of teaser text as the snippet in Google search results or perhaps an informative tweet. Teasers need to provide a neat, compact summary of what the story is about. It’s debatable whether the teaser should be used as the first paragraph in the news article itself. Some say that reading the teaser and then clicking through to the news story only to read it again is wasting time. But as we shall see below, the first paragraph of the article should contain a summary of the article, since people landing on the story from a link on another intranet page or perhaps a staff email also need to get the scent of the story.

Body copy

Usual rules for online writing apply. Keep things short.  Chunk up text into paragraphs. Again, avoid now-centric words like “today” and be specific about dates. It’s best to keep online articles to a digestible chunk. I’ve used a guideline of 250 words before but it depends on the organisation, type of news story and format. But remember, people don’t like to read online.

The first paragraph should sum up the article so that readers know what the story is about. Using the tried and tested techniques of writing who, what, when, where, why is a good starting point for planning the rest of the article.

If the article has anything to do with core content on the intranet, then link to that page or document. News stories should not be the place to store core intranet content such as forms, documents and guidance because news is transitory and gets shunted into the archives.

To get effective analytics I have found it best to encourage the reader to click elsewhere on the intranet from news stories and announcements by linking to another page or document or by supplying thematic tags for similar stories. Links to related news stories are a great way of increasing serendipity and deepening understanding of core issues.

If people arrive at a story, read it and do nothing else then your bounce rate goes up and you don’t get accurate timings because there is no end time to track.

Graphics

You’ll generally need a few different sizes for your images, based on the different locations that they will appear throughout the intranet. Thumbnails appear in listings. A main image appears on the article page itself, and then you have feature images which might appear in a homepage carousel or as part of full-size pop-up photos in a thumbnail gallery.

You’ll need to crop and resize your original photos and maybe apply colour correction and sharpen or blur areas to give focus and depth of field. As far as sizes go, squares and rectangles are the norm. But avoid designing feature photos to be letterbox shaped. It is really hard to constantly have to source and edit photos for a target size that does not suit the majority of digital material that is typically supplied for a story, such as portrait shots of people, signage and logos.

For composition, a great place to start for news story photos is the rule of thirds. Now an option on smartphones when taking photos, the screen is split by two horizontal lines and two vertical lines. Cropping and resizing photos to fit this frameworks produces the best results and the rule applies for portrait, landscape and square images. Check Google images rule of thirds photography for some visual examples.

Thumbnails

You’ll normally use thumbnail images on news streams and archive listing pages, and occasionally they are seen in search results. The general rule of thumb(!) is that the graphic content should be clear and obvious. Text should be large enough to read. People should be recognisable. Objects should be obvious.

People

For thumbnails of faces it’s usually pretty easy to follow the rule of thirds. Crop and resize images so that the eyes fall into the top two intersections, the mouth follows the bottom line and the face can fit nicely into the two vertical lines. It’s ok to chop off bits.

Poor rule of thirds
Thumbnail face #1
Poor rule of thirds

Shot #1 does not follow the rule very well. The eyes are centred in the image instead of being on the top line of thirds. The photo has been cropped so that the chin ends exactly at the bottom and gives a sense of being boxed in.

Good rule of thirds
Thumbnail face #2
Good rule of thirds

Shot #2 is much better, following the rule of thirds beautifully. And another nice touch is that the eyes are looking to our right. This is good for news stories that have thumbnails on the left and heading/teasers to the right. It’s the other way around for thumbnails on the right.

The idea is that, as humans, when we interact with other people, we naturally follow their line of sight. Go on, try it next time you’re talking with someone. If you look at something else, their eyes will follow. And the theory is that this works with these kinds of thumbnail images, drawing you in to read the headline and teaser. Of course, a listing filled with faces turned to the right will look a bit forced – but we can intermingle thumbnails of faces with other types of imagery. The listing below shows a selection of stories using right-facing faces/eyes – they didn’t originally all appear together.

Face thumbnails - eyes right
Face thumbnails – eyes right

Group shots

Scenes of group events or team photos work great when you have a gallery of images that you can blow up and scroll. But for listing pages and search results, thumbnails need to be treated differently.

Group shot 1
Group shot #1
Group shot #2
Group shot #2

Thumbnails that have been created by simply shrinking a full-size group photo are not effective. They produce a splurge of tiny people and faces that are not distinctive and they don’t tell much about the story – apart from it’s a group of people.  In shots #1 and #2 we don’t really get a good idea of what’s happening or who they are.

Group shot #3 (zoomed)
Group shot #3
(zoomed)

For groups, it’s generally best to pick a relevant/smiley face with an object that is pertinent to the story and zoom in for a closeup. Shot #3 was taken from a group shot and it’s quite clear that we’re talking about some kind of award.

In shot #1 we could have zoomed in on some of the delicious food or a candle. For shot #2 a close-up of a smiley face looking right would do a treat.

Feature images

Feature images may appear on intranet homepages, in carousels, news articles or photo galleries. Use the rule of thirds in your composition where possible. Crop and resize photos to show the real focus of the story. For group shots, make sure you supply a blow up image so that readers can actually see who is in the photo. And remember to apply compression to final images to get the file size down, and use the appropriate graphic format.

Housekeeping

A good file-naming convention and folder structure can help with the behind-the-scenes activities around news stories. Dates in URLs are a good start. You can also use keyword tags and any CMS will output the title of the article as part of the URL.

To measure readership and engagement it’s important to have web analytics in place for tracking news stories. For working with statistics and producing regular analytics reports, URLs with dates will help when you want to filter stories for a specific time period.

URLs with dates can also help when you want to bias search results to favour more recent stories.

Remove stories and announcements that have truly died after a certain date so that they don’t clog up search results. This is easy if you can set an expiry date in your CMS. For example, do I really need to know about an IT service outage from two years ago if I’m searching for information about service outages over the coming weekend?