PUBLISHING ON THE WEBRhetorical Principles & Web Publishing Options

Notes for WRTG 3020 Students

Amy Goodloe ~ Spring 2012

A FEW RHETORICAL PRINCIPLES FOR WEB DESIGNTips on Reader-Friendly Design

Core Design Principle

Design your web site so that it fulfills the expectations of your target audience regarding content, design, and usability.

• Content: Site should deliver on the promise of its title

• Design: Theme and images should complement message

• Usability: Layout should be based on how most users navigate web sites

Overall Design Principles• Choose a search-engine friendly URL and web site title

• Effective: bouldervegan.weebly.com• Ineffective: wrtgproject.weebly.com

• Organize content into logical parts• Use pages and sub-pages • On blogs, use categories and tags appropriately

• Provide clear and logical navigation menus • Along top OR on sidebar, not multiple places• Follow customary placement of navigation items• Give menu items short but helpful titles

• Follow CRAP/BS principles:• Contrast, repetition, alignment, proximity, balance, symmetry

Page Design Principles• Limit how much users need to scroll

• Use 13” laptop w/ maximized web browser window as basis• Home page: no more than 2 scrolls; other pages: no more than 3

• Design user-friendly paragraphs• Open with topic sentence • Stay focused on developing topic• Keep concise and SHORT!

• Design text to be skimmable• Use headings and sub-headings• Use bulleted or numbered lists• Use bold for maximum emphasis and italics for some emphasis

• Do NOT use underlining (on the web, that means: hyperlink)

Research with thermographic imaging shows that readers tend to read web pages in a more or less “F” shaped pattern, like this:

Common web page layout

Or

For example:

How do you “read” the placement of the items on the menu?

Many web readers have been “trained” to expect a home button on the far left and a contact button on the far right.

(A “home” button returns readers to the site’s opening page.)

Many web readers also expect on-site links along the left, and off-site links (if any) along the right.

These are just a few of the many rhetorical decisions you’ll need to make when you design a web site.

What message does the image convey?

Here’s what I was going for:

- iconic image of Marilyn Monroe is typically associated with cultural ideal of female heterosexuality

- rainbow gradient hints at a possible queer reading - repetition of image underscores performative nature of gender norms

Didn’t “get” that message yourself?

No problem.

The image also has pretty colors that blend nicely with the rest of the site.

Don’t underestimate the rhetorical power of pretty colors.

How much time do you want to spend reading this web site?

Principles Recap• Core:

• Design your web site so that it fulfills the expectations of your target audience regarding content, design, and usability.

• Overall:• Choose a search-engine friendly URL and web site title• Organize content into logical parts• Provide clear and logical navigation menus • Follow CRAP/BS principles

• Pages:• Limit how much users need to scroll• Design user-friendly paragraphs• Design text to be skimmable

WEB PUBLISHING OPTIONSTips on Choosing a Web Platform

A Few Considerations• What is the purpose of the site?

• Inform, persuade, encourage interaction, etc.

• Who is your audience?• How easily will they find the site?

• What format is your content in?• Text, images, videos, PDFs, etc.

• What role will team members play?• Does everyone need access to all aspects of site?• Will the site be used by teams in future classes?

• How much time do you have to learn a web publishing platform?

Web Site Builders

Overview

Hosts: Weebly, Wix

Best for: static web sites

Pros: easy to use

Cons: limited layout options

Examples

• http://aisldenver2012.weebly.com/

• http://gaygene.weebly.com/• http://perpetualrevision.weebly

.com/• http://siteshowcase.weebly.co

m/• http://www.wix.com/onebead/p

roject

Wikis

Overview

Hosts: Wikispaces, Wikidot

Best for: growing web sites with collaborative editing

Pros: easy to use

Cons: limited layout options and themes

Examples

• perpetualrevision.wikispaces.com• digitalstudents.wikidot.com• genderbinary.wikidot.com• 56wrtg1150.wikidot.com• 66wrtg1150.wikidot.com• techcommdesign.net

/digital-literacy-report

Blog Sites

Overview

Hosts: Wordpress, Tumblr

Best for: frequently added content

Pros: more layout options and prettier themes

Cons: slightly steeper learning curve

Examples

• perpetualrevision.wordpress.com• slasheducationalresourceproject.tumblr

.com

Zooming Presentations

Overview

Hosts: Prezi

Best for: non-linear content

Pros: fancy zooming effect

Cons: not intuitive (until you watch tutorials)

Examples

• prezi.com/a_tm7kcmlesp/top-10-lesbian-young-adult-books

• prezi.com/1zjqb7raya8h/lbgtq-mythology-throughout-time

• prezi.com/8t0rrju0b5g0/10-common-myths-misconceptions-in-the-lgbt-community

Presentation Videos

Overview

Hosts: YouTube, Vimeo, SlideShare

Best for: Multimedia content

Pros: Appealing way to present video, audio, images, and voiceover

Cons: Video editing comes with steeper learning curve

Examples

• gendersex.net/blog/archives/end-violence-against-the-transgendered

• www.youtube.com/watch?v=kR0CKynJbjk

• gendersex.net/blog/archives/review-of-the-pinkerspelke-debate

WORKSHOP• What tool do you want to try for your project?• What steps will you need to follow to use that tool?• How can I help you?

HELP RESOURCES• See the handouts on: http://digitalwriting101.net• Also search Google!• Questions? http://amygoodloe.com/contact