writing for the web_basics

Write to be readWriting for the web and storytelling

MMD

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

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

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

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.

• 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 WebEntity of

MAIN

FOCUS

Entity of

MAIN

FOCUS

Entity of

MAIN

FOCUS

T J E C K L I S TMMD

Web

Article

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!



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


Web

Article

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.



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


Web

Article

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!”


Writing 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 (…)


Writing For the Web: Articles


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.


Writing 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?


Writing 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


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

Writing For the Web

Short-text

Elements

Strategy

SOURCE:

http://www.guardian.co.u

k/culture

MAINFOCUS

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 …


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


SOURCE:

http://www.rollingstone.com/news/story/10432334/was_the_2004_election_stolen

MAINFOCUS

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


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


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

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

writing for the web_basics

Education