Writing for the online world, whether a website, blog, or article, is not the same. Online the medium, reading habits and ease of use are all different. Writing the same way as for a magazine or book will not work. This presentation covers what to know before you start, creating compelling content, making content easy to skim and understand, meaningful graphics, and appropriate language. All these contribute to making the web easier to use and understand.

1. Writing for the Web
It’s Not the Same
Charles E. Crouch
Photo: C. Crouch © Charles Crouch 2007-14

2. The Web is Not the Same...
Writing for the Web is not the same as writing for a
magazine, newspaper or book:
The medium is different
Reading habits are different
Ease of Use is different

3. Paper vs Screen
Paper still has many advantages over screens for
clarity and cost.
✔ High contrast ✗ Low contrast
✔ High DPI: 1200+ ✗ 150 DPI
✔ Portable
✗ Portable?
✔ Cheap
✗ Not yet

4. Reading Habits Differ
People don’t read Web pages.
They scan and skim for
something interesting...
Then stop and read.
This diagram shows where people focus on a Google search results page.
Red is highest, yellow is less, etc. Once visitors find something interesting,
they click and leave.
Photo: Eyetools

5. Ease of Use
People read books for hours.
Reading a computer screen is
not comfortable.
Photo: iStockPhoto

6. How Long?
With all these issues, how long do you have to catch your
visitors’ attention online?
3 to 4 Seconds!
You can attract visitors by paying attention to:
✓Compelling content
✓Easy to skim and understand

7. Before You Start, Know:
➡ Website Objectives
• What do you want people to do while on the
site?
• What do you want them to do after they leave
the site?
➡ Target Audience
• Who is your target audience?
• What do they want to know?

8. Compelling Content
Photo: iStockPhoto

9. Three Key Questions
Who is your Target Audience?
What do they want to know?
✓ Not: What do you want to tell them?
How can you make it easy for them,
not you?
Photo: iStockPhoto

10. Write for Your Audience!
ACME Widgets
About Us Our
Organization
Our
Products
News
About Us
Contact Us
Welcome to ACME Widgets
Our New Company
Headquarters!
With the opening of our new
company headquarters, ACME
Widgets moves to the front of
the line for showing our best
ACME
Photo: iStockPhoto

11. The First Sentence
Opening sentences are critical
Often the only sentence read
Catch readers’ interest and send
them deeper into the site
Photo: iStockPhoto

12. National Portrait Gallery, London
Shakespeare knew this...
In Shakespeare’s day, if you did not like
the play, you could leave early and get
your money back!
To keep the audience in the theater,
every play by Shakespeare starts with
one of three themes:
• Violence
• Teenage sex
• Supernatural

13. Easy to Skim & Understand
General rules for good content:
✓Clear and concise
✓Organized structure
✓Meaningful graphics
✓Appropriate language
Photo: C. Crouch

14. Clear and Concise
✓One idea per paragraph
✓Start with your conclusion,
they may not read any more.
✓Put secondary information
on linked sub-pages

15. Use half the words online
Paper Online
Etiam sit amet est
Eset eiusmod tempor incidunt et labore et dolore magna
aliquam. Ut enim ad minim veniam, quis nostrud exerc. Irure
dolor in reprehend incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit.
Lorem ipsum dolor sit amet, ligula
Suspendisse nulla pretium, rhoncus tempor placerat fermentum,
enim integer ad vestibulum volutpat. Nisl rhoncus turpis est, vel
elit, congue wisi enim nunc ultricies sit, magna tincidunt.
Maecenas aliquam maecenas ligula nostra, accumsan.
Fermentum pede fringilla urna semper, pede quam scelerisque et
enim in commodo, dictum a consequatur arcu.
Aenean iaculis laoreet arcu
Enim ridiculus aliquet penatibus amet, tellus at morbi, mi hac,
mus sit mauris facere.1 Natoque et. Sit nam duis montes, arcu
pede elit molestie, amet quisque sed egestas urna non.
Praesent integer leo orci aliquam, nibh a. Diam nobis eget,
erat natoque integer fringilla viverra. Fermentum pede fringilla
urna semper, pede quam scelerisque et enim in commodo,
dictum a consequatur arcu.
Etiam sit amet est
Eset eiusmod tempor incidunt et labore et dolore magna
aliquam. Ut enim ad minim veniam, quis nostrud exerc. Irure
dolor in reprehend incididunt ut labore magna aliqua. Duis aute
dolor in reprehenderit in voluptate velit.
Lorem ipsum dolor
Maecenas aliqua maecenas ligula nostra, accumsan. Fermentum
pede fringilla urna semper, quam scelerisque et enim in
commodo, dictum a consequatur arcu.
Aenean iaculis laoreet arcu
• Enim ridiculus aliquet penatibus
• Sit nam duis montes
• Praesent integer leo orci aliquam

