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

Recommended

Recommended

More Related Content

More from Neil Foote

More from Neil Foote (20)

Recently uploaded

Recently uploaded (20)

02 Feb 10 Jour3340 Design&Writing For The Web