photo: ©GM 2010

Build resources well—SCAMORE 3/8

for lots of good reasons...

Priority issuesSession 3/8

http://www.cbronline.com/news/poor_websites_cost_uk_councils_11m_a_month_281009

Poor websites cost UK councils around £11m a monthJanine Milne, 8 January 2010

‣ Shoddy websites could be costing UK councils £11m a month, according to the Society of IT Managers (Socitim).

‣ Faced with badly designed or poorly constructed sites, people are choosing to either call their council or visit a council contact centre, both far more costly channels.

‣ Only 21% of the 7.3m unique visitors to the 120 council websites found part of the information they were looking for.

‣ On average, a fifth of site visitors couldn't find the information they needed. That equates to 4.4 million failures in dealing with online enquiries across all local authorities. As each call to a council is estimated to cost roughly £2.50 to handle, local authorities could be haemorrhaging up to £11m each month.

‣ Despite these serious misgivings about the web, it was the most popular way for citizens to contact their local authority, preferred by 70% of the customers. But it was also exposed to be the least satisfactory channel, with 42% of visitors rating its service as poor, compared to 21% of face-to-face meetings and 2% of phone calls.

Establishing desirable target audienceDetermine your audience profile

‣ Demographics—age, gender, location, income‣ What particular interests, influences, beliefs‣ What media will they be using (desktop, mobile, home, work)

How many are there‣ Any relevant behavioural trends‣ Clarify how to deliver value to your audience‣ What do you want to achieve when users visit‣ What is your goal or "conversion" metric‣ How will you measure this

Knowing your audience

Practical exercise—identifying and understanding audiences

This exercise should be done as individuals, not in a group

Identify your web site audiences‣ how many do you have?

Prioritise each in terms of how important it is to communicate with them

‣ the time and energy you commit to each should be influenced by their relative importance—is this the case?

What is purpose of communication to each‣ is it to raise awareness, influence visitors, or something else?

Compare your audiences and purposes‣ are your priorities and purposes the same for each audience?

Audience Priority Purpose

Practical exercise—identifying and understanding audiences

Practical exercise—identifying and understanding audiences

Select one of your audiences and consider the following

‣ what sort of people make up this audience?‣ what is their understanding of the service you provide?‣ what does their working day consist of?‣ how much detail do they need from your web site?‣ what do they care about most?‣ what language style would be most suitable for them?

Audience

The sort of people making up this

audience

This audience’s understanding of

your service

Typical working day for this audience

Detail required by this audience

This audience priorities

Most suitable language style

Practical exercise—understanding a single audience

photo: ©GM 2010

structure is so important

Structure

Structure underpins everythingDefine specific parts of a web page using HTML

‣ content is structured with HTML‣ HTML “tags” define parts of a web page‣ <h1>heading</h1> <h2>subheading</h2> <p>paragraph</p>‣ indicates relationship between parts of a web page and relative importances‣ enables search engines to better assess content in a web page‣ therefore a better match of content to search queries‣ and content more likely to reach intended audience

Associate presentation style with parts of web page using CSS‣ web browser displays web page using associated styles‣ easy maintenance of look and feel‣ dynamic change of look and feel possible (depending on user details, mode of

access etc.)

Introduce functionality using Javascript‣ leave structure intact‣ to enhance UX

http://www.csszengarden.com/

Structure—the power of stylesheets (CSS)

http://www.w3.org/TR/html5/ http://www.w3.org/Style/CSS/current-work

Structure—better standards

HTML5‣ HTML5 introduces new elements and attributes for semantic replacements of

generic <div> and <span> elements, e.g. <nav> (navigation block) and <footer>.‣ Other elements bring convenience with a standardised interface for rich content,

e.g. <audio> and <video>.‣ Some elements from HTML 4 have been dropped, including presentational elements

such as <font> and <center>, where effects are achieved with CSS. There is also a renewed emphasis on the importance of DOM scripting.

CSS3‣ 2D and 3D transformations and transitions etc.

http://vimeo.com/7863592 http://a.deveria.com/?p=236 http://en.wikipedia.org/wiki/JQuery

