02 Feb 10 Jour3340 Design&Writing For The Web
20
Writing for the Web February 2, 2010 JOUR 3340 – Online Journalism
-
Upload
neil-foote -
Category
Education
-
view
529 -
download
2
description
Professor Neil Foote's course notes
Transcript of 02 Feb 10 Jour3340 Design&Writing For The Web
Writing for the WebFebruary 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 storiesDivide long stories into several segmentsAlways 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
Top Ten Mistakes in Web Design
Using framesGratuitous use of
bleeding-edge technology
Scrolling text, marquees, constantly running animations◦ Don’t do it!
Complex URLsOrphan 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
Alternative Story ApproachesElements of the story
ProfileQ&AAnalysisEyewitnessTimelineOriginal documents
Elements of a Digital Story
HeadlineTextPictures/ PhotogalleryGraphics
◦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 <img src>
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 brightExplain“Banish gray” – long blocks of textLink, 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 storyBriefs
◦A complete story in just a few sentences.
Writing Style
Conversational styleCross between broadcast writing and printLively verbs, colorful adjectives and distinct
nouns.Active voice always!Short paragraphsBe 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 pointStory must be told in 50 words ... Then your
reader MIGHT read the restREMEMBER: 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?
