Web Design and Marketing – Week 4 – Web Style Guide – Chapter 9 – Editorial Style

 

1. Editorial style

1. People read differently on the web, scanning for content and then moving on

2. Pages become isolated fragments and not whole coherent text

3. Links cannot support thoughts like normal prose

4. Broken links can shake a users confidence

2. Structuring your prose

1. Site structure

                                          i.    Break up information into logical chunks that fit on a page

                                         ii.    Do not however chunk it unless it makes sense

1. Page structure

                                          i.    Segment the text for easy scanning

                                         ii.    Use descriptive headings

                                        iii.    Highlight important words and sections

                                        iv.    Use the inverted pyramid

1.     Summary and important information  first

2.     Support below

                                         v.    Structural markup

1.     HTML tags are visually different

2.     To search engines they can mean where to look for key information

3.     Use CSS to change the visual structure and let the spiders get what they need

1. Online style

1. Contrast and emphasis

                                          i.    On the web, the look influences how a reader relates.

                                         ii.    Contrast provides those entry points

1.     Headings and lists favor scanning

2.     Using them provides for search engine optimization         

1. Prose style - be clear and concise

2. Other stylistic considerations

                                          i.    Front load your content

1.     Do not do welcome to ...

2.     Start with clear concise information in inverted pyramid style

                                         ii.    Stick to the point - easily understood sentences

                                        iii.    Cultivate a particular voice - active verbs and first person language

                                        iv.    Think globally - it is the world wide web

1. Keywords

                                          i.    Position keywords near top

1.     Helps reader know information they need is there

2.     Helps search engine optimization

                                         ii.    Keywords and SEO

1.     Think of short phrases that a user would use and use them when possible

2.     Web page boils to one key word. Use it:

a.     Page title

b.     Major headings

c.     Near beginning of first paragraphs

d.     Alt text of all images

e.     META tags in header

f.      File name used with hyphens

3.     Do not:

a.     Use keyword where it will not fit

b.     Use tricks like white text on white background to hide keywords

1. Titles and subtitles

                                          i.    Provide visual cues to user

                                         ii.    Recommended styles

1.     Headline style (bold, capitalize first letter of words)

a.     Document titles

b.     References to other sites

c.     Titles of documents mentioned in text

d.     Proper names, product names, and trade marks

2.     Down style (bold, capitalize first word only)

a.     Subheads

b.     References to other sections in sight

c.     Figure titles

d.     Lists

1. Page titles

                                          i.    Title is crucial

1.     First thing users see

2.     It is what bookmarks use

3.     Search engines use it as primary descriptor of page

                                         ii.    Should contain

1.     Carefully chosen keywords

2.     Concise plain description of page

3.     Be unique if possible

                                        iii.    Only have about 65 characters so be careful with company name usage

1. Text formatting for web documents

1. Avoid excessive links

                                          i.    Destroys homogeneous look of text. If used try to customize color

                                         ii.    Think about grouping all links together

1. Avoid excessive or purely visual typographic markup

2. Use the best tool

                                          i.    Write in a word processor with spell check

                                         ii.    Transfer to html after proof reading

1. Do not use style sheets in word processors

2. Special text characters

                                          i.    Leave off smart quotes in word processor

                                         ii.    Special characters will need replacing

                                        iii.    Avoid auto-hyphenation features

                     

Blogger Labels: Design,Style,Guide,Editorial,People,fragments,text,Links,prose,Broken,Site,Break,Page,Segment,words,Summary,Support,Structural,HTML,visual,Online,Contrast,emphasis,reader,engine,Front,Start,Stick,Cultivate,person,language,Think,world,Keywords,Position,user,word,Major,Near,images,META,header,File,tricks,background,Provide,Headline,letter,Document,documents,Proper,product,marks,Down,Subheads,Figure,Title,Search,Should,Concise,description,characters,usage,Avoid,tool,Write,processor,Transfer,Special,Leave,quotes,auto,features,users,paragraphs,References,sheets,pyramid,engines,optimization