<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Malcolm Coles &#187; How to</title>
	<atom:link href="http://www.malcolmcoles.co.uk/blog/tag/how-to/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.malcolmcoles.co.uk/blog</link>
	<description>Where to find Malcolm Coles, reviews, and tips on how to do things I couldn&#039;t do.</description>
	<lastBuildDate>Tue, 20 Dec 2011 10:16:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.4</generator>
		<item>
		<title>How related article lists reduce bounce rates and increase page views</title>
		<link>http://www.malcolmcoles.co.uk/blog/related-posts-bounce-rates-page-views/</link>
		<comments>http://www.malcolmcoles.co.uk/blog/related-posts-bounce-rates-page-views/#comments</comments>
		<pubDate>Thu, 20 Aug 2009 06:45:30 +0000</pubDate>
		<dc:creator>Malcolm Coles</dc:creator>
				<category><![CDATA[Good reviews]]></category>
		<category><![CDATA[How to]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[seo]]></category>

		<guid isPermaLink="false">http://www.malcolmcoles.co.uk/blog/?p=2449</guid>
		<description><![CDATA[Adding a related-posts plugin can reduce your bounce rate by around 3% if my site is anything to go by.
In the two months before I installed the Yet Another Related Posts plugin my bounce rate was 84.3%. In the two months since then, my bounce rate has averaged 81.6% - a drop of 3.25%.]]></description>
			<content:encoded><![CDATA[<p>Adding a list of other related posts to each blog post really does increase reader engagement if my site is anything to go by:</p>
<ul>
<li>In the two months <strong>before</strong> I installed the <a href="http://mitcho.com/code/yarpp/">Yet Another Related Posts Plugin</a> <strong>my bounce rate was 84.3%</strong> (this is the percentage of visits where the visitor looked at just one page).</li>
<li>In the two months <strong>since</strong> then, <strong>my bounce rate has improved to an average 81.6%</strong> - a drop of 3.25%.</li>
</ul>
<p>Likewise, the number of pages looked at per visit increased:</p>
<ul>
<li>In the two months <strong>before</strong> the plugin, visitors looked at <strong>an average 1.34 pages per visit</strong>.</li>
<li>In the two months<strong> since</strong> then, they've looked at <strong>an average 1.43 pages per visit</strong>, an increase of 6.93%.</li>
</ul>
<p>The YARP plugin checks your posts when you publish them and automatically lists up to 5 other posts that it considers relevant at the bottom (to do so, it analyses things like tags, keywords, categories etc).</p>
<h3>My bounce rate</h3>
<p>The blue line is for the two months since the related-posts plugin, the green line for the previous two months (click the graph to see it bigger). A low number is better - and the blue line is fairly consistently below the green:</p>
<p><div id="attachment_2450" class="wp-caption aligncenter" style="width: 500px"><a href="http://www.malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/related-posts-bounce-rate.png"><img class="size-large wp-image-2450" title="related-posts-bounce-rate" src="http://www.malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/related-posts-bounce-rate.png" alt="Bounce rates before and after installing a related-posts plugin" width="490" height="125" /></a><p class="wp-caption-text">Bounce rates before and after installing a related-posts plugin</p></div></p>
<h3>Pages per visit</h3>
<p>Again, the blue line is the two most recent months and the green line for the two months before with no plugin (click the graph to see it bigger). A high number is better - and the blue line is fairly consistently above the green:</p>
<p><div id="attachment_2484" class="wp-caption aligncenter" style="width: 500px"><a href="http://www.malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/related-posts-pageviews.png"><img class="size-large wp-image-2484" title="related-posts-pageviews" src="http://www.malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/related-posts-pageviews.png" alt="Page views before and after the related posts plugin" width="490" height="151" /></a><p class="wp-caption-text">Page views before and after the related posts plugin</p></div></p>
<h3>What is bounce rate?</h3>
<p>The bounce rate is defined by Google as "the percentage of single-page visits (ie visits in which the person left your site from their entrance page).</p>
<p>It adds that "high Bounce Rate generally indicates that site entrance (landing) pages aren't relevant to your visitors."</p>
<p>While that might be true for some sites, for blogs it's usually because people came, learned what they wanted to know, and left again. There's nothing particularly wrong with a high bounce rate for a blog - it's just kind of annoying for the author that people don't hang around.</p>
<h3>Methodology issues</h3>
<p>I can't remember enough A-level maths to work out if these differences are statistically significant. Also, the make-up of my traffic has changed over the two periods.</p>
<p>In the two months before I installed the plugin my traffic sources were:</p>
<ul>
<li>Direct: 18%</li>
<li>Referring sites: 31.7%</li>
<li>Search engines: 50.1%</li>
</ul>
<p>Since then, the figures are:</p>
<ul>
<li>Direct: 30.0%</li>
<li>Referring sites: 29.1%</li>
<li>Search engines: 44.0%</li>
</ul>
<p>These are quite big differences - mainly driven out of my increased Twitter follower count. And different sources of traffic may behave differently when it comes to on-site behaviour.</p>
<p>Oh, and I dislike the whole 'related articles' name. Who ever thinks 'I'd like to read an article or post <em>related</em> to this one'. So I changed the heading to 'You might also like'.</p>
<img src="http://www.malcolmcoles.co.uk/blog/?ak_action=api_record_view&id=2449&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.malcolmcoles.co.uk/blog/related-posts-bounce-rates-page-views/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Content carousels reviewed: Yahoo loses, Sky wins</title>
		<link>http://www.malcolmcoles.co.uk/blog/content-carousels-reviewed/</link>
		<comments>http://www.malcolmcoles.co.uk/blog/content-carousels-reviewed/#comments</comments>
		<pubDate>Thu, 30 Apr 2009 22:31:32 +0000</pubDate>
		<dc:creator>Malcolm Coles</dc:creator>
				<category><![CDATA[Bad reviews]]></category>
		<category><![CDATA[Good reviews]]></category>
		<category><![CDATA[How to]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[reviews]]></category>
		<category><![CDATA[usability]]></category>

		<guid isPermaLink="false">http://www.malcolmcoles.co.uk/blog/?p=1142</guid>
		<description><![CDATA[Carousels (sliders as they're sometimes known) are a good way to promote several items of content without using up too much space on your homepage.

Here's a roundup of sites using them - and how successful I think they are. Having studies several, I think the best ones.]]></description>
			<content:encoded><![CDATA[<p>Carousels (sliders as they're sometimes known) are a good way to promote several items of content without using up too much space on your homepage.</p>
<p>Here's a roundup of sites using them - and how successful I think they are. At the end - once I've called Sky a narrow winner over the BBC - I've given some tips on implementing a good one.</p>
<h3>Yahoo UK carousel: 1 point out of 10</h3>
<p><div id="attachment_1146" class="wp-caption aligncenter" style="width: 455px"><img class="size-full wp-image-1146" title="yahoo-carousel" src="http://malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/yahoo-carousel.png" alt="Yahoo UK news carousel" width="445" height="242" /><p class="wp-caption-text">Yahoo UK news carousel</p></div></p>
<p><a href="http://uk.yahoo.com/">Yahoo's</a> is a classic poorly-implemented carousel. It's not clear that the 4 items at the bottom control the box - it looks more like they are links to pages. (Which they are with javascript off).<span id="more-1142"></span></p>
<h3>E4 carousel: 2/10</h3>
<p><div id="attachment_1148" class="wp-caption aligncenter" style="width: 510px"><img class="size-large wp-image-1148" title="e4-carousel2" src="http://malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/e4-carousel2-500x164.png" alt="E4 carousel" width="500" height="164" /><p class="wp-caption-text">E4 carousel</p></div></p>
<p>The <a href="http://www.e4.com/">E4</a> carousel is another one where it's not clear to me that the 5 boxes control the page - they look more like links to other pages. (And in fact, with javascript off, this is what they do). If the controls aren't clear, carousels are pretty useless.</p>
<p>Some of the elements are videos that you can play directly, which is good. But personally I find the bold white out of black hard to read.</p>
<h3>VNUnet carousel: 2/10</h3>
<p><div id="attachment_1153" class="wp-caption aligncenter" style="width: 510px"><img class="size-large wp-image-1153" title="vnunet-carousel" src="http://malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/vnunet-carousel-500x151.png" alt="vnunet carousel" width="500" height="151" /><p class="wp-caption-text">vnunet carousel</p></div></p>
<p>On the plus side, <a href="http://www.vnunet.com/">vnunet's</a> is clear enough what the numbers are for. On the minus side, who can be bothered to click them when there's no clue what they are going to show you?</p>
<p>Also, it's not clear what to click to get to the story - the headline is in fact a link, but it's the same colour as 'Today on vnunet.com' which is not a link. And with javascript off, the buttons don't do anything.</p>
<h3>ABC carousel: 3/10</h3>
<p><div id="attachment_1165" class="wp-caption aligncenter" style="width: 440px"><img class="size-full wp-image-1165" title="abc-carousel" src="http://malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/abc-carousel.png" alt="abc-carousel" width="430" height="383" /><p class="wp-caption-text">ABC carousel</p></div></p>
<p><a href="http://ww.abc.com">ABC's</a> is another one where it's not clear what the 6 elements are. But at least it rotates quickly. The 'watch free episodes' link is confusing as it never changes. And it looks like they were caught out by widescreen - the big grey box is always half empty.<!--more--></p>
<h3>CBS carousel: 3/10</h3>
<p><div id="attachment_1164" class="wp-caption aligncenter" style="width: 510px"><img class="size-large wp-image-1164" title="cbs-carousel" src="http://malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/cbs-carousel-500x208.png" alt="CBS carousel" width="500" height="208" /><p class="wp-caption-text">CBS carousel</p></div></p>
<p><a href="http://www.cbs.com/">CBS</a>: great design - lousy functionality.</p>
<p>First, it's obscured by an advert when you load the page. The control showing there are 5 items doesn't appear until you mouseover (so I didnt know it was there, or that the pictures were going to change). And there's no way to see what the 5 elements are. On top of all this, the relationship between the carousel and the top menu items is really unclear.</p>
<h3>ITV carousel: 5/10</h3>
<p><div id="attachment_1149" class="wp-caption aligncenter" style="width: 510px"><img class="size-large wp-image-1149" title="itv-carousel" src="http://malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/itv-carousel-500x141.png" alt="ITV carousel" width="500" height="141" /><p class="wp-caption-text">ITV carousel</p></div></p>
<p><a href="http://www.itv.com/">ITV</a>'s looks good and its fairly clear what the tabs do. However, it's not clear where to click to actually see the page (you can in fact click anywhere, but you have to work this out). And it's a shame for a TV site you can't play video from within the carousel.</p>
<p>And there seems to be some problem with the javascript and my browser as sometimes when I mouse over the tabs the cursor doesn't change. Some more testing needed perhaps?</p>
<h3>Express carousel: 6/10</h3>
<p><div id="attachment_1159" class="wp-caption aligncenter" style="width: 510px"><img class="size-large wp-image-1159" title="express-carousel" src="http://malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/express-carousel-500x238.png" alt="Express carousel" width="500" height="238" /><p class="wp-caption-text">Express carousel</p></div></p>
<p>Oh my god. I'm going to say something nice about the <a href="http://www.express.co.uk/home">Express</a> for <a href="http://www.malcolmcoles.co.uk/blog/express-no-updates-sunday/">once</a>. It's the only mainstream UK newspaper to use a carousel on its homepage. And it's not too bad.</p>
<p>It's clear what the tabs are for. everything that should be a link is, but there's a 'read more' call to action just in case. There are multiple content items in each tab in case the main one isn't of interest.</p>
<p>It's not perfect, obviosuly. It rotates automatically, which isn't clear and therefore annoying. And on the features panel, the headline was too long so the copy was all sitting on top of each other. And the <a href="http://www.malcolmcoles.co.uk/blog/newspaper-sites-poor-readability/">font size is tiny</a>. But these are mainly issues with the Express design - as a carousel, it works well.</p>
<h3>Videojug: 6/10</h3>
<p><div id="attachment_1150" class="wp-caption aligncenter" style="width: 510px"><img class="size-large wp-image-1150" title="videojug-carousel" src="http://malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/videojug-carousel-500x184.png" alt="Videojug carousel" width="500" height="184" /><p class="wp-caption-text">Videojug carousel</p></div></p>
<p>I've always liked <a href="http://www.videojug.com/">Videojug's</a>. It rotates automatically but you can also manually control it if you want to go back to one. There's a little timer showing how long until it rotates the content. My only criticisms are that the font is a bit small, and Ive always found it a bit wierd for a video site that you can't play the video from the carousel itself.</p>
<h3>Consumer Reports carousel: 6/10</h3>
<p><div id="attachment_1168" class="wp-caption aligncenter" style="width: 509px"><img class="size-large wp-image-1168" title="consumer-reports-carousel" src="http://malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/consumer-reports-carousel-499x226.png" alt="Consumer Reports carousel" width="499" height="226" /><p class="wp-caption-text">Consumer Reports carousel</p></div></p>
<p>Normally i wouldn't give a mark this high to a carousel which made you guess what the elements are. However, it's got an obvious 'Play / pause' control - the only automatic carousel I came across that did. So I gave it some more marks.</p>
<h3>BBC homepage: 8/10</h3>
<p><div id="attachment_1143" class="wp-caption aligncenter" style="width: 510px"><img class="size-large wp-image-1143" title="bbc-carousel" src="http://malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/bbc-carousel-500x243.png" alt="BBC's homepage carousel" width="500" height="243" /><p class="wp-caption-text">BBC&#39;s homepage carousel</p></div></p>
<p>Beautifully designed, as you'd expect, and you can even play video from within the carousel.</p>
<p>I don't think it's 100% obvious that the tabs control the box, however. Especially as when I load the page, the 4th purple tab seems to be the default one, which isn't very intuitive.</p>
<p>And it's shame that the images are all static photos - some motion might have been good.</p>
<h3>Sky News: the winner with 9/10</h3>
<p><div id="attachment_1156" class="wp-caption aligncenter" style="width: 510px"><img class="size-large wp-image-1156" title="sky-news" src="http://malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/sky-news-500x302.png" alt="Sky News carousel" width="500" height="302" /><p class="wp-caption-text">Sky News carousel</p></div></p>
<p>This one has everything. It rotates the content automatically, with a little timer showing when it will change. The images are actually videos, so it has a real energy about it. It's clear what's going on with the 5 elements - and you can also control them manually.</p>
<p>The only issue I has was that when I clicked the first story, there was no sign of this video on the page I was sent to, so it didn't really deliver on its promise. Functionality and design wise, however, I think this one's spot on.</p>
<h3>Tips on implementing a good one</h3>
<p>If you want a carousel, I reckon you should follow these rules:</p>
<ul>
<li>Let users see what all the elements are without clicking</li>
<li>Make them flexible enough to handle different types of content (pictures, videos, multiple links etc).</li>
<li>Make sure they are easy to understand how to control</li>
<li>Make it obvious what to click to change the content of the carousel, and what to click to go to the next page.</li>
<li>And if they rotate elements automatically, make sure it's clear what is happening and when.</li>
</ul>
<h3>Learn more about homepage carousels / sliders</h3>
<p>Here is some more reading:</p>
<ul>
<li><a href="http://www.smileycat.com/miaow/archives/000947.php">Home Page Carousel Showcase: 40+ Carousel Designs</a> (actual <a href="http://www.smileycat.com/design_elements/carousels/">examples here</a>).</li>
<li><a href="http://www.serie3.info/s3slider/demonstration.html">S3 slider jquery plugin example</a> - one way to add one of these devices to your homepage using jquery javascript library (<a href="http://www.serie3.info/s3slider/">documentation here</a>). There's another <a href="http://sorgalla.com/projects/jcarousel/">jquery carousel here</a>.</li>
<li><a href="http://developer.yahoo.com/yui/examples/carousel/index.html">Implement a carousel</a> yourself using the YUI Library instead of jquery. There's also a <a href="http://developer.yahoo.com/ypatterns/pattern.php?pattern=carousel">Carousel Pattern</a> at the Yahoo design pattern library.</li>
<li><a href="http://www.catswhocode.com/blog/top-10-javascript-slideshows-carousels-and-sliders">Top 10 javascript slideshows, carousels and sliders</a> for your blog or site at Cats Who Code.</li>
<li><a href="http://jqueryfordesigners.com/coda-slider-effect/">Creating your own slider</a>, again using jquery (I went from knowing nothing about javascript to implementing this one on my mum's website <a href="http://www.sabc.co.uk/st-albans-office.html">offering st albans offices</a>).</li>
<li>Here's a <a href="http://www.andrewsellick.com/75/simple-3d-carousel-using-mootools">3d carousel using mootools</a>, although I think this is getting away from being a usable one ...</li>
</ul>
<img src="http://www.malcolmcoles.co.uk/blog/?ak_action=api_record_view&id=1142&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.malcolmcoles.co.uk/blog/content-carousels-reviewed/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Newspaper sites: PLEASE improve your readability</title>
		<link>http://www.malcolmcoles.co.uk/blog/newspaper-sites-poor-readability/</link>
		<comments>http://www.malcolmcoles.co.uk/blog/newspaper-sites-poor-readability/#comments</comments>
		<pubDate>Mon, 20 Apr 2009 11:35:57 +0000</pubDate>
		<dc:creator>Malcolm Coles</dc:creator>
				<category><![CDATA[Bad reviews]]></category>
		<category><![CDATA[How to]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[Express]]></category>
		<category><![CDATA[FT]]></category>
		<category><![CDATA[Guardian]]></category>
		<category><![CDATA[Independent]]></category>
		<category><![CDATA[Mail]]></category>
		<category><![CDATA[Mirror]]></category>
		<category><![CDATA[Sun]]></category>
		<category><![CDATA[Telegraph]]></category>
		<category><![CDATA[Times]]></category>
		<category><![CDATA[usability]]></category>

		<guid isPermaLink="false">http://www.malcolmcoles.co.uk/blog/?p=1002</guid>
		<description><![CDATA[Newspaper websites are failing in some obvious ways to make their stories readable. Too many are using small fonts, long off-putting paragraphs, no subheadings, no in-content boxes or pictures, and no in-content links.]]></description>
			<content:encoded><![CDATA[<p>Most newspaper websites are doing a <strong>bad design job</strong> in making their stories readable.</p>
<p><div id="attachment_1013" class="wp-caption alignright" style="width: 282px"><strong><strong><a rel="attachment wp-att-1013" href="http://www.malcolmcoles.co.uk/blog/newspaper-sites-poor-readability/guardian-express-font-size/"><img class="size-full wp-image-1013" title="guardian-express-font-size" src="http://malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/guardian-express-font-size.png" alt="Guardian (13.98px Verdana) vs Express (12px Arial) default font size" width="272" height="134" /></a></strong></strong><p class="wp-caption-text">Guardian (13.98px Verdana) vs Express (12px Arial) default font size</p></div></p>
<p>Too many are using<strong>:</strong></p>
<ul>
<li><strong>small fonts,</strong></li>
<li><strong>long off-putting paragraphs,</strong></li>
<li><strong>no subheadings,</strong></li>
<li><strong>no in-content boxes or pictures, and</strong></li>
<li><strong>no in-content links.</strong></li>
</ul>
<p>To explain more, I've written a companion post on <a href="http://www.malcolmcoles.co.uk/blog/design-readability-websites/">online readability</a> (design, not writing).</p>
<p>And here's an example each of their news stories so you can see the issue: <a href="http://www.dailymail.co.uk/news/article-1171360/G20-policeman-manslaughter-quiz-revealed-news-vendor-died-internal-bleeding--heart-attack.html">Daily Mail</a>, <a href="http://www.dailyexpress.co.uk/posts/view/95692">Express</a>, <a href="http://www.ft.com/cms/s/0/8f2b008a-2b82-11de-b806-00144feabdc0.html">FT</a>, <a href="http://www.guardian.co.uk/uk/2009/apr/17/ian-tomlinson-g20-manslaughter-questioning">Guardian</a>, <a href="http://www.independent.co.uk/news/uk/crime/g20-victim-died-from-haemorrhage-1670257.html">Independent</a>, <a href="http://www.mirror.co.uk/news/top-stories/2009/04/17/body-found-in-york-s-river-ouse-near-where-uni-chef-claudia-lawrence-disappeared-115875-21285340/">Mirror</a>, <a href="http://www.thesun.co.uk/sol/homepage/news/article2381485.ece">Sun</a>, <a href="http://www.telegraph.co.uk/finance/financetopics/g20-summit/5172206/Ian-Tomlinson-G20-protests-death-police-office-faces-manslaughter-charge.html">Telegraph</a>, <a href="http://www.timesonline.co.uk/tol/news/uk/crime/article6113960.ece">Times</a>.</p>
<h3>Main readability design mistakes</h3>
<p>Here are the ways I think they're going wrong - underneath the <a href="http://spreadsheets.google.com/pub?key=p2KLm3zMFpk7cAX9bGnIwZg">table</a> I describe the main ways.<br />
<iframe src="http://spreadsheets.google.com/pub?key=p2KLm3zMFpk7cAX9bGnIwZg&#038;output=html&#038;gid=0&#038;single=true&#038;range=a1:k10" width="490" height="280" frameborder="0" scrolling="yes"></iframe><br />
<span id="more-1002"></span><br />
<h4>Tiny fonts</h4>
<p><strong>They are all using font sizes that are too small for comfortable reading </strong>on copy-heavy pages.</p>
<p>Only the Guardian, Independent, Mirror and Telegraph offer obvious controls for resizing text. But most of the sites use 12 or 13px fonts for body copy.</p>
<p>I think this is to small to be the default. This site uses 16px (well, 100% actually) - I reckon they should all use this.</p>
<h4>No sub-headings</h4>
<p>Astonishingly, <strong>not a single major newspaper site uses sub headings in its news stories,</strong> (apart from the Sun occasionally) despite this having been a <a href="http://www.useit.com/alertbox/9710a.html">generally accepted web readability recommendation since 1997</a> when it comes to helping people read webpages.</p>
<h4>Long paragraphs</h4>
<p><strong>Nearly half use long paragraphs, serving up great slabs of unappealing copy. </strong></p>
<p>This makes the pages hard to scan and read - again, despite using shorter paragraphs online being a standard online guideline.</p>
<h3>Bad readability</h3>
<p>These three are vying for last place when it comes to readability. I can't believe anyone could comfortably read these pages for long:</p>
<ul>
<li><strong>Express</strong> - A small font, expressed in absolute pixels, so Internet Explorer users can't even make it bigger. And the Express full-justifies its copy, making it harder to read as the gaps between words are different on each line. A complete pig's ear.</li>
<li><strong>Independent</strong> - A small font combined with multi-sentence paragraphs. A readability nightmare, even if there is a text-resize control.</li>
<li><strong>Daily Mail</strong> - The Mail does a good job of breaking up its pages with pictures. But its font size is too small, and there are no subheadings in the copy to help the user understand what the story is about or give the eye a rest.</li>
</ul>
<h3>Fairly poor readability</h3>
<ul>
<li><strong>Mirror</strong> - There's a font size control (although this is a poor second to having a big enough font in the first place). And although it's only 12px, the Mirror is at least using Verdana which is easier to read than Arial at small sizes. This, plus its use of short paragraphs, rescued it from the 'bad' list.</li>
<li><strong>Telegraph</strong> - Default font size is too small (smaller than that of the Times and FT), although there is a control to make it bigger. It uses short paragraphs, but for me it's all still too hard to read.</li>
<li><strong>Times</strong> - A slightly bigger font than the Telegraph, but no text size control, and paragraphs are too long. Someone introduce the CMS people to the return key ...</li>
<li><strong>FT</strong> - The font is starting to get big enough. But while it's paragraphs tend to be only one or two sentences, the sentences themselves tend to be long. You'd still have to really want to read a story to plough to the end of it.</li>
<li><strong>Guardian</strong> - Its font size is almost big enough for my liking, and I nearly put it in the 'getting there' list. But its paragraphs are too long, and there are no in-content devices (boxes etc) to break up the copy.</li>
</ul>
<h3>Getting there</h3>
<ul>
<li><strong>Sun</strong> - A nice big font, short paragraphs, copy broken up with images, and occasional sub-headings. Probably the best of them - some more sub-headings would really help though, and I'm not convinced by the Georgia font or the occasional use of italics.</li>
</ul>
<h3>Newspaper website readability: table notes</h3>
<p>Verdana and Arial are the same height at a given size, but Verdana is wider. At small font sizes, Verdana will be easier to read as it will look bigger. At bigger font sizes, it appears to stretched. The Sun is using Georgia, so its font sizes can't be directly compared to the others - at a given size, Georgia looks smaller than Arial and Verdana.</p>
<p>The Sun is also using <a href="http://wiki.novemberborn.net/sifr/What+is+sIFR">SIFR</a> to replace standard web fonts with a custom one in its headlines.</p>
<p>The Guardian is the only site to use in-copy links. These are a good idea to help people read a page, as they draw the eye and encourage people to keep reading. However, the Guardian has an annoying habit of linking keywords to its own pages when you might think they are external links.</p>
<p>The Independent treats its own stories (standfirst, long paragraphs) differently to agency-sourced ones (no standfirst, short paragraphs). The table shows information for its own stories.</p>
<h4>Headings explained</h4>
<p>These findings are all for the news pages. Other sections may be treated differently.</p>
<ul>
<li><strong>Headline size</strong> -Default font size (in pixels) for the main headline.</li>
<li><strong>Font size</strong> -Default font size in pixels for the body copy. The Express is set to an absolute size of 12px. The rest are in EMs, and I've assumed a 16px starting font.</li>
<li><strong>Body font</strong> -The first font listed in the CSS.</li>
<li><strong>Standfirst</strong> - Is there any summary or introduction to the news stories (EG a bold first paragraphs, or a more traditional standfirst)?</li>
<li><strong>Sub headings</strong> - Whether the copy is broken up with sub-headings.</li>
<li><strong>Short paragraphs</strong> -Are paragraphs kept short - 1 or 2 sentences, maximum. Or are there huge sections of copy that have probably been lifted verbatim from print?</li>
<li><strong>In-content boxes</strong> -Is there any attempt to break up the web copy with boxes (Eg ones with 'More ...' stories).</li>
<li><strong>In-copy links</strong> - Are links routinely used in the copy?</li>
<li><strong>Obvious text size control</strong> - Is there an obvious way to control the text size (I know you can use the browser to do this, and you probably know it too - but my mum doesn't. And I bet most people don't).</li>
</ul>
<p>Thanks to the excellent <a href="http://getfirebug.com/">Firebug</a> with deciphering the style sheets.</p>
<img src="http://www.malcolmcoles.co.uk/blog/?ak_action=api_record_view&id=1002&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.malcolmcoles.co.uk/blog/newspaper-sites-poor-readability/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Design, readability and websites</title>
		<link>http://www.malcolmcoles.co.uk/blog/design-readability-websites/</link>
		<comments>http://www.malcolmcoles.co.uk/blog/design-readability-websites/#comments</comments>
		<pubDate>Mon, 20 Apr 2009 11:34:39 +0000</pubDate>
		<dc:creator>Malcolm Coles</dc:creator>
				<category><![CDATA[How to]]></category>
		<category><![CDATA[Internet]]></category>

		<guid isPermaLink="false">http://www.malcolmcoles.co.uk/blog/?p=1010</guid>
		<description><![CDATA[There are several ways to make your copy readable on the web. Yet I see sites ignoring these simple tips, all the time - especially newspapers.
At the botom, you'll find this article repeated, breaking all ...]]></description>
			<content:encoded><![CDATA[<p>There are several ways to make your copy readable on the web. Yet I see sites ignoring these simple tips, all the time - especially <a href="http://www.malcolmcoles.co.uk/blog/newspaper-sites-poor-readability/">newspapers</a>.</p>
<p>At the botom, you'll find this article repeated, breaking all these rules ...</p>
<h3>Choose a large font size</h3>
<p>Fonts that are too small are hard to read. Obviously. However, people often think designs look nicer with smaller fonts.<span id="more-1010"></span></p>
<p>These people have obviously never given any thought to actually reading lots on content in the nice-looking design.</p>
<p><div id="attachment_1024" class="wp-caption alignright" style="width: 307px"><a rel="attachment wp-att-1024" href="http://www.malcolmcoles.co.uk/blog/design-readability-websites/nma-relaunch/"><img class="size-full wp-image-1024" title="nma-relaunch" src="http://malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/nma-relaunch.png" alt="NMA home page font is to small and pale grey" width="297" height="32" /></a><p class="wp-caption-text">NMA home page font is too small and pale grey</p></div></p>
<p>Browsers default to 16px (equivalent to about 12 point, if you're familiar with font sizes). The first thing most website style sheets do is change that to 12px, or even smaller.</p>
<p>New Media Age, for instance, relaunched its website today, using an 11px grey font on its home page.</p>
<p>If you've got a content-rich site, use a big font. We all know people scan rather than read on the web. They'll read even less if you use a small font.</p>
<h3>Use the right font</h3>
<p>There are a few font choices that sites mostly stick to - Arial, Verdana, Georgia etc - as they're pretty much guaranteed to be displayed by most browers.</p>
<h4>Arial vs Verdana</h4>
<p>Remember, though, that although these two fonts look very similar and are the same height at a given pixel size, Verdana is wider than Arial.</p>
<p>This means that at small sizes (eg below 15px) Verdana is easier to read. Above that it looks too spaced out and Arial is easier to read.</p>
<p>So if you have to use a small font, use Verdana. The combination of small font and Arial is really hard to read.</p>
<h3>Break up the copy with sub headings</h3>
<p>Break up your copy with sub-headings. It makes the page easier to scan, it gives the eye a rest from all that copy. It's good from an SEO point of view.</p>
<h4>And sub sub headings</h4>
<p>It's win, win, win.</p>
<h3>Use small paragraphs</h3>
<p>Make paragraphs one or two sentences only online.</p>
<p>Forget all that stuff you learned at school - that was for print. People scan the start of paragraphs and then move on.</p>
<p>So cram too much in, and they won't even notice the later sentences.</p>
<p>So ignore any advice about paragraphs being 3 to 5 sentences. The BBC has one sentence per paragraph. Do likewise.</p>
<h3>Get the contrast right</h3>
<p>Contrast can be a personal preference. But one thing we can all agree on is that copy on a busy background is hard to read. So don't do it.</p>
<h3>Web readability - more reading</h3>
<ul>
<li><a href="http://www.wilsonweb.com/wmt6/html-email-fonts.htm">HTML E-Mail: Text Font Readability Study</a> - Research showing that people prefer Arial at bigger sizes, Verdana with smaller sizes.</li>
<li><a href="http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/">Relative readability</a> - "After years of wondering why browsers defaulted to 16pt text sizes I'm starting to be convinced that long text really is significantly more readable on screen at precisely that size."</li>
<li><a href="http://informationarchitects.jp/100e2r/">The 100%-Easy-to-read standard</a> - "... after a day, you won't want to see anything smaller than 100% font-size for the main text. It looks big at first, but once you use it you quickly realize why all browser makers chose this as the default text size." Read this - then change your font size back to 100% / 16 pixels / 12 points.</li>
<li><a href="http://www.clagnut.com/blog/348/">How to size text using ems</a> - Internet Explorer will not allow readers to resize text that has been sized in pixels. So don't do it.</li>
<li><a href="http://www.communitymx.com/blog/index.cfm?newsid=941">Font Sizing: em, pixel, point, percent and keywords</a> - How 100%, 1em, 16px, 12pt are all the same. Plus other great tips and links on working with font sizes.</li>
<li><a href="http://informationarchitects.jp/the-web-is-all-about-typography-period/">Web design is 95% typography</a> - "95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography."</li>
</ul>
<h3>The article again, ignoring my own advice</h3>
<p><small>Fonts that are too small are hard to read. Obviously. However, people often think designs look nicer with smaller fonts. These people have obviously never given any thought to actually reading lots on content in the nice-looking design.</small></p>
<p><small>Browsers default to 16px (equivalent to about 12 point, if you're familiar with font sizes). The first thing most website style sheets do is change that to 12px, or even smaller. New Media Age, for instance, relaunched its website today, using an 11px grey font on its home page. If you've got a content-rich site, use a big font. We all know people scan rather than read on the web. They'll read even less if you use a small font.</small></p>
<p><small>There are a few font choices that sites mostly stick to - Arial, Verdana, Georgia etc - as they're pretty much guaranteed to be displayed by most browers. Remember, though, that although these two fonts look very similar and are the same height at a given pixel size, Verdana is wider than Arial. This means that at small sizes (eg below 15px) Verdana is easier to read. Above that it looks too spaced out and Arial is easier to read. So if you have to use a small font, use Verdana. The combination of small font and Arial is really hard to read.</small></p>
<p><small>Break up your copy with sub-headings. It makes the page easier to scan, it gives the eye a rest from all that copy. It's good from an SEO point of view. It's win, win, win.</small></p>
<p><small>Make paragraphs one or two sentences only online. Forget all that stuff you learned at school - that was for print. People scan the start of paragraphs and then move on. So cram too much in, and they won't even notice the later sentences.</small></p>
<p><small>So ignore any advice about paragraphs being 3 to 5 sentences. The BBC has one sentence per paragraph. Do likewise.</small></p>
<p><small>Contrast can be a personal preference. But one thing we can all agree on is that copy on a busy background is hard to read. So don't do it.</small></p>
<img src="http://www.malcolmcoles.co.uk/blog/?ak_action=api_record_view&id=1010&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.malcolmcoles.co.uk/blog/design-readability-websites/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Twitter avatars: choosing a brilliant one</title>
		<link>http://www.malcolmcoles.co.uk/blog/twitter-avatars-choosing/</link>
		<comments>http://www.malcolmcoles.co.uk/blog/twitter-avatars-choosing/#comments</comments>
		<pubDate>Wed, 15 Apr 2009 10:27:30 +0000</pubDate>
		<dc:creator>Malcolm Coles</dc:creator>
				<category><![CDATA[How to]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[Twitter]]></category>
		<category><![CDATA[avatars]]></category>
		<category><![CDATA[Best of 2009]]></category>

		<guid isPermaLink="false">http://www.malcolmcoles.co.uk/blog/?p=937</guid>
		<description><![CDATA[What makes a good Twitter avatar - with examples of good and bad avatars and lessons you can learn from them.]]></description>
			<content:encoded><![CDATA[<p>A good avatar can make the difference between someone seeing your tweet - or skimming past.</p>
<p>The big avatar on your profile page (73 pixels square) is shown smaller (just 48 pixels square) everywhere else. <strong>An avatar that looks good when big, often looks rubbish when small.</strong> Here are some top tips for choosing a good Twitter avatar, including loads of examples (click the photos to see whose they are).</p>
<h3>Use a good photo of yourself</h3>
<h4>Faces: bad</h4>
<p><!--</p>
<td class="none"><a href="http://twitter.com/	paula6thlevel" mce_href="http://twitter.com/	paula6thlevel"><img src="http://www.malcolmcoles.co.uk/images/face-bad/	paula6thlevel.jpg" mce_src="http://www.malcolmcoles.co.uk/images/face-bad/	paula6thlevel.jpg" alt="" /></a></td>
<p>...--></p>
<table class="nopadding" border="0" bgcolor="white">
<tbody>
<tr>
<td class="none"><a href="http://twitter.com/	dannysullivan"><img src="http://www.malcolmcoles.co.uk/images/face-bad/	dannysullivan.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	zenawest"><img src="http://www.malcolmcoles.co.uk/images/face-bad/	zenawest.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	davidblack"><img src="http://www.malcolmcoles.co.uk/images/face-bad/	davidblack.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	dokshor"><img src="http://www.malcolmcoles.co.uk/images/face-bad/	dokshor.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	jjbuss"><img src="http://www.malcolmcoles.co.uk/images/face-bad/	jjbuss.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	johngalpin"><img src="http://www.malcolmcoles.co.uk/images/face-bad/	johngalpin.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	mattcutts"><img src="http://www.malcolmcoles.co.uk/images/face-bad/	mattcutts.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	pests"><img src="http://www.malcolmcoles.co.uk/images/face-bad/	pests.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	richardkendall"><img src="http://www.malcolmcoles.co.uk/images/face-bad/	richardkendall.jpg" alt="" /></a></td>
</tr>
</tbody>
</table>
<p>These are all bad examples of facial photos (I'm sure the faces are fine <img src='http://www.malcolmcoles.co.uk/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> ). They're blurry, badly lit, taken from too far away, have busy backgrounds - or are obscured by cats. They might work some places - but they don't work well on Twitter. (One face removed as per owners' request).<span id="more-937"></span></p>
<h4>Faces: good examples</h4>
<table class="nopadding" border="0" bgcolor="white">
<tbody>
<tr>
<td class="none"><a href="http://twitter.com/	jemimakiss"><img src="http://www.malcolmcoles.co.uk/images/face-good/	jemimakiss.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	lyndoman"><img src="http://www.malcolmcoles.co.uk/images/face-good/	lyndoman.gif" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	paulhaynes"><img src="http://www.malcolmcoles.co.uk/images/face-good/	paulhaynes.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	twiter_twotter"><img src="http://www.malcolmcoles.co.uk/images/face-good/	twiter_twotter.png" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/msblack"><img src="http://www.malcolmcoles.co.uk/images/face-good/	msblack.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	bengoldacre"><img src="http://www.malcolmcoles.co.uk/images/face-good/	bengoldacre.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	dav_hamill"><img src="http://www.malcolmcoles.co.uk/images/face-good/	dav_hamill.png" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	ruthbarnett"><img src="http://www.malcolmcoles.co.uk/images/face-good/	ruthbarnett.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	sbspalding"><img src="http://www.malcolmcoles.co.uk/images/face-good/	sbspalding.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	Nicksc"><img src="http://www.malcolmcoles.co.uk/images/face-good/	Nicksc.jpg" alt="" /></a></td>
</tr>
</tbody>
</table>
<p>These are much better - you can see who the photo is of.</p>
<h4>Lessons for photos of faces</h4>
<p>If you're going to use a picture of yourself, follow these simple rules:</p>
<ul>
<li><strong>Use a well-lit photo</strong> (ie with your face lit, not with a bright background).</li>
<li><strong>Concentrate on the foreground</strong>. Think about using a photo editor to replace the background with a solid colour (try a free online photo editor like <a href="http://www.picnik.com/">picnik</a>).</li>
<li><strong>Concentrate on your face. </strong>A close up will be much clearer. We don't need to see your shoulders or chest.</li>
<li><strong>You can still be creative</strong> - luminous zigzags, words, colour washes etc can all help your Twitter avatar stand out even more.</li>
<li><strong>Don't use your mobile phone.</strong> Really - a picture you take of yourself using your mobile will look really bad. If you have to use it, at least get someone else to take it.</li>
</ul>
<h3>Use a cutout</h3>
<table class="nopadding" border="0" bgcolor="white">
<tbody>
<tr>
<td class="none"><a href="http://twitter.com/	wellyroadalerts"><img src="http://www.malcolmcoles.co.uk/images/cutouts/	wellyroadalerts.gif" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	okcityweather"><img src="http://www.malcolmcoles.co.uk/images/cutouts/	okcityweather.png" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	Bingolero"><img src="http://www.malcolmcoles.co.uk/images/cutouts/	Bingolero.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	brendan_miller"><img src="http://www.malcolmcoles.co.uk/images/cutouts/	brendan_miller.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	dogbook"><img src="http://www.malcolmcoles.co.uk/images/cutouts/	dogbook.png" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	jamesbeston"><img src="http://www.malcolmcoles.co.uk/images/cutouts/	jamesbeston.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	lafmacun"><img src="http://www.malcolmcoles.co.uk/images/cutouts/	lafmacun.gif" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	marketingwizdom"><img src="http://www.malcolmcoles.co.uk/images/cutouts/	marketingwizdom.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	socialmedialcom"><img src="http://www.malcolmcoles.co.uk/images/cutouts/	socialmedialcom.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	SulumitsRetsamb"><img src="http://www.malcolmcoles.co.uk/images/cutouts/	SulumitsRetsamb.jpg" alt="" /></a></td>
</tr>
</tbody>
</table>
<p>Most people use normal, square photos. So a cutout can really stand out - you can use a symbol, a real-world object on a white background, or even a photo of yourself with a white background. Whatever you do, these often stand out much more than just a square photo.</p>
<h3>If you're a company ... think about your logo</h3>
<h4>Logos: bad</h4>
<table class="nopadding" border="0" bgcolor="white">
<tbody>
<tr>
<td class="none"><a href="http://twitter.com/	mediatrustpete"><img src="http://www.malcolmcoles.co.uk/images/logo-bad/	mediatrustpete.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	econsultancy"><img src="http://www.malcolmcoles.co.uk/images/logo-bad/	econsultancy.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	guardiannews"><img src="http://www.malcolmcoles.co.uk/images/logo-bad/	guardiannews.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	amazon"><img src="http://www.malcolmcoles.co.uk/images/logo-bad/	amazon.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	Orcon"><img src="http://www.malcolmcoles.co.uk/images/logo-bad/	Orcon.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	lisacall"><img src="http://www.malcolmcoles.co.uk/images/logo-bad/	lisacall.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	JonathanTorrell"><img src="http://www.malcolmcoles.co.uk/images/logo-bad/	JonathanTorrell.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	BravesBlast"><img src="http://www.malcolmcoles.co.uk/images/logo-bad/	BravesBlast.gif" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	phillycomgreen"><img src="http://www.malcolmcoles.co.uk/images/logo-bad/	phillycomgreen.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	omniture"><img src="http://www.malcolmcoles.co.uk/images/logo-bad/	omniture.png" alt="" /></a></td>
</tr>
</tbody>
</table>
<p>If you're going to use your company logo, try to make sure we can work out who you are. Some things to look out for:</p>
<ul>
<li><strong>Words need to be readable</strong> - even if I squint, I can't read the words on theÂ  @orcon, @econsultancy or @jonathantorrell logos.</li>
<li><strong>Crop your logo sensibly.</strong> Twitter avatars are square. Your logo might not be. @amazon might be more readable if they made the amazon bit bigger and dropped the .com. Whereas @guardiannews has gone a bit too far in cropping its logo ...</li>
<li><strong>Think about the colours.</strong> I could probably read OMNITURE if only it wasn't white on a pale grey background.</li>
</ul>
<h4>Logos: good</h4>
<table class="nopadding" border="0" bgcolor="white">
<tbody>
<tr>
<td class="none"><a href="http://twitter.com/	Cheeseman1208"><img src="http://www.malcolmcoles.co.uk/images/logo-good/	Cheeseman1208.gif" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	theseoking"><img src="http://www.malcolmcoles.co.uk/images/logo-good/	theseoking.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	imdb"><img src="http://www.malcolmcoles.co.uk/images/logo-good/	imdb.png" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	lgbloguk"><img src="http://www.malcolmcoles.co.uk/images/logo-good/	lgbloguk.png" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	one_minute_cure"><img src="http://www.malcolmcoles.co.uk/images/logo-good/	one_minute_cure.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	PCmagsTop10"><img src="http://www.malcolmcoles.co.uk/images/logo-good/	PCmagsTop10.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	prosport"><img src="http://www.malcolmcoles.co.uk/images/logo-good/	prosport.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	readmedianews"><img src="http://www.malcolmcoles.co.uk/images/logo-good/	readmedianews.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	whichtech"><img src="http://www.malcolmcoles.co.uk/images/logo-good/	whichtech.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	sphinn"><img src="http://www.malcolmcoles.co.uk/images/logo-good/	sphinn.png" alt="" /></a></td>
</tr>
</tbody>
</table>
<p>These are all much better - you can see what they are or read what they're saying (even PC magazine, which has lopped the bottom of magazine off for some reason, is more readable than the bad examples above).</p>
<h3>Be clear, whatever you do</h3>
<table class="nopadding" border="0" bgcolor="white">
<tbody>
<tr>
<td class="none"><a href="http://twitter.com/	bookwarren"><img src="http://www.malcolmcoles.co.uk/images/unclear/	bookwarren.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	roydaylmer"><img src="http://www.malcolmcoles.co.uk/images/unclear/	roydaylmer.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	george_tr"><img src="http://www.malcolmcoles.co.uk/images/unclear/	george_tr.JPG" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	HarryHotter"><img src="http://www.malcolmcoles.co.uk/images/unclear/	HarryHotter.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	health4uandpets"><img src="http://www.malcolmcoles.co.uk/images/unclear/	health4uandpets.JPG" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	kevinrose"><img src="http://www.malcolmcoles.co.uk/images/unclear/	kevinrose.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	lancearmstrong"><img src="http://www.malcolmcoles.co.uk/images/unclear/	lancearmstrong.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	mdsn"><img src="http://www.malcolmcoles.co.uk/images/unclear/	mdsn.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	newbordeaux"><img src="http://www.malcolmcoles.co.uk/images/unclear/	newbordeaux.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	primerx24"><img src="http://www.malcolmcoles.co.uk/images/unclear/	primerx24.jpg" alt="" /></a></td>
</tr>
</tbody>
</table>
<p>As I said in the intro, remember most people see your avatar small - they won't bother going to your profile page to see it proper size. I can't make head or tail of these 10 ...</p>
<h3>Think about illustrations</h3>
<table class="nopadding" border="0" bgcolor="white">
<tbody>
<tr>
<td class="none"><a href="http://twitter.com/	bluemelbo"><img src="http://www.malcolmcoles.co.uk/images/cartoon/	bluemelbo.jpg" alt="" width="48" height="48" /></a></td>
<td class="none"><a href="http://twitter.com/	sadbox"><img src="http://www.malcolmcoles.co.uk/images/cartoon/	sadbox.png" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	dagelijksekoop"><img src="http://www.malcolmcoles.co.uk/images/cartoon/	dagelijksekoop.png" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	dropforme"><img src="http://www.malcolmcoles.co.uk/images/cartoon/	dropforme.png" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	funner427"><img src="http://www.malcolmcoles.co.uk/images/cartoon/	funner427.JPG" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	ifknot"><img src="http://www.malcolmcoles.co.uk/images/cartoon/	ifknot.png" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	jfisatwit"><img src="http://www.malcolmcoles.co.uk/images/cartoon/	jfisatwit.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	nlj"><img src="http://www.malcolmcoles.co.uk/images/cartoon/	nlj.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	patscullion"><img src="http://www.malcolmcoles.co.uk/images/cartoon/	patscullion.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	randomnicole"><img src="http://www.malcolmcoles.co.uk/images/cartoon/	randomnicole.jpg" alt="" /></a></td>
</tr>
</tbody>
</table>
<p>Most avatars are photos - so illustrations can stand out, whether cut outs or on a colour background (although see this post on <a href="http://www.using-twitter.com/blog/twitter-avatars-photo-vs-logo/">photos vs illustrations</a> - and <a rel="nofollow" href="http://kgmb9.com/tech/?p=88">perhaps the opposite view</a>). Here's a guide to <a href="http://twitterbackgroundsgallery.com/2009/03/25/basic-hand-drawn-twitter-avatar-tutorial/">hand drawing them</a> (although step 1 of being supplied with some artisitic talent is missing though!)</p>
<h3>YOU can't have an animated one</h3>
<table class="nopadding" border="0" bgcolor="white">
<tbody>
<tr>
<td class="none"><a href="http://twitter.com/	allangoesdmb"><img src="http://www.malcolmcoles.co.uk/images/animated/	allangoesdmb.gif" alt="" width="48" height="48" /></a></td>
<td class="none"><a href="http://twitter.com/	amazingcolors"><img src="http://www.malcolmcoles.co.uk/images/animated/	amazingcolors.gif" alt="" width="48" height="48" /></a></td>
<td class="none"><a href="http://twitter.com/	angelmcclinton"><img src="http://www.malcolmcoles.co.uk/images/animated/	angelmcclinton.gif" alt="" width="48" height="48" /></a></td>
<td class="none"><a href="http://twitter.com/	ballstink"><img src="http://www.malcolmcoles.co.uk/images/animated/	ballstink.gif" alt="" width="48" height="48" /></a></td>
<td class="none"><a href="http://twitter.com/	charlief"><img src="http://www.malcolmcoles.co.uk/images/animated/	charlief.gif" alt="" width="48" height="48" /></a></td>
<td class="none"><a href="http://twitter.com/	larryczerwonka"><img src="http://www.malcolmcoles.co.uk/images/animated/	larryczerwonka.gif" alt="" width="48" height="48" /></a></td>
<td class="none"><a href="http://twitter.com/	pennyhaynes"><img src="http://www.malcolmcoles.co.uk/images/animated/	pennyhaynes.gif" alt="" width="48" height="48" /></a></td>
<td class="none"><a href="http://twitter.com/	positiveroot"><img src="http://www.malcolmcoles.co.uk/images/animated/	positiveroot.gif" alt="" width="48" height="48" /></a></td>
<td class="none"><a href="http://twitter.com/	tiffanydow"><img src="http://www.malcolmcoles.co.uk/images/animated/	tiffanydow.gif" alt="" width="48" height="48" /></a></td>
<td class="none"><a href="http://twitter.com/	vinn0sx"><img src="http://www.malcolmcoles.co.uk/images/animated/	vinn0sx.GIF" alt="" width="48" height="48" /></a></td>
</tr>
</tbody>
</table>
<p>You can only have an animated one if you can upload a GIF. But <a href="http://twittertips.asktomogden.com/can-i-upload-an-animated-gif-avatar-to-my-twitter-profile/">Twitter has now banned them</a>. Thank god - can you imagine if we all did this?!? If you're already got one, you can keep it thought. Woopee.</p>
<h3>Some definite no-nos</h3>
<table class="nopadding" border="0" bgcolor="white">
<tbody>
<tr>
<td class="none"><a href="http://twitter.com/	bloggersavvy"><img src="http://www.malcolmcoles.co.uk/images/no-no/	bloggersavvy.jpg" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	herring1967"><img src="http://www.malcolmcoles.co.uk/images/no-no/	herring1967.png" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	jaimecser"><img src="http://www.malcolmcoles.co.uk/images/no-no/	jaimecser.png" alt="" /></a></td>
<td class="none"><a href="http://twitter.com/	sugarrae"><img src="http://www.malcolmcoles.co.uk/images/no-no/	sugarrae.jpg" alt="" /></a></td>
</tr>
</tbody>
</table>
<p>Some tips that ought to be obvious ...:</p>
<ul>
<li><strong>Avoid swearing.</strong> Don't have a logo where the letters - <a href="http://en.wikipedia.org/wiki/Bullshit">BS</a> in this case -Â  are short for bullsh!t in some countries.</li>
<li><strong>Avoid Hitler.</strong> Don't use Hitler as your avatar (even if you are a comedian and it's a poster).</li>
<li><strong>Don't stick with the default one.</strong> Change it!</li>
<li><strong>No rude signs.</strong> Don't make what you think is a peace sign, but actually appear to making a <a href="http://en.wikipedia.org/wiki/V_sign">v-sign</a>.</li>
</ul>
<h3>Other things to bear in mind</h3>
<ul>
<li><strong>Remember that they're square</strong> - don't try and cram in a rectangular one - if it goes through, it will get scrunched up and look rubbish.</li>
<li><strong>Your file name survives</strong> - so on the off chance anyone ever looks at it, no swearing etc in the file name.</li>
<li><strong>They are used even smaller in the 'following' box in the right hand side of people's profiles.</strong> The avatars are just half as tall (24 pixels) and wide here - so rubbish ones look even worse still.</li>
<li><strong>It's your avatar</strong> - so do what you like with it!</li>
</ul>
<p>So you can see how they stand out - or don't - here is a group shot of all these Twitter avatars:</p>
<p><div id="attachment_998" class="wp-caption aligncenter" style="width: 510px"><img class="size-large wp-image-998" title="Twitter avatars" src="http://malcolmcoles.co.uk/blog/wp-content/uploads/2009/04/twitter-avatars-500x318.png" alt="Twitter avatars" width="500" height="318" /><p class="wp-caption-text">Twitter avatars</p></div></p>
<p><strong>Let the slagging off of my avatar begin ...</strong></p>
<img src="http://www.malcolmcoles.co.uk/blog/?ak_action=api_record_view&id=937&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.malcolmcoles.co.uk/blog/twitter-avatars-choosing/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>URL shorteners reviewed</title>
		<link>http://www.malcolmcoles.co.uk/blog/url-shorteners-review/</link>
		<comments>http://www.malcolmcoles.co.uk/blog/url-shorteners-review/#comments</comments>
		<pubDate>Tue, 24 Mar 2009 23:46:51 +0000</pubDate>
		<dc:creator>Malcolm Coles</dc:creator>
				<category><![CDATA[Good reviews]]></category>
		<category><![CDATA[How to]]></category>
		<category><![CDATA[reviews]]></category>
		<category><![CDATA[url shorteners]]></category>

		<guid isPermaLink="false">http://www.malcolmcoles.co.uk/blog/?p=571</guid>
		<description><![CDATA[URL shorteners reviewed for length, statistics and custom names.]]></description>
			<content:encoded><![CDATA[<p>URL shorteners transform ugly, long URLs into short ones that you can email without fear of them breaking - or include in Twitter tweets without using up too many characters.</p>
<p>For instance, I've shortened the URL for http://www.malcolmcoles.co.uk/blog/external-links-9-stages-of-linking-out-denial/ to <span class="status-body"><span class="entry-content"><a rel="nofollow" href="http://tinyurl.com/c8bp5d" target="_blank">http://tinyurl.com/c8bp5d</a></span></span> instead (25 characters instead of 92)<span class="status-body"><span class="entry-content">.<br />
</span></span></p>
<h3>But which URL shortener service is best?</h3>
<p>Use this URL shortener list to decide ... It shows sites I've observed to be popular on Twitter,  ordered by the length of the URL generated. <strong>I reckon tr.im is the winner.</strong> Although they all seem fairly good.</p>
<table border="1">
<tbody><!-- Results table headers --></p>
<tr>
<th> URL<br />
Shortener</th>
<th>URL length</th>
<th>Tracking / stats</th>
<th>Custom name option</th>
<th>Post direct to Twitter</th>
</tr>
<tr>
<td><a href="http://tr.im">Tr.im</a></td>
<td>13+4=<strong>17</strong></td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td><a href="http://is.gd">Is.gd</a></td>
<td>13+4=<strong>17</strong></td>
<td>No</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td><a href="http://ow.ly">Ow.ly</a></td>
<td>13+4=<strong>17</strong></td>
<td>No</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td><a href="http://bit.ly">Bit.ly</a></td>
<td>14+5=<strong>19</strong></td>
<td>Yes</td>
<td>Yes</td>
<td>If you register</td>
</tr>
<tr>
<td><a href="http://xrl.us">Xrl.us</a></td>
<td>14+5=<strong>19</strong></td>
<td>Yes</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td><a href="http://cli.gs">Cli.gs</a></td>
<td>14+6=<strong>20</strong></td>
<td>Yes</td>
<td>If you register</td>
<td>If you register</td>
</tr>
<tr>
<td><a href="http://Short.to">Short.to</a></td>
<td>16+4=<strong>20</strong></td>
<td>No</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td><a href="http://snurl.com">Snurl.com</a></td>
<td>17+5=<strong>22</strong></td>
<td>No</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td><a href="http://twurl.nl">Twurl.nl</a></td>
<td>16+6=<strong>22</strong></td>
<td>Yes</td>
<td>No</td>
<td>If you register</td>
</tr>
<tr>
<td><a href="http://tinyurl.com">Tinyurl.com</a></td>
<td>19+6=<strong>25</strong></td>
<td>No</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td><a href="http://notlong.com">Notlong.com</a></td>
<td>19+6=<strong>25</strong></td>
<td>Yes</td>
<td>Yes</td>
<td>No</td>
</tr>
</tbody>
</table>
<h3>What the headings mean</h3>
<ul>
<li><strong>URL length</strong> shows how many characters (including the http:// at the front) the shortened URL generated for this site's homepage was. The first figure is the base length (EG http://tr.im/ is 13 characters), the second number is the short code generated (this can vary from 4 to 6 characters at most services - popular services have used up all the 4-character ones already - so you might expect tr.im to change to 13+5 if this post is very popular!), and the final number is the total.</li>
<li><strong>Tracking / statistics</strong> shows whether there  you can see figures for how many people have clicked on your shortened URL (EG if you used it on Twitter). You have to register to get these figures.</li>
<li><strong>Custom name</strong> - whether you can choose your own memorable short-code or not (rather than the random string of letters automatically generated).</li>
<li><strong>Post direct to Twitter</strong> - can you post to Twitter from the website of the service? (Although they all have plugins or extensions to let you use their services direct from your browser whichever site you are on.)</li>
</ul>
<h3>Even shorter still?</h3>
<p>There is also the <a href="http://tinyarro.ws/">tinyarro.ws</a> services, mentioned in the comments below. It uses unicode characters to make URLs shorter still - it made my homepage into just 13 characters. Although you might want to read <a href="http://news.ycombinator.com/item?id=498051">the comments here</a> - does anyone have any experience of it ...?</p>
<img src="http://www.malcolmcoles.co.uk/blog/?ak_action=api_record_view&id=571&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.malcolmcoles.co.uk/blog/url-shorteners-review/feed/</wfw:commentRss>
		<slash:comments>21</slash:comments>
		</item>
		<item>
		<title>29 easy ways to fine tune your blog</title>
		<link>http://www.malcolmcoles.co.uk/blog/easy-ways-fine-tune-blog/</link>
		<comments>http://www.malcolmcoles.co.uk/blog/easy-ways-fine-tune-blog/#comments</comments>
		<pubDate>Wed, 04 Mar 2009 23:44:20 +0000</pubDate>
		<dc:creator>Malcolm Coles</dc:creator>
				<category><![CDATA[How to]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[blog]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[seo]]></category>

		<guid isPermaLink="false">http://www.malcolmcoles.co.uk/blog/?p=418</guid>
		<description><![CDATA[Easy ways to fine tune your blog. Do them today and make a BIG difference!]]></description>
			<content:encoded><![CDATA[<h3>Organising your content</h3>
<ol>
<li><strong>Review your categories.</strong> Do they still make sense? Make sure you redirect if you change them.</li>
<li><strong>Review your tags. </strong>Are all relevant posts tagged correctly? Once you've tagged all the posts, review your tags. Do you still need them all (EG, I've ended up with review and reviews as tags). Delete those you don't need, and redirect the tag pages.</li>
<li><strong>Follow-up posts. </strong>Have you got follow-up posts? Edit the older ones to link to the newer ones.</li>
<li><strong>Are posts related to each other?</strong> If so, install a <a href="http://wordpress.org/extend/plugins/yet-another-related-posts-plugin/">related posts</a> plug in or manually edit old posts to include the link to later, relevant ones.</li>
<li><strong>Check your blogroll.</strong> Are they still all sites you really want to link to?</li>
<li><strong>Uncategorised. </strong>Have you got any posts in the Uncategorised category? Categorise them!</li>
</ol>
<h3>Helping search engines</h3>
<ol>
<li><strong>Google Webmaster. </strong>If you haven't got one, get a <a href="http://www.google.com/webmasters/tools/">google webmaster account</a>. It'll tell you where you're going wrong.</li>
<li><strong>Broken links. </strong>Use that account to identify links to pages on your blog that are no longer there. Use a redirection plugin to redirect them somewhere sensible.</li>
<li><strong>Sitemap. </strong>Set up a <a href="http://wordpress.org/extend/plugins/google-sitemap-generator/">sitemap</a> if your site is big enough.</li>
<li><strong>Nofollow. </strong>Look in your theme, and <a href="http://codex.wordpress.org/Nofollow">nofollow</a> links to pages you don't want search engines to see, like your RSS feed.</li>
<li><strong>Robots.txt. </strong>Check your <a href="http://www.twentysteps.com/creating-the-ultimate-wordpress-robotstxt-file/">robots.txt</a> file, and use it to tell search engines to ignore pages like your account login page, and other pages there is no point them indexing.</li>
<li><strong>Meta descriptions. </strong>Make sure you have unique <a href="http://www.malcolmcoles.co.uk/blog/unique-meta-description-and-meta-keywords-in-your-wordpress-themes/">meta tags</a> on your pages. Use the tip on this blog or else a plugin like <a href="http://wp.uberdose.com/2007/05/11/all-in-one-seo-pack-help/">AIOSEO</a>.</li>
<li><strong>Pagination. </strong>Turn off <a href="http://www.malcolmcoles.co.uk/blog/avoid-duplicate-content-paged-comments-wordpress-27/">comment pagination</a> if you don't have that many comments. Even with no comments, you'll get multiple URLs for each post. And try using the <a href="http://www.malcolmcoles.co.uk/blog/use-rel-canonical-fix-duplicate-comment-problems-comment-pagination-in-wordpress/">rel=canonical</a> tag, too.</li>
<li><strong>Anchor text. </strong>When you're looking through old posts, check what anchor text you're using to link to other blog posts. Make sure you use relevant text, rather than words like 'read more'.</li>
</ol>
<h3>Making your blog easier to use</h3>
<ol>
<li><strong>Font size.</strong> How big is the <a href="http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/">font size</a>? Edit the theme to make it bigger if it's too small.</li>
<li><strong>Browser check.</strong> How does your blog look in other browsers? Use a service like <a href="http://browsershots.org/">browsershots</a> to check.</li>
<li><strong>Comment threading.</strong> Assuming you've got 2.7, <a href="http://ottodestruct.com/blog/2008/09/29/wordpress-27-comments-enhancements/">turn on</a> comment threading.</li>
<li><strong>Bounce rates.</strong> Sign up for google analytics. Check the time spent by users on each content page. If some pages have high bounce rates or little time spent on them, try to work out what people want and edit accordingly.</li>
<li><strong>Review and edit.</strong> Check out each page of content - split up long paragraphs, make sure subheadings are used liberally, and that introductions make sense. You'll probably find you've got better at writing blogs, so early posts might need more tweaking to make the content web-reading friendly.</li>
<li><strong>You.</strong> Add an 'About You' page. If people are interested in your content, they'll probably be interested in you. Tell them.</li>
<li><strong>Excerpt.</strong> Change to using just the <a href="http://www.seocrunch.com/use-excerpts-in-wordpress-to-get-category-pages-ranked/">excerpt on category archive pages</a>. This is all people really need to see on an index page.</li>
<li><strong>Custom 404 page.</strong> Add a <a href="http://www.binarymoon.co.uk/2007/07/wordpress-tips-and-tricks-custom-404-error-pages/">custom 404</a> page:</li>
<li><strong>Add sharethis.</strong> Make it easy for people to tell others about your content.</li>
<li><strong>Hey, it's me!</strong> Style <a href="http://www.wprecipes.com/how-to-style-author-comments-in-wordpress-27">your own comments</a> differently.</li>
<li><strong>Subscribe to comments.</strong> Allow people to <a href="http://txfx.net/code/wordpress/subscribe-to-comments/">subscribe to comments by email</a>.</li>
</ol>
<h3>The backend</h3>
<ol>
<li><strong>Plugins.</strong> Turn off any plugins you're not using. They'll slow down your blog.</li>
<li><strong>Optimise your database.</strong> All those deleted and draft posts and comments have probably left it with all sorts of junk in it. Try <a href="http://www.jtpratt.com/wordpress-hack-8-how-to-optimize-and-backup-your-wordpress-database/">this page</a> or <a href="http://wordpress.jdwebdev.com/blog/optimize-database-tables/">this one</a>.</li>
<li><strong>Update theme.</strong> Check the homepage of whoever created your theme. Have they updated it?</li>
<li><strong>Sort out your security.</strong> Make sure <a href="http://www.thisismyurl.com/tutorials/wordpress-help/how-to-secure-your-wordpress-website/">people can't access</a> your plugin or other folders.</li>
</ol>
<p>Got any more suggestions? Let me know and I'll add them!</p>
<img src="http://www.malcolmcoles.co.uk/blog/?ak_action=api_record_view&id=418&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.malcolmcoles.co.uk/blog/easy-ways-fine-tune-blog/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Avoid duplicate content with paged comments in wordpress</title>
		<link>http://www.malcolmcoles.co.uk/blog/avoid-duplicate-content-paged-comments-wordpress-27/</link>
		<comments>http://www.malcolmcoles.co.uk/blog/avoid-duplicate-content-paged-comments-wordpress-27/#comments</comments>
		<pubDate>Fri, 16 Jan 2009 23:47:46 +0000</pubDate>
		<dc:creator>Malcolm Coles</dc:creator>
				<category><![CDATA[How to]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://www.malcolmcoles.co.uk/blog/?p=266</guid>
		<description><![CDATA[How to avoid duplicate content in paged comments in wordpress 2.7]]></description>
			<content:encoded><![CDATA[<p>I've written before about the problem of <a href="http://www.malcolmcoles.co.uk/blog/wordpress-comment-pagination-and-duplicate-content/">duplicate content problems with wordpress comment pagination</a>.</p>
<p>After reading this post about <a href="http://pressedwords.com/solving-wordpress-seo-paged-comments-problem/">using the excerpt on pages 2 or higher</a> of the comment loop, I discovered the variable that will give a similar solution to that for <a href="http://www.malcolmcoles.co.uk/blog/avoid-duplicate-meta-descriptions-in-pages-2-and-higher-of-the-wordpress-loop/">duplicate content in pages 2 or higher of the wordpress loop</a>.</p>
<p>So use the PHP below, and you won't have duplicate content problems if you have paginated comments. <strong>Update: </strong>And see Christian's comment at the end to see it not only in action, but how he's edited All in One SEO Pack to get it to work with that as well. Blimey!</p>
<h3>Use cpage instead of paged</h3>
<p>To avoid duplicate content problems, you need a different title and a different meta description. The easiest way to do this is to add 'Page X' into the title and meta description of the blog post.</p>
<p>Here's the code to do this - add it into your theme's header just before the closing &lt;/title&gt; tag:</p>
<p>&lt;?php if ( $cpage &lt; 2 ) {}<br />
else { echo (' - comment page '); echo ($cpage);}<br />
?&gt;</p>
<p>Do something similar with the code that generates your meta description.</p>
<h3>What the code does</h3>
<p>If you're on page two or higher of paginated comments, it adds ' - comment page X' (where X is the comment page) to the end of the title (which is the heading that appears in google).</p>
<p>You can use something similar in your meta description code.</p>
<h3>Where can I see it working?</h3>
<p>It was working here when I tried it. As the most comments I have on a post is 19 so far,Â  however, I don't actually paginate my comments yet (it's set to the default of 50 - I changed it to 2 to test it, but i couldn't really leave it like that!!)</p>
<p>Perhaps someone with a lot of comments could use it and provide a link so we can see it working ... <strong>Update</strong>: See Christian's comment for someone who has done just that.</p>
<img src="http://www.malcolmcoles.co.uk/blog/?ak_action=api_record_view&id=266&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.malcolmcoles.co.uk/blog/avoid-duplicate-content-paged-comments-wordpress-27/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Breadcrumb navigation trails and WordPress</title>
		<link>http://www.malcolmcoles.co.uk/blog/breadcrumb-trails-in-wordpress/</link>
		<comments>http://www.malcolmcoles.co.uk/blog/breadcrumb-trails-in-wordpress/#comments</comments>
		<pubDate>Wed, 07 Jan 2009 00:16:17 +0000</pubDate>
		<dc:creator>Malcolm Coles</dc:creator>
				<category><![CDATA[How to]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://www.malcolmcoles.co.uk/blog/?p=224</guid>
		<description><![CDATA[How to add a breadcrumb trail in wordpress, without using a plugin.]]></description>
			<content:encoded><![CDATA[<p>This post shows you to use one line of PHP to show a breadcrumb trail in wordpress - dispensing with complicated code and breadcrumb plugins. You will have to make a few minor changes to one core wordpress file.</p>
<h3>What is a breadcrumb trail</h3>
<p>Breadcrumb trails are those URLs you see at the top of many large sites' pages that look like this:</p>
<p><span style="text-decoration: underline;">Home</span> &gt; <span style="text-decoration: underline;">Category</span> &gt; <span style="text-decoration: underline;">Sub category</span> &gt; Title of page you're on</p>
<p>You can see them in action on, for instance, the <a href="http://wordpress.org/support/topic/222201?replies=1">wordpress site</a> - the top left bit that says:</p>
<p>WordPress â€º Support Â» How-To and Troubleshooting</p>
<h3>Why you might want a breadcrumb trail</h3>
<p>If you have a large site with many categories and sub categories, you might find it useful to have a breadcrumb trailÂ  - especially if you are using wordpress as a CMS for instance. Breadcrumbs are useful as:</p>
<ul>
<li>They give users an easy way to get to higher level pages.</li>
<li>They help users understand where on the site they are.</li>
<li>And they also help them understand what a site is about.</li>
</ul>
<p>You don't really need one on a small blog - I just list the relevant categories under the main title of each page, and this is sufficient as I don't have lots of sub categories.</p>
<h3>How to add a breadcrumb trail in WordPress: plug ins etc</h3>
<p>There are several ways to do this. However, many only add the breadcrumb trail on category pages - you really need them on individual posts as well. Current methods that do this include:</p>
<ul>
<li>This <a href="http://mtekk.weblogs.us/code/breadcrumb-navxt/">plug in</a> does most of what you need. But plug ins aren't fun are they ...</li>
<li><a href="http://www.catswhocode.com/blog/how-to-breadcrumb-function-for-wordpress">This method</a> works, but I think if you have categories only - if you have sub-categories, it doesn't include both parent and child categories.</li>
</ul>
<p>There are various other bits of code you can find in a google search.</p>
<h3>My new method for breadcrumb trails in WordPress</h3>
<p>Anyway, if your site is organised so that each post is in only one category, then there is an existing wordpress function, <a href="http://codex.wordpress.org/Template_Tags/the_category">the_category</a>, that will generate a breadcrumb trail automatically.</p>
<p>This code:</p>
<p style="padding-left: 30px;"><strong>&lt;a href="home.com"&gt;Home&lt;/a&gt; &amp;gt; &lt;?php the_category(' ',multiple) ?&gt;</strong></p>
<p>would generate this:</p>
<p><span style="text-decoration: underline;">Home</span> &gt; <span style="text-decoration: underline;">Category</span>,<span style="text-decoration: underline;">Sub-category</span></p>
<p>There's one small flaw however - there's no space before or after the comma. If wordpress could solve this, you could generate breadcrumb trails incredibly easily.</p>
<p>There is a solution ... If you go <a href="http://wordpress.org/support/topic/211149?replies=5">here</a> and follow the 'this diff' link towards the bottom to <a href="http://trac.wordpress.org/attachment/ticket/7251/subcat-separator.diff">here</a>. Then all (cough, ahem) you need to do is edit your category-template.php file in the wp-includes directory.</p>
<p>You need to replace the bits in pink with the bits in green - the easiest way is to open the file in a simple text editor, and then count the lines down to the relevant line numbers. Lines 204 are lower than you think due to some comments that you should ignore. <strong>NB</strong> The line numbers given are for wordpress 2.6. If you've upgraded to 2.7, the changes are the same, but the line numbers are different. It's easiest to search for the code you need - but be aware that some of the spacing has also changed from wordpress 2.6 to 2.7, so "function the_category($separator" becomes "function the_category( $separator". Anyway, you'll find it all eventually!</p>
<p>Anyway, basically, edit the file as shown. And then you can use this in your article/post templates:</p>
<p style="padding-left: 30px;"><strong>&lt;a href="home.co.uk/"&gt;Home&lt;/a&gt; &amp;gt; &lt;?php the_category(' and ',multiple,false,' &amp;gt; ') ?&gt;</strong></p>
<p>which will generate this breadcrumb trail:</p>
<p><span style="text-decoration: underline;">Home</span> &gt; <span style="text-decoration: underline;">Category</span> &gt; <span style="text-decoration: underline;">Sub-category</span></p>
<p>Perfect. As long as you don't mind editing the wordpress files directly ... (When doing this, make sure you keep a back up of the original in case you do it wrong).</p>
<p>Note, too, that this all only works if you assign posts to just one category. If you are adding them to several, your breadcrumb trail will look a right mess with this method - stick to the plugin!</p>
<p>This might all sound daunting, but (1) I made the changes first time with no problems and (2) it's a bit more understandable than all the other methods out there.</p>
<h3>Example breadcrumb trail on a wordpress site</h3>
<p>You can see the solution in action on my draft <a href="http://www.settingupyourbusiness.co.uk/before-you-set-up/business-mistakes/a-testing-post/">setting up your business</a> site.</p>
<img src="http://www.malcolmcoles.co.uk/blog/?ak_action=api_record_view&id=224&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.malcolmcoles.co.uk/blog/breadcrumb-trails-in-wordpress/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Virgin broadband speed &#8211; make sure you get the speed upgrade</title>
		<link>http://www.malcolmcoles.co.uk/blog/virgin-broadband-speed-upgrade/</link>
		<comments>http://www.malcolmcoles.co.uk/blog/virgin-broadband-speed-upgrade/#comments</comments>
		<pubDate>Sun, 30 Nov 2008 09:14:00 +0000</pubDate>
		<dc:creator>Malcolm Coles</dc:creator>
				<category><![CDATA[How to]]></category>
		<category><![CDATA[Internet]]></category>

		<guid isPermaLink="false">http://www.malcolmcoles.co.uk/blog/?p=182</guid>
		<description><![CDATA[If you have Virgin broadband size L, remember to restart your modem if you're not getting the 10Mb speed upgrade.]]></description>
			<content:encoded><![CDATA[<p>If you have Virgin broadband size L, remember to restart your modem if you're not getting the 10Mb speed upgrade.</p>
<h3>Virgin broadband upgrade finished ...</h3>
<p>Virgin media <a title="Virgin media broadband speed progress page" href="http://allyours.virginmedia.com/html/existingcustomers/faster/schedule.html">finished upgrading</a> broadband size L from 4Mb speed to 10Mb speed in September.</p>
<h3>... but you may need to restart your modem</h3>
<p>However, Virgin don't seem to have written to their broadband customers (or perhaps I just missed the memo) to tell them they may need to restart their modem to benefit from the new speed.</p>
<p>Doing so did increase my download speed from just short of 4MB to just short of 10MB.</p>
<p>It's just a shame the the upgrades were finished at the end of September - and I've only just done this. So that's 2 months of unnecessarily low speeds ...</p>
<h3>Broadband speed check</h3>
<p>You can check your speed at services like <a title="Speedtest.net broadband speed test site" href="http://www.speedtest.net">speedtest.net</a> (this may not be the easiest one to use, but it looks the coolest!)</p>
<img src="http://www.malcolmcoles.co.uk/blog/?ak_action=api_record_view&id=182&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.malcolmcoles.co.uk/blog/virgin-broadband-speed-upgrade/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