16. Organized Structure
Divide content into manageable chunks
For many years widgets have been one
of the key technologies for increasing
productivity in a wide variety of industrial
uses and combinations. Today we know
that widgets are on the the primary
sources of productivity gains in modern
industry. Companies from many
business sectors are reporting increases
of 10 or 20% using the latest widgets in
their production lines and monitoring
equipment. While widgets have been in
production for over 50 years, recent
advances in electronics and materials
have enabled engineers to design
widgets with better throughput and
reduced power consumption. All APIs
are called and accessed through the
ACMEUX interface which is based on
For many years widgets have been one
of the key technologies for increasing
productivity in a wide variety of industrial
uses and combinations.
Today we know that widgets are on the
the primary sources of productivity gains
in modern industry. Companies from
many business sectors are reporting
increases of 10 or 20% using the latest
widgets in their production lines and
monitoring equipment.
While widgets have been in production
for over 50 years, recent advances in
electronics and materials have enabled
engineers to design widgets with better
throughput and reduced power.

17. Organized Structure
• Headings
• Sub-headings
• Bold text
• Hyperlinks
• Lists
Heading to Separate
Introduce
Eset eiusmod tempor incidunt et magna aliqua
bold important important words words and and phrases. phrases
Utim
minim veniam, quis nostrud exerc. Irure dolor in
reprehend incididunt ut labore magna aliqua.
Sub-Heading
to Separate
Maecenas aliqua maecenas ligula nostra,
accumsan. Fermentum pede quam scelerisque
Hyperlink to to Relevant Relevant Material, Material
et enim in.
Bullet List for for Similar Similar Items
Items
• Enim cars
aliquet penatibus
• Sit nam trucks
montes
• Praesent planes leo orci aliquam
planes
Show the content structure.
The HTML code in your
website will be used to
show this structure.

18. Meaningful Graphics
Graphics include photos, charts, diagrams,
videos, buttons, frames, etc.
➡Graphics support your
central theme
➡Reduce file sizes for fast
download
➡Don’t put key text in
graphics
Photo: C. Crouch

19. Meaningless Graphics
Do these add anything to a website?
People
Smiling
Meetings
Phone
Calls
Looking at
Computer
Photos: iStockPhoto, Microsoft

20. Reduce Graphic File Sizes
Digital
Camera
12 megapixel
photos are
common
Typical
Webpage
Therefore:
Compress
Photos and
Graphics so
they will
download fast
10 KB
A typical web
page is 1000
times smaller

21. Text in Graphics
Do not put important text inside a photograph.
It will be invisible to search engines.
•
•
A professional
Widget!
Power
CPU
2 GB
RAM
Rugged
Design
A professional Widget!
• Power CPU
• 2 GB RAM
• Rugged Design
•
•

22. Appropriate Language
• Casual style
• Appropriate for your audience
• International: non-native speakers
Photo: C. Crouch

23. Casual style
People online are active and vocal
Write to connect with (not talk to)
them
More casual style is used
Familiar words and phrases they use
Photo: iStockPhoto

24. Appropriate for your Audience
Many factors can determine the type
and level of content you provide.
Technical vs. Non-technical
Experienced vs. Newcomer
Education vs. Information
Casual vs. Engaged
Photo: iStockPhoto

25. International Speakers
The Web is a worldwide medium. Remember that not
everyone speaks your language as a native/mother tongue.
American English British English
“trunk” “boot”
“luggage” “ski”

26. More Things to Consider
Photo: C. Crouch

27. Use White Space
Implies elegance and clarity
Less intimidating, easier to read

28. Avoid Small Type
Give visitors the ability to enlarge type themselves.

29. Use High Contrast Colors
Especially for type
Hard
to
Read
Easy
to
Read

30. Putting it All Together
First, write for your Audience
Respect the differences online
Keep things simple
Photo: iStockPhoto

31. Other Presentations
on SlideShare

32. Questions Comments and Suggestions?
Charles Crouch
info@charlescrouch.com
CharlesECrouch
www.charlescrouch.com
Photo: iStockPhoto