Writing for the Web<br />February 2, 2010<br />JOUR 3340 – Online Journalism <br />
Style Tips<br />Here’s some advise from Jakob Nielsen, the guru of web design and usability:<br />Users do not read on the...
Elements of Online News Website<br />Limit fonts and colors<br />Consistency makes it easier for readers to follow pages.<...
Elements of Good Design<br />Basics:<br />About Us<br />Contact Us<br />Privacy Statement<br />Terms of Use / Terms of Ser...
Using frames<br />Gratuitous use of bleeding-edge technology<br />Scrolling text, marquees, constantly running animations<...
Alternative Story ApproachesElements of the story <br />Profile<br />Q&A<br />Analysis<br />Eyewitness<br />Timeline<br />...
Elements of a Digital Story<br />Headline<br />Text<br />Pictures/ Photogallery<br />Graphics <br />Static <br />Interacti...
Remember this<br />Know your audience<br />Is the content relevant to your readers?<br />Do readers really want this infor...
Some HTML Basics<br />WebMonkey.com<br />A basic ‘web page’<br />&lt;html&gt;&lt;head&gt;&lt;h1&gt;&lt;title&gt;Future of ...
Some HTML Basics<br />Common HTML Tags:<br />Header (Headlines) &lt;H1&gt;&lt;/H1&gt;, &lt;H2&gt;<br />FONT: &lt;FONT&gt; ...
Beyond HTML<br />JavaScript<br />JavaScript is a programming language that is loosely based on Java. Instead of being refe...
Style Sheets - CSS<br />Used for creating templates<br />Embeds fonts, links, colors, images, backgrounds into a page so i...
Images<br />From .GIFs (Compuserve) to .JPEGs (or .JPG)<br />File size of photo crucial:<br />Evolution of Revolution<br /...
Writing Style – ‘Chunking’<br />Information broken into ‘chunks’ of information.<br />Web users prefer to print out long d...
Style tips from Poynter<br />Make it tight and bright<br />Explain<br />“Banish gray” – long blocks of text<br />Link, lin...
Writing Style – ‘Chunking’<br />Organizing information into relevant ‘chunks’ helps keep the reader interested.  Facilitat...
Writing Style<br />Headlines – Compelling – <br />On the web, headlines sell the story<br />Six to 10 words <br />Strong v...
Writing Style<br />Conversational style<br />Cross between broadcast writing and print<br />Lively verbs, colorful adjecti...
Additional Style Tips<br />Consider one idea per paragraph – even if it’s just one sentence.<br />Write in easily understo...
Web Story Structure<br />Get to the point<br />Story must be told in 50 words ... Then your reader MIGHT read the rest<br ...
Upcoming SlideShare
Loading in …5
×

02 Feb 10 Jour3340 Design&Writing For The Web

717 views
642 views

Published on

Professor Neil Foote's course notes

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
717
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

