3. =
What is Web Content?
Web
Content
Web Design
Written material
Web Site
4. Web Design is like architecture
Web design is the creation of
digital environments that
facilitate and encourage human
activity; reflect or adapt to
individual voices and content; and
change gracefully over time while
always retaining their identity.
“
”Jeffrey Zeldman
9. Pure content
Title: Widgets and API's
Image: http://www.kmp.co.uk/image.jpg
Text: With the growth of the Social Networking
sites and the opening up of their API's to
developers, there has been an explosion in the
development of "widgets" - specific applications
which appear on a site to deliver information,
capture data or effect transactions from within the
target networked community….
Title: Widgets and API's
Image: http://www.kmp.co.uk/image.jpg
Text: With the growth of the Social Networking
sites and the opening up of their API's to
developers, there has been an explosion in the
development of "widgets" - specific applications
which appear on a site to deliver information,
capture data or effect transactions from within the
target networked community….
14. My Company
Maintaining Brand Identity
Article title
Text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text
text text text text text text text text
text.
Text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text.
Article title
17. Is our content relevant?
Content User
Aggregator Search
Not
Relevant
18. Semantics: content with context
Title: Widgets and API's
Image: http://www.kmp.co.uk/image.jpg
Text: With the growth of the Social Networking
sites and the opening up of their API's to
developers, there has been an explosion in the
development of "widgets" - specific
applications which appear on a site to deliver
information, capture data or effect transactions
from within the target networked community….
Title: Widgets and API's
Image: http://www.kmp.co.uk/image.jpg
Text: With the growth of the Social Networking
sites and the opening up of their API's to
developers, there has been an explosion in the
development of "widgets" - specific
applications which appear on a site to deliver
information, capture data or effect transactions
from within the target networked community….
Semantic markup is probably the simplest way to create
portable, machine-readable web content.
19. Non semantic content
<font size="24px“ color="blue">
Title
</font>
<br><br>
<b>
The first paragraph
</b>
<br><br>
The second Paragraph
<font size="24px“ color="blue">
Title
</font>
<br><br>
<b>
The first paragraph
</b>
<br><br>
The second Paragraph
The User SeesThe User Sees
Title
The first paragraph
The second paragraph
Title
The first paragraph
The second paragraph
The Software SeesThe Software Sees
Title The first paragraph The second
paragraph
Title The first paragraph The second
paragraph
20. Semantic content
<h1>
Title
</h1>
<p id=“preamble”>
The first paragraph
</p>
<p>
The second paragraph
</p>
<h1>
Title
</h1>
<p id=“preamble”>
The first paragraph
</p>
<p>
The second paragraph
</p>
The User SeesThe User Sees
Title
The first paragraph
The second paragraph
Title
The first paragraph
The second paragraph
The Software SeesThe Software Sees
Heading: Title
Paragraph - “preamble”: The first
paragraph
Paragraph: The second paragraph
Heading: Title
Paragraph - “preamble”: The first
paragraph
Paragraph: The second paragraph
21. Semantics: content with context
Benefits Disadvantages
Performance
Work Effort
Training
Legacy Content
Data Portability
In online communications, the majority of effort is spent delivering a message to an audience.
The problems arise when you realise that your intended audience is increasingly becoming a disparate collection of audiences. People consume information from the web in many different ways, e.g. rss, pda, mobile phone, social networks, widgets etc.
Content Strategy is concerned with ensuring that you are prepared to deliver your message to all of your audiences regardless of their communication preferences e.g. email, RSS, website, social network, news aggregator.
To begin, let’s dispel some common assumptions;
Web Content is not web design – it is the substance to which the design is applied
Web Content is not a web site – it populates a website amongst other platforms
Web Content is not necessarily written material – data, imagery, video and audio are all relevant examples of content
Web content is a very different kettle of fish from traditional corporate publishing. Brochures are written, designed, edited, approved and become set in stone, web content is liquid, it is data which can be consumed in many different forms.
GOOD web design is like architecture
An architect defines a space without bias towards who will populate it –
in the same way a web design should be neutral towards the content which will populate it.
Many web designs are based on content which has been provided to the designer –
the design can often show signs of falling apart when the content is changed.
See Jeff Zeldman: http://www.alistapart.com/articles/understandingwebdesign/
The first image is a mockup of how the original design probably looked.
The second image is the actual page, not the link address overlaps the edge of the background and no thought has been paid to how to deal with the growing number of articles.
http://www.menzies.co.uk/news_room/press+releases
There are many ways in which web content can be presented, a web page viewed on a computer screen is just one option. Screen reader, mobile, pda, hard copy, xml feed etc. It’s usually neither feasible or desirable to re-write a piece of content for each delivery method.
Web Content SHOULD be constant and separated from the design.
The ideal situation is:
A piece of content is produced and is displayed using a presentation layer specific to the delivery platform.
For each additional delivery platform, a new presentation layer should be defined but the content need not be changed.
The problem with embedding formatting and presentation into your content is that it becomes optimised only for the environment in which it was created. E.g. if you author a page on a computer screen 1024 pixels wide then it can seem straightforward to embed an image which is as wide as the page. By doing this, the content becomes difficult to deliver on anything other than a computer screen 1024 pixels wide.
When the content is created as a generic data item, it is easy to republish in many different formats. i.e. the associated image can be resized to fit a smaller screen or left out altogether for a non-graphical display.
A website gives you full control over your content, you can have as much as you like and do anything you want with it. The downside is that in order for anybody to see it you need to get them to visit the site. You find that the effort required to get readers is greater than the effort to produce the content.
Syndication and distribution outside your website takes the content to the readers, the trade off is that you have less control over presentation and your content is fighting for attention amongst other items.
A good syndication strategy will allow you to distribute content to the places where your audience are already spending time with a view to increasing awareness of your message and encouraging visitors to your website.
e.g.
Your website gets 500 visitors per day and a business networking site may get 500,000 visitors per day
A well written article on your own website may be seen by 80% of your website visitors but only 1% of the network site visitors.
The article on your own website is viewed by 400 people whereas it is seen by 5000 people on the network site.
The IMPORTANT point here is that you don’t have to choose between the two, once the content has been written it can be posted to the network site AND to your own website with very little (if any) additional effort.
Once you have a well formulated piece of content there are literally hundreds of websites and services that you can submit it to in order to spread your message.
Image, video, audio or any other multimedia content increases the number of suitable destinations for distributing the message.
Chester Zoo generates a large amount of photography, both internally and from it’s visitors. We used the social photo sharing network Flickr to allow Chester Zoo’s visitors to share their photographs with the zoo and with other fans of the zoo. We also implemented a YouTube channel to assist them with promoting a Winter Event.
http://www.chesterzoo.org/photos.aspx
http://www.flickr.com/groups/chesterzoo/
http://www.youtube.com/frostfair
Visual branding is an important part of brand promotion, however portable content doesn’t allow for set visual elements and styles.
Once all of the visual branding is stripped away from a piece of content, how can it still promote a brand?
Without the assistance of logos, colours and typefaces, the content itself can still comply with and promote a brand identity.
By establishing conventions for:
Tone of the voice - authoritative, friendly, dry, conversational, tongue-in-cheek etc.
http://www.flickr.com
Personality – define the persona, preferably to fit with largest target audience. People like to interact with a personality rather than a company.
http://www.directline.com/
Phraseology – It an era when search is brand, establishing key phrases for use in content will strengthen association between the brand and the phrase. Try searching Google for the phrase “We try harder” and see where Avis appears in the results.
http://www.google.co.uk/search?hl=en&q=%22We+try+harder%22
http://www.google.co.uk/search?hl=en&q=%22Think+different%22
http://www.google.co.uk/search?hl=en&q=%22Just+do+it%22
Including this sort of information within brand guidelines not only increases brand effectiveness but also eases outsourcing content production or inducting new writers.
Language guidelines have been around for a long time in industries which rely extensively on published materials.
These types of guidelines are now being used in a new way, that is to enforce brand through non-visual means.
Syndicated content forces us to give up control of the way our words are presented but not control over the words themselves.
http://www.lloyds.com/NR/rdonlyres/F6242919-C483-4DE7-ADC5-D4845577FF5C/0/Lloyds_Language_brand_guidelines06.pdf
http://news.bbc.co.uk/1/shared/bsp/hi/pdfs/26_04_07_jerseybrand.pdf
Web content is increasingly consumed, processed and aggregated by software before it reaches a human.
In order to improve relevance, your content must be understood by automated readers as well as by human readers.
Semantic Markup may seem like a slightly technical issue to address, but in reality the benefits of content authors knowing the basics of HTML are worth consideration.
Semantic markup helps software to understand the context of your content and can ensure that it reaches relevant readers.
In this example the HTML markup defines the way in which the content is presented but this means nothing to software. Search engines and aggregators will read the page as just a block of text with no context.
In this example the html has been used to define the structure of the content.
By applying a suitable stylesheet, the same presentation is achieved but the real difference is in the way the search engines, aggregators and other robotic lifeforms read the content.
The context of each section of the content is apparent and can help the software to understand what the content actually is.
What are the benefits?
Increased data portability – content can be re-used in many different places and ways.
Increased performance – your content can work harder for you in terms of promoting key phrases in search engine results and improving the reach and relevance of the content in software aggregators and content processors.
Reduced work effort – The concept of “author once, present many times”
What are the disadvantages?
Training or re-training required – An understanding of simple semantic markup is essential, there may be a requirement for a set of conventions to be established
Update of legacy content – If you wish to update your legacy content, it may be a large amount of work but the benefits could be worthwhile
http://www.w3.org/2001/sw/
http://www.semanticweb.org/
This example demonstrates reuse of content, particularly video content.
E4 are about to begin the second series of their hit drama series, “Skins”. In order to promote the series they created a high quality series 2 trailer, but also a number of video and written blogs by the characters in the series to fill in details of events between the end of the last series and the start of the new series. The video blogs are cheap and easy to produce having been done using handheld video cameras, mobile phone footage etc. for realism.
The E4 website includes all of this content but crucially links to Myspace, Bebo, Facebook etc. where profiles have been set up to promote the series.
Each of these social network sites distributes the same content as the main site but allows Fans of the show to interact with the show creators.
In the case of myspace, fans can interact with and align themselves with each of the main characters through their own profiles (these again use the same blog posts and videos as the other sites.
The video blogs have also been seeded onto YouTube and probably other video sharing sites too.
http://www.e4.com/skins/
http://www.myspace.com/e4skins2
http://www.bebo.com/Profile.jsp?MID=367137231&MemberId=2680828970
http://www.facebook.com/profile.php?id=526280152
http://www.dailymotion.com/E4-Skins
http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=140517943
http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=140518345
http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=140518778
http://www.youtube.com/watch?v=Fo7TZu9YlUk
In Summary: Web content – done properly – is portable data
http://www.dataportability.org/
