Writing for the web basics

1. Write to be read
Writing for the web and storytelling
MMD

2. People usually don’t have much patience when it comes to
reading on the web. Rather, they are scanning for information.
Source: http://www.useit.com/alertbox/reading_pattern.html
Reading or
scanning?
MMD
Writing For the Web

3. Writing For the Web
• The Triangle of Information
Writing for the web is not the same as
writing via a traditional dramatic model.
Dramatic
model
BACKGROUND
Intro
CONCLUSION
(NEWS)
MAIN FOCUS
MMD

4. Writing For the Web
• The Triangle of Information
News article
with elements
of storytelling
B A C K G R O U N D
Who? What?
Intro/ resume: Who? What?
(eventuals)
Headline (main focus)
Where? When? How?
Supporting details
Most important
Least important
MMD
Writing for the web is more
like the news triangle

5. MAIN
FOCUS
Background
Details
MAIN
FOCUS
Background
Details
MAIN
FOCUS
Background
Details
Web
Article
Entity of
MAIN
FOCUS
Entity of
MAIN
FOCUS
Entity of
MAIN
FOCUS
Writing For the Web
• The Triangles of Information
MMD
To write texts for the web is like making a
series of news triangles, each containing its
own partial focus.

6. • General guidelines
for writing for the web
Web text is non-linear, so it is important to use
many and separated conclusions. There is no
top-down reading but a non-linear activation of
many links:
Here are some basic advice:
1. Write arbitrarily, make test writings.
Once you have gathered the informtion you
need, then give each part a working title.
Do not write the texts in any believed
sequence.
MAIN
FOCUS
Background
Details
MAIN
FOCUS
Background
Details
MAIN
FOCUS
Background
Details
Writing For the Web
Entity of
MAIN
FOCUS
Entity of
MAIN
FOCUS
Entity of
MAIN
FOCUS
T J E C K L I S TMMD
Web
Article

7. 2. One text part, one subject
The reader must not be dependent on having read
something else on the site. Make sure the text (in general)
answers only one question in its menu.
3. Short texts and precise links
Rather than explaining all the concepts that are issued
on your site, just make crossreferences to other places on
your site where these concepts are explained. Also make
sure that the reader visits other links on your page by
making links (“read more about our drinks here”)
Do not just write “read more” … uninspiring!
• General guidelines
for writing for the web
Writing For the Web MAIN
FOCUS
Background
Details
MAIN
FOCUS
Background
Details
MAIN
FOCUS
Background
Details
Entity of
MAIN
FOCUS
Entity of
MAIN
FOCUS
Entity of
MAIN
FOCUS
T J E C K L I S TMMD
Web
Article

8. 4. Straight to the point
Deliver the message in the beginning of
the text. Avoid saying fx “as stated before.”
Assume that the reader has not read
anything else but this text and has only
clicked this link.
5. Good captions/headers
Make clear captions that relates to the target
group of the site. Make sure the captions
answers its text/content.
• General guidelines
for writing for the web
Writing For the Web MAIN
FOCUS
Background
Details
MAIN
FOCUS
Background
Details
MAIN
FOCUS
Background
Details
Entity of
MAIN
FOCUS
Entity of
MAIN
FOCUS
Entity of
MAIN
FOCUS
T J E C K L I S TMMD
Web
Article

9. Writing For the Web
• Writing an article for the web
These guidelines will show how to
build up articles on the internet
Header The first and most important part of the textual communication.
The header must capture the attention.
Here are some guidelines:
The header as a sticker: A short and informative header, fx “The Jones Index
is rising again”
The header as question: Fx “Can men and women be friends?”
The header as surprise: Fx “You don’t want to know this!”
T J E C K L I S TMMD

10. Writing For the Web
• Writing an article for the web
Header Avoid this when making a header:
The header as a confusing information with no clear reference:
Fx “News” instead of “News from The Times Magazine”
The header is too fresh: “Halooo! Any body home???” A real example from a
website for a bureau who is specialized in helping companies by taking care of
the reception welcoming customers (!) The use of three questionmarks a well as
the wacky tone is not fit for this kind of business.
NEVER period (.) after header.
NEVER misspelling in header (to say the least, in the text).
NEVER more than three period signs for ellipsis (…)
T J E C K L I S TMMD