02 Feb 10 Jour3340 Design&Writing For The Web

  1. 1. Writing for the Web<br />February 2, 2010<br />JOUR 3340 – Online Journalism <br />
  2. 2. Style Tips<br />Here’s some advise from Jakob Nielsen, the guru of web design and usability:<br />Users do not read on the Web; instead they scan the pages, trying to pick out a few sentences or even parts of sentences to get the information they want<br />Users spend 4.4 seconds for every extra 100 words on a page <br />Users do not like long, scrolling pages: they prefer the text to be short and to the point <br />Users detest anything that seems like marketing fluff or overly hyped language (&quot;marketese&quot;) and prefer factual information. <br />
  3. 3. Elements of Online News Website<br />Limit fonts and colors<br />Consistency makes it easier for readers to follow pages.<br />Allow users to comment on stories<br />Divide long stories into several segments<br />Always test pages in different browsers<br />
  4. 4. Elements of Good Design<br />Basics:<br />About Us<br />Contact Us<br />Privacy Statement<br />Terms of Use / Terms of Service<br />Copyright<br />Site Map <br />http://www.mysanantonio.com/help/sitemap<br />
  5. 5. Using frames<br />Gratuitous use of bleeding-edge technology<br />Scrolling text, marquees, constantly running animations<br />Don’t do it!<br />Complex URLs<br />Orphan Pages<br />Long scrolling pages<br />Lack of navigation support<br />“Home button”<br />Site map<br />Index<br />Non-standard link colors<br />Everyone knows blue<br />Outdated information<br />Overly long download times<br />Human patience:10 – 15 seconds before lose interest<br />Top Ten Mistakes in Web Design<br />
  6. 6. Alternative Story ApproachesElements of the story <br />Profile<br />Q&A<br />Analysis<br />Eyewitness<br />Timeline<br />Original documents<br />
  7. 7. Elements of a Digital Story<br />Headline<br />Text<br />Pictures/ Photogallery<br />Graphics <br />Static <br />Interactive (flash)<br />Maps<br />Related Links<br />Audio <br />Interviews<br />Natural Sound<br />Podcasts<br />SlideShows<br />Stills only<br />Stills plus music and some video<br />Polls (optional)<br />Blogs <br />
  8. 8. Remember this<br />Know your audience<br />Is the content relevant to your readers?<br />Do readers really want this information?<br />Define the ‘form(s)’<br />Interactive: graphics and other elements<br />Slideshows: with or without audio<br />Polls/Surveys<br />Write Visually<br />Use bulleted lists<br />Use numbered lists <br />Use Tables<br />Include pictures and other graphics<br />Source: http://www.usability.gov/design/writing4web.html<br />
  9. 9. Some HTML Basics<br />WebMonkey.com<br />A basic ‘web page’<br />&lt;html&gt;&lt;head&gt;&lt;h1&gt;&lt;title&gt;Future of Media&lt;/title&gt;&lt;/h1&gt;&lt;/head&gt;&lt;body&gt;&lt;h1&gt;Newspapers: Will they exist?&lt;/h1&gt;&lt;p&gt;Newspapers were expected to be extinct years ago. That’s when radio came onto the scene. Then radio and newspapers were supposed to be overshadowed by TV.<br /> &lt;P&gt; Where are we now? Will your smart phone replace newspapers, radio, and TV? &lt;p&gt;What’s your prediction?&lt;/body&gt;&lt;/html&gt;<br />How does this look? Let’s see….<br />
  10. 10. Some HTML Basics<br />Common HTML Tags:<br />Header (Headlines) &lt;H1&gt;&lt;/H1&gt;, &lt;H2&gt;<br />FONT: &lt;FONT&gt; <br />Paragraph: &lt;p&gt;&lt;/p&gt;<br />Hyperlink: &lt;a href= [link] &lt;/a&gt;<br />Character Properties:<br />#FFFFFF is white<br />#80080 is purple<br />Image Source &lt;imgsrc&gt;<br />
  11. 11. Beyond HTML<br />JavaScript<br />JavaScript is a programming language that is loosely based on Java. Instead of being referred to in an HTML document, as Java applets are, JavaScript code is embedded in the document itself, using the SCRIPT element.<br />A programming language designed for use with web pages to add &apos;functionality&apos; eg to create drop-down menus, process information input by users. <br />Basic: The Calendar<br />Sophisticated: Pop up windows<br />Flash: Creates animation on your site (without being an animator)<br />Very simple: Martini Glass<br />Complicated: Clouds<br />
  12. 12. Style Sheets - CSS<br />Used for creating templates<br />Embeds fonts, links, colors, images, backgrounds into a page so it remains consistent throughout the website<br />Keeps design clean<br />Makes it easier for reader to find content<br />Simplifies publishing process, particularly sites with numerous pages<br />Examples<br />
  13. 13. Images<br />From .GIFs (Compuserve) to .JPEGs (or .JPG)<br />File size of photo crucial:<br />Evolution of Revolution<br />Traditional Print: 300 dpi (dots per inch)<br />Web Design: 72 dpi<br />
  14. 14. Writing Style – ‘Chunking’<br />Information broken into ‘chunks’ of information.<br />Web users prefer to print out long documents or save them on their hard drives. <br />Long stories on the web are hard to read. The more a reader needs to scroll, the less likely they are to read the story.<br />Source: Webstyle Guide: http://webstyleguide.com/site/chunk.html<br />
  15. 15. Style tips from Poynter<br />Make it tight and bright<br />Explain<br />“Banish gray” – long blocks of text<br />Link, link, link<br />http://www.poynter.org/content/content_view.asp?id=35378<br />
  16. 16. Writing Style – ‘Chunking’<br />Organizing information into relevant ‘chunks’ helps keep the reader interested. Facilitates adding links to enhance interactivity. Be careful: Don’t divide content into too many parts or readers will lose interest. <br />Chunking is a method to create consistency of web style, and helps readers understand the content flow on your site.<br />Source: Webstyle Guide: http://webstyleguide.com/site/chunk.html<br />
  17. 17. Writing Style<br />Headlines – Compelling – <br />On the web, headlines sell the story<br />Six to 10 words <br />Strong verbs <br />Most important items first<br />Question headlines workable<br />Blurbs<br />Summaries of story, often on home page and linked to full length story<br />Briefs<br />A complete story in just a few sentences.<br />
  18. 18. Writing Style<br />Conversational style<br />Cross between broadcast writing and print<br />Lively verbs, colorful adjectives and distinct nouns.<br />Active voice always!<br />Short paragraphs<br />Be aware of references to your sources<br />Consider using full name on second reference because you don’t know how story may link<br />
  19. 19. Additional Style Tips<br />Consider one idea per paragraph – even if it’s just one sentence.<br />Write in easily understood sentences.<br />Include links as part of your copy<br />E.g. Bill Gates [link to his bio] created Microsoft [link to microsoft.com] at a time when PCs were just beginning to become commonplace.<br />Think Globally. Avoid regional/local terms that may be misunderstood by the broader audience.<br />Develop a voice, a style, a flow.<br />
  20. 20. Web Story Structure<br />Get to the point<br />Story must be told in 50 words ... Then your reader MIGHT read the rest<br />REMEMBER: only about 100-150 lines per screen… and less if a reader is looking at story on a PDA.<br />Make everything you write relevant.<br />Constantly ask yourself: <br />Why should the reader care about this? <br />What elements of interactivity can be used to engage the reader to make the content more compelling?<br />

×