Structure—implementation of standards

HTML5 and CSS3Eric Meyer, "A more tangled web", Belfast Build conference, November 2009 (summary by Charlie Neely, FRONT)

‣ The web's relative simplicity has made it so successful. Basic web tools, HTML, CSS and Javascript, have all found their way into many products and services we use today.

‣ However HTML5 wont be fully implemented until an estimated 2022 and CSS3 is likely to be in development far beyond that.

‣ But this doesn't stop us from using elements of it already. Developers are ingeniously using Javascript to emulate methods and functions of HTML5 and CSS3, for example, Alexis Deveria created a jQuery plug-in which provides support for CSS3 Template Layout Module.

http://code.google.com/chrome/chromeframe/

Using new technologies with Internet Explorer

Google Chrome Frame‣ an open source plug-in that seamlessly brings Google Chrome's open web

technologies and speedy JavaScript engine to Internet Explorer‣ start using open web technologies right away, even technologies that aren't yet

supported in Internet Explorer 6, 7, or 8‣ take advantage of JavaScript performance improvements to make your apps faster

and more responsive‣ add a single tag to your pages and detect whether your users have installed Google

Chrome Frame‣ if not installed, you can direct your users to an installation page‣ if installed, it detects the tag you added and works automatically

http://code.google.com/p/html5media/

Structure—standards, video and audio with HTML5 on all browsers

HTML5 video and audio for everyoneGoogle, March 2010

HTML5 video and audio tags make embedding media into documents as easy as embedding an image. All it takes is a single <video> or <audio> tag. Unfortunately, not all browsers natively support these HTML5 tags.

To enable HTML5 video and audio tags in all major browsers, simply paste the following code into the <head> of your document:

<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>

This will allow you to embed video and audio into your document using the following easy syntax:

<video src="video.mp4" width="320" height="240" controls preload></video>

<audio src="audio.mp3" controls preload></audio>

HTML5 example

<!DOCTYPE html><html><head><title>Demo site for showcasing videos stored elsewhere</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="For demonstration purposes only, HTML5 video and audio and more..."><meta name="keywords" content="demo, HTML5, CSS3, video tag, audio tag"></head>

<body><section id="home"><header><h1>A few sample videos and audio</h1><h2>Nothing too serious!</h2><nav><a href="#iphone-mp4">An mp4 file on the wonders of iPhone marked up just using &lt;video&gt; tag</a> <a href="#sagan-utube">An embedded youtube video of scientific slant</a> <a href="#meyer-vimeo">An embedded vimeo video of a conference talk by Eric Meyer</a> <a href="#bmw-videojug">An embedded videojug video about the world's best motorcycles</a> <a href="#walkonthewild-utube">Another embedded youtube video that I coundn't resist</a> <a href="#drivebytruckers-mp3">Some good music marked up just using &lt;audio&gt; tag</a></nav></header>

<article id="iphone-mp4"><p>A few of the not so obvious reasons for having an iPhone</p><figure><video src="iphone-magic.mp4" width="478" height="270" controls></video></figure></article>

<article id="drivebytruckers-mp3"><p>And some good old Drive-By Truckers music</p><figure><img src="truckers.jpg" alt="Drive-By Truckers group members" /><br /><audio src="gravity.m4a" controls></audio></figure></article>

<footer><p>Copyright 2010 SCAMORE</p></footer>

</section></body></html>

HTML5 example

HTML document

<!DOCTYPE html><html><head><title>Demo site for showcasing videos stored elsewhere</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="For demonstration purposes only, HTML5 video and audio and more..."><meta name="keywords" content="demo, HTML5, CSS3, video tag, audio tag"></head>

<body><section id="home"><header><h1>A few sample videos and audio</h1><h2>Nothing too serious!</h2><nav><a href="#iphone-mp4">An mp4 file on the wonders of iPhone marked up just using &lt;video&gt; tag</a> <a href="#sagan-utube">An embedded youtube video of scientific slant</a> <a href="#meyer-vimeo">An embedded vimeo video of a conference talk by Eric Meyer</a> <a href="#bmw-videojug">An embedded videojug video about the world's best motorcycles</a> <a href="#walkonthewild-utube">Another embedded youtube video that I coundn't resist</a> <a href="#drivebytruckers-mp3">Some good music marked up just using &lt;audio&gt; tag</a></nav></header>

