SEO copywriting: Searchwritten» usability Archives – A Study in Content SEO http://searchwritten.com A Study in Content SEO Tue, 09 Feb 2010 07:43:19 +0000 http://wordpress.org/?v=abc en hourly 1 A Print Friendly Website? How To make your website Printer Friendly http://searchwritten.com/a-print-friendly-website-how-to-make-your-website-printer-friendly.html http://searchwritten.com/a-print-friendly-website-how-to-make-your-website-printer-friendly.html#comments Thu, 24 Jul 2008 20:21:12 +0000 Martin http://searchwritten.com/?p=50 SEO copywriting: Searchwritten - A Study in Content SEO

]]> A print friendly website automatically formats your website to a user-friendly format when printed. Like said before there are some guidelines for a user-friendly format.

Below I will explain the basics of making a print stylesheet for your website, product page or just a page with your contact details. Some knowhow of CSS and HTML will be nice, but don’t be affraid. It’s pretty simple, and if you do need any help, don’t be afraid to drop your question in the comments.

Ok, so first things first. The easiest and most common way is to make a new css file in which you put the formatting for your print stylesheet. You can use a simple texteditor to do this. Call the file “print.css”.

Save the file in a location on your webserver and leave it for now.

Go to your html pages or your template files and edit them. If everything is ok, you’ll see some code between the <head> </head> tags.
Put the following line of code between those tags:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Do this for every html file or template file.

Some explanation:
href=”print.css” points to the location of your new CSS file. Change that location if your CSS file is in another directory.

media=”print” tells the browser to use this stylesheet for printing the page. Nice to know: You can also use this for other media. For example a PDA. A full list of media types you can use can be found at W3.

Now the browser will know that when a visitor prints the page, it should use your new print stylesheet.

Formatting the print stylesheet

The print stylesheet overwrites your normal stylesheet. So you don’t have to put all your formatting in here. Just the difference is enough.

Hiding all unwanted images, ads and the navigation

Is your navigation in <div id=”navigation”></div>? Put the following code in print.css:

#navigation {
display: none;
}

Ads or images you don’t want to appear in the print copy? Do the same thing. For example, if you have ads in:
<div id=”ads”> </div>

use the following code:

#ads{
display: none;
}

For images it can also be handy to use a class. Use the following class in your image:
<img src=”image.jpg” alt=”alternative description” class=”noprint” />

Now put the following code in print.css:

.noprint {
display: none;
}

You can combine this to:

#navigation, #ads, .noprint {
display: none;
}

Using the full size of paper

Visitors want to use the full size of a paper when they print your page. In most cases, they use an A4 or the letter format, but this method also works for A5, A3 and other formats.

To get the content on the full size of a paper you give all elements (divs and tables) the following styling:

{
float: none;
margin: 0;
width: 100%;
}

For example:

#container, #content, #post, #comments {
width: 100%;
margin: 0;
float: none;
}

Writing out the URL of a link

Of course you can’t click a link on a paper. So if people have a print copy of your page, they want to see the full URL of the link. This is pretty simple to realize. Just put the following code in print.css:

a:after {
content: " (" attr(href) ") ";
}

Now, when you print a page, the full URL will be shown behind the link between two brackets.

Of course it is possible to give the URL some different formatting, for example another colour or a smaller, italic or bold font.

A disadvantage of this method is that when you have a lot of links in your page, it will harm the readabilty. A solution for this is using footnotes, in my opinion the best way to go.

Putting links as footnotes in the print copy

A nice method to put links on your page as a footnote in the print copy has been written by Aaron Gustafson. This method uses a little JaveScript code to collect all unique links on your page, assigns a number to them and puts them as a footnote on the bottom of the page. You can find the last version of this script here.

SEO copywriting: Searchwritten - A Study in Content SEO

]]> http://searchwritten.com/a-print-friendly-website-how-to-make-your-website-printer-friendly.html/feed 1 Usability of print pages http://searchwritten.com/usability-of-print-pages.html http://searchwritten.com/usability-of-print-pages.html#comments Mon, 21 Jul 2008 13:56:12 +0000 Erik-Jan http://searchwritten.com/?p=49 SEO copywriting: Searchwritten - A Study in Content SEO

]]> It’s difficult to read long articles from screen. Fortunately, some clever guys invented printers. But printing some articles can be a real pain. Most webpages I try to print, don’t have a good workaround for this function. Among the greatest irritations are:

  1. Navigation items that takes two pages
  2. Text that is wider than my page
  3. White pages or pages with only a title
  4. Unreadable URLs
  5. Flash or other applications which can’t be printed
  6. Images that are broken done on the bottom of the page
  7. Text in frames that can’t be printed

Let’s say something more about some of these irritations.

Some websites use different print pages. As a user, I’m not very happy with this. Most of the times, I don’t see the link to the print page and I just press Ctrl + P which most of the time doesn’t work that well. The only reason a separate print page might be useful, is when an article is spread over multiple URLs. The print page should contain the entire article.

Duplicate content

