SlideShare a Scribd company logo

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

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 of 32
Download to read offline
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 is different 
Reading habits are different 
Ease of Use is different
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
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
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 can attract visitors by paying attention to: 
✓Compelling content 
✓Easy to skim and understand

Recommended

More Related Content

What's hot (20)

Leaves - strucutre and development.ppt
Leaves - strucutre and development.pptLeaves - strucutre and development.ppt
Leaves - strucutre and development.ppt
 
Bryophytes,Pteridophytes
Bryophytes,PteridophytesBryophytes,Pteridophytes
Bryophytes,Pteridophytes
 
Photosynthesis
PhotosynthesisPhotosynthesis
Photosynthesis
 
Root stem transition
Root stem transition Root stem transition
Root stem transition
 
Lichens
LichensLichens
Lichens
 
CLICHES
CLICHESCLICHES
CLICHES
 
Fabaceae IN TAXONOMY
Fabaceae  IN TAXONOMYFabaceae  IN TAXONOMY
Fabaceae IN TAXONOMY
 
ROOT HAIR DEVELOPMENT IN PLANTS
ROOT HAIR DEVELOPMENT IN PLANTSROOT HAIR DEVELOPMENT IN PLANTS
ROOT HAIR DEVELOPMENT IN PLANTS
 
Development of male gametophyte
Development of male gametophyteDevelopment of male gametophyte
Development of male gametophyte
 
Fertilization
Fertilization Fertilization
Fertilization
 
Family: Ranunculaceae (Ranunculus,Delphinium)
Family: Ranunculaceae (Ranunculus,Delphinium)Family: Ranunculaceae (Ranunculus,Delphinium)
Family: Ranunculaceae (Ranunculus,Delphinium)
 
HETEROSPORY and SEED HABIT.pptx
HETEROSPORY and SEED HABIT.pptxHETEROSPORY and SEED HABIT.pptx
HETEROSPORY and SEED HABIT.pptx
 
CYCAS-1.pdf
CYCAS-1.pdfCYCAS-1.pdf
CYCAS-1.pdf
 
Phylotaxis
PhylotaxisPhylotaxis
Phylotaxis
 
Gene Epistasis
Gene EpistasisGene Epistasis
Gene Epistasis
 
Bryophytes: alternation of generation, morphology, anatomy and reproductive c...
Bryophytes: alternation of generation, morphology, anatomy and reproductive c...Bryophytes: alternation of generation, morphology, anatomy and reproductive c...
Bryophytes: alternation of generation, morphology, anatomy and reproductive c...
 
Secondary growth in plant roots
Secondary growth in plant rootsSecondary growth in plant roots
Secondary growth in plant roots
 
Formal letters
Formal lettersFormal letters
Formal letters
 
Pollen pistil interaction
Pollen pistil interactionPollen pistil interaction
Pollen pistil interaction
 
photosystem Iand II,ETC
photosystem Iand II,ETCphotosystem Iand II,ETC
photosystem Iand II,ETC
 

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

Asia Ryćko, Agnieszka Sekuła: Typography online | BachoTeX 2015
Asia Ryćko, Agnieszka Sekuła: Typography online | BachoTeX 2015Asia Ryćko, Agnieszka Sekuła: Typography online | BachoTeX 2015
Asia Ryćko, Agnieszka Sekuła: Typography online | BachoTeX 2015GUST
 
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...NCCOMMS
 
Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design
Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design
Tim Frick
 
Is your website ready? Five Things You MUST Check
Is your website ready? Five Things You MUST CheckIs your website ready? Five Things You MUST Check
Is your website ready? Five Things You MUST CheckCharles Crouch
 
Engl313 project1 slidedoc2_format_documentdesignreadability
Engl313 project1 slidedoc2_format_documentdesignreadabilityEngl313 project1 slidedoc2_format_documentdesignreadability
Engl313 project1 slidedoc2_format_documentdesignreadabilityBarbara Ann
 
Pixel Perfect Precision
Pixel Perfect PrecisionPixel Perfect Precision
Pixel Perfect PrecisionAlberto R
 
Need to reboot your content creation strategy? Start with "No"
Need to reboot your content creation strategy? Start with "No"Need to reboot your content creation strategy? Start with "No"
Need to reboot your content creation strategy? Start with "No"Keith Boyd
 
Improving Your Email Communications (and making your life easier in the process)
Improving Your Email Communications (and making your life easier in the process)Improving Your Email Communications (and making your life easier in the process)
Improving Your Email Communications (and making your life easier in the process)Reid Dossinger
 
Emperors new clothes_digitalbarn_output_snakk
Emperors new clothes_digitalbarn_output_snakkEmperors new clothes_digitalbarn_output_snakk
Emperors new clothes_digitalbarn_output_snakkkevinjohngallagher
 