<article id="iphone-mp4"><p>A few of the not so obvious reasons for having an iPhone</p><figure><video src="iphone-magic.mp4" width="478" height="270" controls></video></figure></article>

<article id="drivebytruckers-mp3"><p>And some good old Drive-By Truckers music</p><figure><img src="truckers.jpg" alt="Drive-By Truckers group members" /><br /><audio src="gravity.m4a" controls></audio></figure></article>

<footer><p>Copyright 2010 SCAMORE</p></footer>

</section></body></html>

HTML5 example

HTML document

document head

document body

<!DOCTYPE html><html><head><title>Demo site for showcasing videos stored elsewhere</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="For demonstration purposes only, HTML5 video and audio and more..."><meta name="keywords" content="demo, HTML5, CSS3, video tag, audio tag"></head>

<body><section id="home"><header><h1>A few sample videos and audio</h1><h2>Nothing too serious!</h2><nav><a href="#iphone-mp4">An mp4 file on the wonders of iPhone marked up just using &lt;video&gt; tag</a> <a href="#sagan-utube">An embedded youtube video of scientific slant</a> <a href="#meyer-vimeo">An embedded vimeo video of a conference talk by Eric Meyer</a> <a href="#bmw-videojug">An embedded videojug video about the world's best motorcycles</a> <a href="#walkonthewild-utube">Another embedded youtube video that I coundn't resist</a> <a href="#drivebytruckers-mp3">Some good music marked up just using &lt;audio&gt; tag</a></nav></header>

<article id="iphone-mp4"><p>A few of the not so obvious reasons for having an iPhone</p><figure><video src="iphone-magic.mp4" width="478" height="270" controls></video></figure></article>

<article id="drivebytruckers-mp3"><p>And some good old Drive-By Truckers music</p><figure><img src="truckers.jpg" alt="Drive-By Truckers group members" /><br /><audio src="gravity.m4a" controls></audio></figure></article>

<footer><p>Copyright 2010 SCAMORE</p></footer>

</section></body></html>

HTML5 example

HTML document

document head

document bodysection

<!DOCTYPE html><html><head><title>Demo site for showcasing videos stored elsewhere</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="For demonstration purposes only, HTML5 video and audio and more..."><meta name="keywords" content="demo, HTML5, CSS3, video tag, audio tag"></head>

<body><section id="home"><header><h1>A few sample videos and audio</h1><h2>Nothing too serious!</h2><nav><a href="#iphone-mp4">An mp4 file on the wonders of iPhone marked up just using &lt;video&gt; tag</a> <a href="#sagan-utube">An embedded youtube video of scientific slant</a> <a href="#meyer-vimeo">An embedded vimeo video of a conference talk by Eric Meyer</a> <a href="#bmw-videojug">An embedded videojug video about the world's best motorcycles</a> <a href="#walkonthewild-utube">Another embedded youtube video that I coundn't resist</a> <a href="#drivebytruckers-mp3">Some good music marked up just using &lt;audio&gt; tag</a></nav></header>

<article id="iphone-mp4"><p>A few of the not so obvious reasons for having an iPhone</p><figure><video src="iphone-magic.mp4" width="478" height="270" controls></video></figure></article>

<article id="drivebytruckers-mp3"><p>And some good old Drive-By Truckers music</p><figure><img src="truckers.jpg" alt="Drive-By Truckers group members" /><br /><audio src="gravity.m4a" controls></audio></figure></article>

<footer><p>Copyright 2010 SCAMORE</p></footer>

</section></body></html>

HTML5 example

HTML document

document head

document bodysection

header

article

footer

<!DOCTYPE html><html><head><title>Demo site for showcasing videos stored elsewhere</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="For demonstration purposes only, HTML5 video and audio and more..."><meta name="keywords" content="demo, HTML5, CSS3, video tag, audio tag"></head>

