Writing for the Web 
It’s Not the Same 
Charles E. Crouch 
Photo: C. Crouch © Charles Crouch 2007-14
The Web is Not the Same... 
Writing for the Web is not the same as writing for a 
magazine, newspaper or book: 
The medium...
Paper vs Screen 
Paper still has many advantages over screens for 
clarity and cost. 
✔ High contrast ✗ Low contrast 
✔ Hi...
Reading Habits Differ 
People don’t read Web pages. 
They scan and skim for 
something interesting... 
Then stop and read....
Ease of Use 
People read books for hours. 
Reading a computer screen is 
not comfortable. 
Photo: iStockPhoto
How Long? 
With all these issues, how long do you have to catch your 
visitors’ attention online? 
3 to 4 Seconds! 
You ca...
Before You Start, Know: 
➡ Website Objectives 
• What do you want people to do while on the 
site? 
• What do you want the...
Compelling Content 
Photo: iStockPhoto
Three Key Questions 
Who is your Target Audience? 
What do they want to know? 
✓ Not: What do you want to tell them? 
How ...
Write for Your Audience! 
ACME Widgets 
About Us Our 
Organization 
Our 
Products 
News 
About Us 
Contact Us 
Welcome to ...
The First Sentence 
Opening sentences are critical 
Often the only sentence read 
Catch readers’ interest and send 
them d...
National Portrait Gallery, London 
Shakespeare knew this... 
In Shakespeare’s day, if you did not like 
the play, you coul...
Easy to Skim & Understand 
General rules for good content: 
✓Clear and concise 
✓Organized structure 
✓Meaningful graphics...
Clear and Concise 
✓One idea per paragraph 
✓Start with your conclusion, 
they may not read any more. 
✓Put secondary info...
Use half the words online 
Paper Online 
Etiam sit amet est 
Eset eiusmod tempor incidunt et labore et dolore magna 
aliqu...
Organized Structure 
Divide content into manageable chunks 
For many years widgets have been one 
of the key technologies ...
Organized Structure 
• Headings 
• Sub-headings 
• Bold text 
• Hyperlinks 
• Lists 
Heading to Separate 
Introduce 
Eset ...
Meaningful Graphics 
Graphics include photos, charts, diagrams, 
videos, buttons, frames, etc. 
➡Graphics support your 
ce...
Meaningless Graphics 
Do these add anything to a website? 
People 
Smiling 
Meetings 
Phone 
Calls 
Looking at 
Computer 
...
Reduce Graphic File Sizes 
Digital 
Camera 
12 megapixel 
photos are 
common 
Typical 
Webpage 
Therefore: 
Compress 
Phot...
Text in Graphics 
Do not put important text inside a photograph. 
It will be invisible to search engines. 
• 
• 
A profess...
Appropriate Language 
• Casual style 
• Appropriate for your audience 
• International: non-native speakers 
Photo: C. Cro...
Casual style 
People online are active and vocal 
Write to connect with (not talk to) 
them 
More casual style is used 
Fa...
Appropriate for your Audience 
Many factors can determine the type 
and level of content you provide. 
Technical vs. Non-t...
International Speakers 
The Web is a worldwide medium. Remember that not 
everyone speaks your language as a native/mother...
More Things to Consider 
Photo: C. Crouch
Use White Space 
Implies elegance and clarity 
Less intimidating, easier to read
Avoid Small Type 
Give visitors the ability to enlarge type themselves.
Use High Contrast Colors 
Especially for type 
Hard 
to 
Read 
Easy 
to 
Read
Putting it All Together 
First, write for your Audience 
Respect the differences online 
Keep things simple 
Photo: iStock...
Other Presentations 
on SlideShare
Questions Comments and Suggestions? 
Charles Crouch 
info@charlescrouch.com 
CharlesECrouch 
www.charlescrouch.com 
Photo:...
Upcoming SlideShare
Loading in …5
×

Writing for the Web, It's Not the Same!

34,983
-1

Published on

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.

3 Comments
26 Likes
Statistics
Notes
No Downloads
Views
Total Views
34,983
On Slideshare
0
From Embeds
0
Number of Embeds
35
Actions
Shares
0
Downloads
116
Comments
3
Likes
26
Embeds 0
No embeds

No notes for slide

Writing for the Web, It's Not the Same!

  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×