This is how SitePoint works. Articles are split in pieces of about 500 words. However, the complete article can be printed on www.sitepoint.com/print/article-name. The danger is of course that this leads to duplicate content and SitePoint doesn’t seem to be aware of this danger. The links to the print version are follow links and the print version isn’t excluded for indexation by a robots.txt file. By the way, SitePoint has another problem as well. Both of the following URLs lead to the same page:

  • www.sitepoint.com/print/properties-glance-guide
  • www.sitepoint.com/print/1231

Print pages at the ANWB

The Dutch organization ANWB offers a nice routing tool. The ANWB also uses a separate print page. This print page works well in the browsers I used for testing. However, it’s quite hard to find the link to the print page. This is frustrating because printing the normal page in Firefox doesn’t work that well. The routemap changes to a black or a white rectangle, depending on your printer. It’s hard to solve this problem because the Google Maps application uses JavaScript functions to navigate through the map. Google Maps itself doesn’t have a print version itself. The print version of the ANWB uses a .png file.

Irritation #2: Empty pages and more problems at SEOmoz

The blog pages of SEOmoz don’t have a separate print version. Internet Explorer prints their pages really nice, but Firefox doesn’t understand the print CSS. I assume most visitors of SEOmoz will use Firefox. The first page only shows the title of the blog. The blog itself starts at page #2, which leaves a nearly empty first page.
SEOmoz does have another problem with their print functionality. I tries to print a page of about 2,000 words. In the opposite order, I received 4 pages with comments, one page with (a part of) the article and my printer ended with the almost empty title page. The article itself should me around 5 pages long, but I only received the first page. Internet Explorer understands what should be printed.

Irritation #3: Useless navigation

A printed version of an article doesn’t need any form of navigation. Many print versions of articles however do place the navigation on the paper. A few days ago, I printed an article of a Duth online marketing blog. The article had a length of about 2 pages (including comments) but my printer printed 7 pages consisting:

  • Top navigation
  • Last reaction on the entire site
  • Some statistics
  • A little bit of whitespace
  • A long list of tags
  • The article itself
  • The comments
  • Links to not related article on other sites

We know that important content should be placed above the fold. It’s weird that it seems that this doesn’t apply for print pages based on the history of the term ‘above the fold’.
Some articles say that it’s a bad user experience if a print version has a different layout than the normal webpage. I don’t agree with them. People print an article to read the stuff and not to study the navigation.
Most advertisements don’t have any value on a print page. The only work for branding but people can’t click on them. An advertisements for a new cartridge with a short URL might be a good idea though.

Irritation #4: Non-readable URLs

How do you tackle links on a print page? Most print versions underline the link but it’s still not possible to read the underlying URL. SitePoint uses an elegant solution. They use footprints in their print versions so the URL of a link is placed in a list below the document.

Best practices

What is the way to go with print pages? Let me give my few cents about this one:

  • Use a media=”print” CSS
  • Delete all navigation and banners
  • Use the entire paper
  • Place URLs in a footprint
  • Test the print version in the most important browsers

SEO copywriting: Searchwritten - A Study in Content SEO

]]> http://searchwritten.com/usability-of-print-pages.html/feed 3 Web writing: less is more? Or maybe not http://searchwritten.com/web-writing-less-is-more-or-maybe-not.html http://searchwritten.com/web-writing-less-is-more-or-maybe-not.html#comments Sat, 10 May 2008 18:29:10 +0000 Ramon Eijkemans 15 at http://www.searchwritten.com SEO copywriting: Searchwritten - A Study in Content SEO

]]> According to a recent publication by Jakob Nielsen, it is better to not use many words in a web text: less is more. However, another study by the Poynter group reveals that web content (in online newspapers) is read way, way better!

How can we explain this difference? And: what should SEOs learn from it?

Ok, so now i’m confused.

reading Web writing: less is more? Or maybe notLast week Jakob Nielsen wrote an article entitled: ‘How little do users read?’ In the article, he repeats an idea we all know: average web users don’t read a text as a whole, they scan it. He also states that about 20% of the words in texts can actually be read in the time people spend on a web page.

Another study however, (Poynter group Eyetracking study 2007) says something different. They say that 77% of a text that is being read, actually gets read, even if the text is very long.

What’s up with that? I got frustrated and began reading to find out. Is one of them talking BS, or is there more to it?

Why less is more: Jakob Nielsen about web reading

Nielsen provides some data to back up his claim:

‘On the average Web page, users have time to read at most 28% of the words during an average visit; 20% is more likely‘.

The data set he used contained 59,573 pageviews, of which 45,237 were usable after cleaning out error pages, bounces, and pageviews that lasted more than 10 minutes. The data was collected in 2005 among mostly high-end users (university employees).

Time to read: 25 seconds + 4,4 seconds for every 100 words extra

The calculations are simple, i’ll summarize and explain them here:

  • an average webpage contains between 30 and 1,250 words. Reading behavior beyond 1,250 words becomes erratic;
  • an average pageview lasts at least 25 seconds (30 words), plus 4,4 seconds more for every 100 words extra;
  • assuming an average reading speed of 250 words per minute, users can read 18 words in those 4,4 seconds. So when an extra 100 words are to be read, people actually read only 18 of them.