<body><section id="home"><header><h1>A few sample videos and audio</h1><h2>Nothing too serious!</h2><nav><a href="#iphone-mp4">An mp4 file on the wonders of iPhone marked up just using &lt;video&gt; tag</a> <a href="#sagan-utube">An embedded youtube video of scientific slant</a> <a href="#meyer-vimeo">An embedded vimeo video of a conference talk by Eric Meyer</a> <a href="#bmw-videojug">An embedded videojug video about the world's best motorcycles</a> <a href="#walkonthewild-utube">Another embedded youtube video that I coundn't resist</a> <a href="#drivebytruckers-mp3">Some good music marked up just using &lt;audio&gt; tag</a></nav></header>

<article id="iphone-mp4"><p>A few of the not so obvious reasons for having an iPhone</p><figure><video src="iphone-magic.mp4" width="478" height="270" controls></video></figure></article>

<article id="drivebytruckers-mp3"><p>And some good old Drive-By Truckers music</p><figure><img src="truckers.jpg" alt="Drive-By Truckers group members" /><br /><audio src="gravity.m4a" controls></audio></figure></article>

<footer><p>Copyright 2010 SCAMORE</p></footer>

</section></body></html>

HTML5 example

HTML document

document head

document bodysection

header

article

footer

navigation block

<!DOCTYPE html><html><head><title>Demo site for showcasing videos stored elsewhere</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="For demonstration purposes only, HTML5 video and audio and more..."><meta name="keywords" content="demo, HTML5, CSS3, video tag, audio tag"></head>

<body><section id="home"><header><h1>A few sample videos and audio</h1><h2>Nothing too serious!</h2><nav><a href="#iphone-mp4">An mp4 file on the wonders of iPhone marked up just using &lt;video&gt; tag</a> <a href="#sagan-utube">An embedded youtube video of scientific slant</a> <a href="#meyer-vimeo">An embedded vimeo video of a conference talk by Eric Meyer</a> <a href="#bmw-videojug">An embedded videojug video about the world's best motorcycles</a> <a href="#walkonthewild-utube">Another embedded youtube video that I coundn't resist</a> <a href="#drivebytruckers-mp3">Some good music marked up just using &lt;audio&gt; tag</a></nav></header>

<article id="iphone-mp4"><p>A few of the not so obvious reasons for having an iPhone</p><figure><video src="iphone-magic.mp4" width="478" height="270" controls></video></figure></article>

<article id="drivebytruckers-mp3"><p>And some good old Drive-By Truckers music</p><figure><img src="truckers.jpg" alt="Drive-By Truckers group members" /><br /><audio src="gravity.m4a" controls></audio></figure></article>

<footer><p>Copyright 2010 SCAMORE</p></footer>

</section></body></html>

http://www.apple.com/html5/

HTML5 support

HTML5 and web standardsApple web site

Every new Apple mobile device and every new Mac—along with the latest version of Apple’s Safari web browser—supports web standards including HTML5, CSS3, and JavaScript. These web standards are open, reliable, highly secure, and efficient. They allow web designers and developers to create advanced graphics, typography, animations, and transitions. Standards aren’t add-ons to the web. They are the web. And you can start using them today.

http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/

HTML5 apps

Making an iPad HTML5 app and making it really fastThomas Fuchs, 4 June 2010

About a month ago or so, Amy and I release a little (literally, it’s about 5k) HTML5 iPad App for looking up time zones. I don’t mean select-box wasteland like all other time zone sites (who likes select boxes anyway?!), I mean a nicely polished, touch-enabled UI that works offline, too.

The site uses no images, no JavaScript frameworks, and no external CSS, and fits quite comfortably in a few k’s of gzipped HTML.

Is HTML5 ready to take over multimedia content on the web?Hanna Miettinen, New Media Monthly, 22 July 2010

“Flash is a multimedia production system; HTML5 is a web authoring language”.

“Flash can produce impressive multimedia effects on screen to impress (or perhaps entertain) the viewer; HTML5 can produce well structured web documents that can communicate well structured content and associated metadata to the viewer and software agents.”

http://bit.ly/ds7c1Y