Emperors new clothes - digitalbarn2012
Emperors new clothes - digitalbarn2012Emperors new clothes - digitalbarn2012
Emperors new clothes - digitalbarn2012kevinjohngallagher
 
Collaboration Within Systems Of Our Physical Environment
Collaboration Within Systems Of Our Physical EnvironmentCollaboration Within Systems Of Our Physical Environment
Collaboration Within Systems Of Our Physical EnvironmentDeborah Quintana
 
What your employees need to learn to work with data in the 21 st century
What your employees need to learn to work with data in the 21 st century What your employees need to learn to work with data in the 21 st century
What your employees need to learn to work with data in the 21 st century Human Capital Media
 
Inclusive design principles for WordPress
Inclusive design principles for WordPressInclusive design principles for WordPress
Inclusive design principles for WordPressJoe Ortenzi
 
Pp3 - Pixel Perfect Precision V3
Pp3 - Pixel Perfect Precision V3Pp3 - Pixel Perfect Precision V3
Pp3 - Pixel Perfect Precision V3Olybop .fr
 
Gui 设计&评审原则 完整
Gui 设计&评审原则 完整Gui 设计&评审原则 完整
Gui 设计&评审原则 完整Johnson Yu
 
Jane_clark_pres2016_FUP_web
Jane_clark_pres2016_FUP_webJane_clark_pres2016_FUP_web
Jane_clark_pres2016_FUP_webJane Clark
 
Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)
Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)
Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)kevinjohngallagher
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!Embolden
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!Embolden
 

Similar to Writing for the Web, It's Not the Same! (20)

Asia Ryćko, Agnieszka Sekuła: Typography online | BachoTeX 2015
Asia Ryćko, Agnieszka Sekuła: Typography online | BachoTeX 2015Asia Ryćko, Agnieszka Sekuła: Typography online | BachoTeX 2015
Asia Ryćko, Agnieszka Sekuła: Typography online | BachoTeX 2015
 
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...
O365Con19 - UI:UX 101 Learn How to Design Custom Experiences for SharePoint -...
 
Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design
Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

 
Is your website ready? Five Things You MUST Check
Is your website ready? Five Things You MUST CheckIs your website ready? Five Things You MUST Check
Is your website ready? Five Things You MUST Check
 
Engl313 project1 slidedoc2_format_documentdesignreadability
Engl313 project1 slidedoc2_format_documentdesignreadabilityEngl313 project1 slidedoc2_format_documentdesignreadability
Engl313 project1 slidedoc2_format_documentdesignreadability
 
Pixel Perfect Precision
Pixel Perfect PrecisionPixel Perfect Precision
Pixel Perfect Precision
 
Emperors new clothes_jab
Emperors new clothes_jabEmperors new clothes_jab
Emperors new clothes_jab
 
Need to reboot your content creation strategy? Start with "No"
Need to reboot your content creation strategy? Start with "No"Need to reboot your content creation strategy? Start with "No"
Need to reboot your content creation strategy? Start with "No"
 
Improving Your Email Communications (and making your life easier in the process)
Improving Your Email Communications (and making your life easier in the process)Improving Your Email Communications (and making your life easier in the process)
Improving Your Email Communications (and making your life easier in the process)
 
Emperors new clothes_digitalbarn_output_snakk
Emperors new clothes_digitalbarn_output_snakkEmperors new clothes_digitalbarn_output_snakk
Emperors new clothes_digitalbarn_output_snakk
 
Emperors new clothes - digitalbarn2012
Emperors new clothes - digitalbarn2012Emperors new clothes - digitalbarn2012
Emperors new clothes - digitalbarn2012
 
Collaboration Within Systems Of Our Physical Environment
Collaboration Within Systems Of Our Physical EnvironmentCollaboration Within Systems Of Our Physical Environment
Collaboration Within Systems Of Our Physical Environment
 
What your employees need to learn to work with data in the 21 st century
What your employees need to learn to work with data in the 21 st century What your employees need to learn to work with data in the 21 st century
What your employees need to learn to work with data in the 21 st century
 
Inclusive design principles for WordPress
Inclusive design principles for WordPressInclusive design principles for WordPress
Inclusive design principles for WordPress
 
Pp3 - Pixel Perfect Precision V3
Pp3 - Pixel Perfect Precision V3Pp3 - Pixel Perfect Precision V3
Pp3 - Pixel Perfect Precision V3
 
Gui 设计&评审原则 完整
Gui 设计&评审原则 完整Gui 设计&评审原则 完整
Gui 设计&评审原则 完整
 
Jane_clark_pres2016_FUP_web
Jane_clark_pres2016_FUP_webJane_clark_pres2016_FUP_web
Jane_clark_pres2016_FUP_web
 
Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)
Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)
Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!
 

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?
  • 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
  • 32. Questions Comments and Suggestions? Charles Crouch info@charlescrouch.com CharlesECrouch www.charlescrouch.com Photo: iStockPhoto