Amount of read words: only 20% to 28%

The next step is to calculate how much words people are able to read when an article contains a given number of words. In the data set Nielsen used there was an average of 593 words on a webpage. I have no way of validating that number, but it seems reasonable.

Graph % of web text read
Source: http://www.useit.com/alertbox/percent-text-read.html

Look at the chart above. The smaller the amount of words, the higher the percentage of words people have time for. People read 50% of a text when it’s 111 words or less. At Onetomarket we generally use 250 words as an ideal quantity for both search engines and humans. It seems that when a text is 250 words long, about 35% it will be read. The average pageview of 593 words would only be read for 28%.

Nielsen lowers the average number to 20% because people do not spend all their time on a webpage reading. They also need time to figure out the navigation and lay-out, etc.

Poynter group says: less it NOT more

Ok. So 20% of web texts are read, on average.

But that is not what the Eyetracking Study of the Poynter Group says! For those of you who don’t know: the Poynter group is a non-profit organization that does all kinds of teaching stuff for journalists.

In 2007, they conducted a large eye tracking study: 582 subjects, 50% men/women, average age of about 35 to 40. About 200 newspaper websites were examined (also 200 tabloids and 200 newspapers).

The research revealed the following, among other things:

  • 77% of the words are read after a subject decides to read an article;
  • half of the people read from top to bottom (methodical); the other half scans;
  • alternative story forms (Q&A’s, timelines, lists, facts boxes) draw in a higher amount of visual attention;
  • when online, people search for navigational elements first. When reading print, people search for big headings and photos first.

The most striking difference between this study and Nielsen’s statements, is that ‘less is more’ doesn’t seem applicable for news articles. If someone starts to read, they go for the full monty:

Graph relation between number of words on webpage and reading time - eyetracking study Poynter 2007
Source: http://eyetrack.poynter.org/keys_01.html

Conclusion: users are picky, and quality matters

So one study concludes that less is more; the other says exactly the opposite. How can we explain this?

My two cents on it are that they differ because of the way the research is set up. There are some striking differences:

  • the Poynter institute explicitly told test subjects to read a newspaper, tabloid or website. It makes sense that a much higher percentage would actually read stuff. It’s not that this is a bad way to do research! But because of this, it can never, ever account for the way people interact in general with websites;
  • also, newspaper websites are high authority websites, and are packed with high quality content. They are the traditional news publishers. It’s logical that people read more on these websites;

It seems to me that there are two very logical observations here:

  1. people are very picky when choosing which articles to read;
  2. but if they decide to read, they probably read more than 20%. This however, only applies to newspaper websites, but we can assume that websites that are known to deliver ‘quality’ information, can reach this high a percentage as well. I do not think the same percentage is applicable for web shops and your average business website.

What about SEO?

The reason I wanted to dive into these researches is because of my daily routine as an SEO. I give a lot of workshops about the relationship between copywriting and search engine optimization. Usually, I teach copywriters about keyword research, writing title tags and meta-descriptions, how many keywords to use in your text and where to put them, etc.

These are the things I will use in my presentations:

  1. Time to read: 25 seconds + 4,4 seconds for 100 words extra; (Nielsen)
    20% to 28% of web texts can ON AVERAGE be read given the time people spend on webpages; (Nielsen)
  2. however, IF people read a news story, they read 77% of the text (Poynter);
  3. this high percentage is presumably lower on web shops and business sites (IMHO);
  4. but if people find a text interesting, they WILL read it (IMHO);
  5. people read in different ways: they scan (50%) AND read from top to bottom (50%) (Poynter);
  6. navigational elements AND alternative story forms attract readers. Secondly, headings and images are important (Poynter).

Besides the conclusions above that are more about web reading in general, there are also several hidden messages for SEOs.

  1. If a visitor is supposed to ‘do’ something on a webpage (like reading or converting into a customer) it is paramount that the user experience comes first, and keywords second! That might be hard for many SEOs to swallow. But because REAL user attention seems so hard to obtain, everything should be done to reach that goal first. Never, ever sacrifice the quality of a text for search engines!
  2. the thing a reader should ‘do’ on a webpage cannot be reached if they must read the WHOLE text first. That is something visitors simply do not do. We have seen that they read something between 20% and 77%, but never 100%. So, when doing textual conversion optimization you must make sure the conversion goal is present on several locations of the page. Otherwise it might not even get noticed;
  3. Also, they read texts in different ways: they scan and read methodically. Also, visitors tend to read more when you use alternative formats, like Q&A’s, lists, etc. So, diversify your conversion points.

Well, this article has become quite big too, but i hope you find it interesting enough to read the full 77% ;)

Read more:

SEO copywriting: Searchwritten - A Study in Content SEO

]]> http://searchwritten.com/web-writing-less-is-more-or-maybe-not.html/feed 6