HTML5 and Flash

HTML5 + RDFa = time to get rid of that 20th century furnitureLaura Scott, pingv.com, 23 August 2010

With new language comes new ways of thinking

By clarifying specifics — especially in error handling — HTML5 stands to open the doors for much more efficient and effective JavaScript, heralding a new era for robust interactivity with dynamic interfaces and rich user experiences that would be too heavy and difficult, or impossible, to implement in xhtml or HTML4...

Hopefully we'll also have learned the lessons taught by the untold numbers of Flash website designers, who gave us splash pages, annoying, gratuitous motion effects (with obnoxious sound effects), and user interfaces more focused on dazzling the user with the creator's cleverness rather than on serving the user with an interface that serves the user's needs. Here's hoping that HTML5 does not bring us into a new age of craptastic blinky poppy wooshy buzzy design.

http://pingv.com/blog/html5-rdfa-time-to-get-rid-of-that-20th-century-furniture

HTML5 and RDFa

Google goes bubbly—interactive logo on the UK homepageChristian Heilmann’s blog, 7 September 2010

This is another example how Google are happy to play with their brand to show off some cool new browser technology. This is meant to show off what you can do with JavaScript and HTML5 and how smooth it can look.

Uses CSS3 to create the round bubbles...

http://bit.ly/cSioNW

CSS3

http://www.html5rocks.com/

Examples, tutorials, ideas

HTML5 W3C working draft19 October 2010, editor Ian Hickson (Google Inc.)

‣ Common infrastructure‣ Semantics, structure, and APIs of HTML documents‣ The elements of HTML‣ Loading Web pages‣ Web application APIs‣ User interaction‣ The HTML syntax‣ The XHTML syntax‣ There are also some appendices, defining rendering rules for Web browsers and

listing obsolete features and IANA considerations.

An extremely comprehensive document describing all aspects of the standard.

http://www.w3.org/TR/html5/

HTML5 reference

CSS3 is a series of modular specificationsOctober 2010, over 50 separate areas of work...

http://www.w3.org/Style/CSS/current-work

CSS3 reference

http://www.webdesignerhelp.co.uk/index.php/2009/01/how-to-setup-a-rss-feed/

Structure—setting up RSS feed

<?xml version="1.0" ?> <rss version="0.91"><channel> <title>Web Designer Help</title> <link>http://www.webdesignerhelp.co.uk</link> <description>Latest Tutorials/Articles</description> <language>en-us</language> <copyright>Copyright 2008-2009 WebDesignerHelp</copyright> <lastBuildDate>Tue, 6 Jan 2009</lastBuildDate>

<image> <title>Web Designer Help</title> <url>http://www.webdesignerhelp.co.uk/images/rss.gif</url> <link>http://www.webdesignerhelp.co.uk</link></image>

<item> <title>Setup an RSS Feed</title> <description>A basic tutorial on how to setup an RSS feed</description> <link>http://www.webdesignerhelp.co.uk/how-to-setup-an-rss-feed.html</link> <author>thomas@thomashardy.me.uk</author> <pubDate>Tue, 6 Jan 2009</pubDate></item>

</channel></rss>

http://www.webdesignerhelp.co.uk/index.php/2009/01/how-to-setup-a-rss-feed/

Structure—setting up RSS feed

<?xml version="1.0" ?> <rss version="0.91"><channel> <title>Web Designer Help</title> <link>http://www.webdesignerhelp.co.uk</link> <description>Latest Tutorials/Articles</description> <language>en-us</language> <copyright>Copyright 2008-2009 WebDesignerHelp</copyright> <lastBuildDate>Tue, 6 Jan 2009</lastBuildDate>

<image> <title>Web Designer Help</title> <url>http://www.webdesignerhelp.co.uk/images/rss.gif</url> <link>http://www.webdesignerhelp.co.uk</link></image>

<item> <title>Setup an RSS Feed</title> <description>A basic tutorial on how to setup an RSS feed</description> <link>http://www.webdesignerhelp.co.uk/how-to-setup-an-rss-feed.html</link> <author>thomas@thomashardy.me.uk</author> <pubDate>Tue, 6 Jan 2009</pubDate></item>