11. Writing For the Web: Articles
• Writing an article for the web
Resume
After Header
The use of a small description after a text gives a quick insight in the
article:
The Next or the Last Click on Your Site?
Internet users are impatient. They want to get as quickly as possible
to the information they seek, or else they’re gone, because the next
link may be more exciting. And then your site is left behind. We have
met the net-guru Jacob Nielsen for a talk about the future of net-
design.
Text begins here zcxvnz zjc vlk jcvj zlvjlkz jzkvjl z kjvkj zljv zjvkzj zlcjvl jzpvkj zlkcv jlo zkjvl
zkcj v. Text zcxvnz zjc vlk jcvj zlvjlkz jzkvjl z kjvkj zljv zjvkzj zlcjvl jzpvkj zlkcv jlo zkjvl zkcj v.
This example
shows the header
as a teaser.
The resume
explains what
to expect from the
article.
T J E C K L I S TMMD

12. Writing For the Web
• Writing an article for the web
Subheaders Make subheaders to show what to expect.
Remember, we scan the text for parts we are interested in!
The text language Write simply and directly.
Ask: Who are you adressing (target group)?
What impression do you want to make?
What style do you want to communicate with (rhetorics)?
What sequence must the information/content of a text have?
What is need to know, what is nice to know?
T J E C K L I S TMMD

13. Writing For the Web
• Writing an article for the web
Call to action What elements are adressing a specific call to action?
Call to action elements are asking people to …
sign up for a newsletter
buy something (refers to a button)
to share something on Facebook (for example)
to rate a site or a post / to write a comment (dialogue)
to visit a link
among others
T J E C K L I S TMMD

14. WORKSHOP
http://www.guardian.co.uk/lifeandstyle/2009/feb/06/lucy-hill-breakdown-
shanghai
Study this link in relation to Longer texts/journalism
What is the relation between the header and the resume?:
Do these elements provide what they promise?
How are you guided trough the text?:
Is there too much text without the subheaders, does it matter?
How is the text (in general) written?: What type of story is it?
What kind of story typology would you use in this caseS?
For whom is it written and with what angle (in your opinion)?:
Is the topic specialized (like “politics”). In which category on its website has the newspaper placed
this story? Is the story sensational, actual etc. (see Fog et al p. 209)?
Can you give examples of the use of storytelling?:
Apply message, conflict, characters (and perhaps a kind of plot).
Analysis
MMD

15. Writing For the Web
Short-text
Elements
Strategy
SOURCE:
http://www.guardian.co.u
k/culture
MAIN
FOCUS
Background
Details
A Short-text element
consists of:
A title/header (link)
A concentrated
resume
And sometimes also:
A picture/appetizer
you click the
short-text element and you
are directed to
the full-text element …
T J E C K L I S TMMD

16. Writing For the Web
SOURCE:
http://www.rollingstone.c
om/news/story/10432334
/was_the_2004_election_
stolen
This is an example of a
full-text element
A title/header
A concentrated
Resume
Text and links
A picture /appetizer
Full-text
Elements
T J E C K L I S TMMD

17. SOURCE:
http://www.rollingstone.com/news/story/10432334/was_the_2004_election_stolen
MAIN
FOCUS
Background
Details
Full text.
That means: There are
triangles of information
throughout the text.
Each paragraph has
its own particular
focus
Writing For the Web
Full-text
Elements
This is an example
of a full-text element
T J E C K L I S TMMD

18. Writing For the Web
Text explaining
Added images
… or Not?
SOURCE:
http://www.rollingstone.c
om/news/story/10432334
/was_the_2004_election_
stolen
This is an example of a
full-text element
Unless the image is
somehow abstract as
an commentary, make
sure to write who or
what is in the picture,
where they were and
what they were/are
doing.
Sources are also
important: List the
photographer, the
artist or the bureau.
A word on
Pictures
T J E C K L I S TMMD

19. WORKSHOP (some groups)
Analysis Find to different websites: Two online newspapers (two very different types of
newspapers in English, say, The Guardian and The Sun)
Study these websites. Find a specific short text element and
a connected (linked) full text element at each of these websites.
Generally use the slides as a tjecklist
Describe, compare and analyze the use of …
Short text elements: What elements are used? Header, resume and a short
text? Picture/appetizer? Why/why not?
Full text elements: What elements are used? Header, resume and a
short text? Picture/appetizer? Why/why not?
Anything else you find interesting? Storytelling elements?
MMD

20. WORKSHOP (some groups)
Writing
assignment
Write an article based on the techniques you now have
learned about writing and on the storytelling elements.
Make a short, precise article for the web and, secondly,
write a short text element for this article in another document.
That means two papers/two documents:
One for the full text element and one for the short text element
aimed at making people click to see the full text element.
Also: Think about pictures that could support your article.
Write a correct picture text.
MMD