Build resources well—SCAMORE 3/8 for lots of good reasons

Build resources well—SCAMORE 3/8
for lots of good reasons...

photo: ©GM 2010

Poor websites cost UK councils around £11m a
month
Janine 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.

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

Knowing your audience

Establishing desirable target audience
Determine 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

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


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?

Practical exercise—understanding a single audience

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

structure is so important

photo: ©GM 2010

Structure

Structure underpins everything
Define 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

Structure—the power of stylesheets (CSS)

http://www.csszengarden.com/

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://www.w3.org/TR/html5/ http://www.w3.org/Style/CSS/current-work

Structure—implementation of standards

HTML5 and CSS3
Eric 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://vimeo.com/7863592 http://a.deveria.com/?p=236 http://en.wikipedia.org/wiki/JQuery

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/chrome/chromeframe/

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

HTML5 video and audio for everyone
Google, 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>

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

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 <video> 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 <audio> 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>
</head>

<body>
<section id="home">
<header>
<nav>
</nav>
</header>

</article>

</article>

<footer>
</footer>

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

HTML5 example

HTML document

<!DOCTYPE html>
<html> document head
<head>
</head>
document body
<body>
<section id="home">
<header>
<nav>
</nav>
</header>

</article>

</article>

<footer>
</footer>

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

HTML5 example

HTML document

<!DOCTYPE html>
<head>
</head>
document body
<body>
<section id="home"> section
<header>
<nav>
</nav>
</header>

</article>

</article>

<footer>
</footer>

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

HTML5 example

HTML document

<!DOCTYPE html>
<head>
</head>
document body
<body>
<header>
<h1>A few sample videos and audio</h1> header
<nav>
</nav>
</header>

article
</article>

</article>

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

HTML5 example

HTML document

<!DOCTYPE html>
<head>
</head>
document body
<body>
<header>
<h1>A few sample videos and audio</h1> header
<nav> navigation block
</nav>
</header>

article
</article>

</article>

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

HTML5 support

HTML5 and web
standards
Apple 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://www.apple.com/html5/

HTML5 apps

Making an iPad HTML5 app
and making it really fast
Thomas 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.

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

HTML5 and Flash

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 RDFa

HTML5 + RDFa = time to
get rid of that 20th
century furniture
Laura 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

CSS3

Google goes bubbly—interactive logo on the
UK homepage
Christian 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

Examples, tutorials, ideas

http://www.html5rocks.com/

HTML5 reference

HTML5 W3C working draft
19 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/

CSS3 reference

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

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

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—RSS feeds

RSS feed aggregators are very useful for
keeping up with news from many sources
Google 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://www.google.com/reader/

Accessibility

UK Central Office of Information
Usability toolkit, January 2009
To 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://usability.coi.gov.uk/

Accessibility

UK Central Office of Information
Browser testing guidelines, January 2009
The 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.

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

Integrity—“tools” of the trade

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

Metadata

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

HTML5 and RDFa

HTML5 + RDFa = time to
get rid of that 20th
century furniture
Laura 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

Richer semantics—improved information discovery and retrieval

RDFa and SEO
webBackplane, 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


RDFa and SEO

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.



RDFa and SEO

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 %.


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

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

http://searchenginewatch.com/3639969

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!

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/2009/12/is-online-reputation-management-the-new-search-engine-optimisation/

Making an impression

New internet revenue models
February 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”.

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

Most effective approach for audience engagement

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...

Build resources well—SCAMORE 3/8 for lots of good reasons

Build resources well—SCAMORE 3/8 for lots of good reasons

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Ähnlich wie Build resources well—SCAMORE 3/8 for lots of good reasons

Ähnlich wie Build resources well—SCAMORE 3/8 for lots of good reasons (20)

Mehr von Platypus

Mehr von Platypus (12)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Build resources well—SCAMORE 3/8 for lots of good reasons

Hinweis der Redaktion