</channel></rss>

http://www.google.com/reader/

Structure—RSS feeds

RSS feed aggregators are very useful for keeping up with news from many sourcesGoogle reader probably most popular

‣ content from lots of sites syndicated in one place

Lots of iPhone and other mobile apps serve same purpose‣ very convenient to use

Make sure visitors know if you have RSS feed‣ include RSS icon in address bar (e.g. at http://bit.ly/9hf917)‣ add single line in HTML document head

<link rel="alternate" title="This news feed" href="address" type="application/rss+xml" />

http://usability.coi.gov.uk/

Accessibility

UK Central Office of InformationUsability toolkit, January 2009To help Web editors and Web content developers incorporate the basics of usability across all public sector websites.

‣ Page Layout‣ Navigation‣ Writing Content‣ Content Elements‣ Forms‣ Search‣ QA & Standards‣ Common Pages

Please note: If you are developing content for Directgov, Businesslink.gov.uk or NHS Choices please refer to your internal guidelines in the first instance, they include the guidance in this toolkit.

http://www.coi.gov.uk/guidance.php?page=213

Accessibility

UK Central Office of InformationBrowser testing guidelines, January 2009The Government aims to provide a consistent high quality experience for users across all of its online services. There are a large number of different browsers on the market and to test your website with all of them would be impractical and inefficient. However, if you build your website to comply fully with standards, this effort will be significantly reduced and you may only need to test your website with a few browsers.

The objective of this guidance is to ensure that you website works on as many platforms and devices as possible. An effective way to do this is to:

‣ code to standards‣ test with browsers

This guidance is for public sector website managers, developers and testers.

Google Analytics‣ http://www.google.com/analytics/support.html‣ http://www.google.com/support/conversionuniversity

Checking word maps‣ http://www.wordle.net/

Identify suitable keywords and see popularity‣ https://adwords.google.com/select/KeywordToolExternal

Compare keyword phrases and see trends over time and per country‣ http://www.google.com/trends

Make sure all links are working‣ http://validator.w3.org/checklink

Introduction to Google's web site optimiser‣ http://www.google.com/websiteoptimizer/tour.html

Integrity—“tools” of the trade

Metadata is key‣ data about data‣ many and varied versions of metadata‣ add background information, put things in context, add value, make much more

useful by showing relevance‣ different levels of metadata—may need pointer to further information to fully

explain a piece of metadata or describe how to interpret‣ enable ways of classifying, connecting, rating, structuring, promoting, that wouldn't

be possible otherwise—especially if a common "vocabulary" for the metadata terms is used

Metadata

HTML5 + RDFa = time to get rid of that 20th century furnitureLaura Scott, pingv.com, 23 August 2010

Robots speaking in complete sentences

That's the net effect of RDFa. You see, currently hyperlinks, to robots, are analogous mystery meat navigation. To the human reader, the nature and location of a hyperlink may make total sense in context — even the mouse-over reveal of the hyperlink URL can yield meaning to us cerebral bipeds. But all a plain hyperlink says to a robot is "follow me." The robot doesn't know who made the link (or the destination site), what the destination is, why the link is there — just where the link is going, and that only by its URL.

RDFa changes that by providing syntax, often abbreviated and/or abetted by libraries such as Dublin Core, to add meaning to the link...

http://pingv.com/blog/html5-rdfa-time-to-get-rid-of-that-20th-century-furniture

HTML5 and RDFa

http://webbackplane.com/mark-birbeck/blog/2009/12/rdfa-and-seo

Richer semantics—improved information discovery and retrieval

RDFa and SEOwebBackplane, Mark Birbeck on December 16 2009

Vertical search engines

RDFa will allow the search giants to offer partitioned search engines, aimed at particular audiences.

There are many search engines already available, for specialist areas, but most of them tend to be out of date, or missing information altogether.

The major search engines are often crawling these sites already, but page ranking algorithms will hide them away in the 1000th page of search results. By adding targeted mark-up to web-pages it becomes easier for search engines to differentiate the subject-matter of the pages, and so offer specialised views on their data.

http://webbackplane.com/mark-birbeck/blog/2009/12/rdfa-and-seo

Richer semantics—improved information discovery and retrieval

RDFa and SEOwebBackplane, Mark Birbeck on December 16 2009

Improved search accuracy

This is beneficial for the users of search engines, in that it can help them to find the information they want, faster. But it's also significant for site creators and SEO practitioners, because it means that sites are increasingly found in the right place.

An increasing part of SEO is writing relevant articles that relate to products and services. Since search engines are increasingly clever enough to differentiate between a bunch of keywords dumped into a page, and an article with real content, a virtuous circle is created, rewarding 'proper' articles with improved rankings.

RDFa can help—it allows authors to make pages unambiguous.

http://webbackplane.com/mark-birbeck/blog/2009/12/rdfa-and-seo

Richer semantics—improved information discovery and retrieval

RDFa and SEOwebBackplane, Mark Birbeck on December 16 2009

Improving display of results

This is the area that has probably seen most discussion recently, in the context of Yahoo!'s enhanced results, and Google's rich snippets… Benefits to the search engine of doing this, are that users can get more done, on their site, making them more likely to return. The benefits for the companies are improved click-through.

For many, click-through is more important than ranking. Some SEO experts say that if adding RDFa to a site gave an increase in click-through of only a couple of %, sites would see that as worth it—yet as Peter Mika said in Year of the Monkey: Lessons from the first year of SearchMonkey, adding RDFa or Microformats to a page gives significantly better click-through than a mere few %.

http://searchenginewatch.com/3639969

Social media—where do web site visitors really come from?

Search and Rescue: how to become findable and shareable in social mediaBrian Solis, Search Engine Watch, 1 April 2010

Social media

Business purposes of social networking sites‣ Establish pointers to web site by attracting initial audience attention and developing

a relationship.‣ Create brand. Very important—web site visitors often only seeking confirmation

after having made an initial decision to use a product or service following research on social networking sites.

‣ Peer reviews—very influential.‣ Marketing!

http://blog.ionom.com/2009/12/is-online-reputation-management-the-new-search-engine-optimisation/

Social media—online reputation

Is online reputation management the new Search Engine Optimisation?Niall McKeown, Niall's Online Marketing Blog, 9 December 2009

There is a strong argument that being #1 in the natural search engine results in Google for some industries is no longer what it used to be. I'm not arguing that search is irrelevant or that a site should not be built optimised for search engines, my argument is that the customer and how they purchase has little to do with being top of Google. Rather, it is how you are represented in terms of your online reputation. My argument is that online reputation management is fast becoming more important than search engine optimisation in service based industries. Better still, get your ORM right and the SEO takes care of itself.

http://blog.ionom.com/2010/02/new-internet-revenue-models/

Making an impression

New internet revenue modelsFebruary 24th, 2010 by Niall McKeown

... In Lee’s spare time he has constructed a website called lookaly.com, a Northern Ireland centric ‘rate your experience’ website. It’s similar to TripAdvisor but region specific, not industry specific. The site facilitates user contributed content and allows customers of businesses to rate their experience. The businesses that are lucky enough to be rated can use the site to get honest and hard truths about their business and engage with customers that were moved enough to post a comment.

At a recent conference Lee was asked, “How do you intend to monetise the site?”. Lee paused for a moment and looked mildly puzzled, almost as if he didn’t understand the question. His response was “I am not a business man, I built lookaly.com because I am passionate about building great customer experiences online”. The crowd looked puzzled. Lee was then asked by a different attendee “Lee if I wanted you to design stuff for me could you?”. Lee smiled and said, “I’m really sorry, but I am so backed up with work it would be at least 6 months before I could take on any new projects”.

What approach would be most appropriate for reaching each of the audiences you identified earlier?

‣ conventional web site‣ Twitter‣ less frequent but more in depth blogs‣ commenting on public blogs‣ sharing bookmarks‣ Facebook‣ Linkedin‣ Wikipedia pages‣ RSS feeds‣ something else...

Most effective approach for audience engagement

?