Your SlideShare is downloading. ×
  • Like
02 Feb 10   Jour3340  Design&Writing For The Web
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

02 Feb 10 Jour3340 Design&Writing For The Web


Professor Neil Foote's course notes

Professor Neil Foote's course notes

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


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