02 Feb 10 Jour3340 Design&Writing For The Web

Writing for the Web
February 2, 2010
JOUR 3340 – Online Journalism

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.

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

Elements of Good Design
Basics:
About Us
Contact Us
Privacy Statement
Terms of Use / Terms of Service
Copyright
Site Map
http://www.mysanantonio.com/help/sitemap

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
Index
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

Alternative Story ApproachesElements of the story
Profile
Q&A
Analysis
Eyewitness
Timeline
Original documents

Elements of a Digital Story
Headline
Text
Pictures/ Photogallery
Graphics
Static
Interactive (flash)
Maps
Related Links
Audio
Interviews
Natural Sound
Podcasts
SlideShows
Stills only
Stills plus music and some video
Polls (optional)
Blogs

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
Polls/Surveys
Write Visually
Use bulleted lists
Use numbered lists
Use Tables
Include pictures and other graphics
Source: http://www.usability.gov/design/writing4web.html

Some HTML Basics
WebMonkey.com
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….

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>

Beyond HTML
JavaScript
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

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
Examples

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

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: http://webstyleguide.com/site/chunk.html

Style tips from Poynter
Make it tight and bright
Explain
“Banish gray” – long blocks of text
Link, link, link
http://www.poynter.org/content/content_view.asp?id=35378

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: http://webstyleguide.com/site/chunk.html

Writing Style
Headlines – Compelling –
On the web, headlines sell the story
Six to 10 words
Strong verbs
Most important items first
Question headlines workable
Blurbs
Summaries of story, often on home page and linked to full length story
Briefs
A complete story in just a few sentences.

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

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 microsoft.com] 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.

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?

02 Feb 10 Jour3340 Design&Writing For The Web

by Neil Foote on Feb 18, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

02 Feb 10 Jour3340 Design&Writing For The Web — Presentation Transcript