These notes are for a workshop I'm giving to a group of students who will be preparing web sites for their final course projects.

1. PUBLISHING ON THE WEB
Rhetorical Principles & Web Publishing Options
Notes for WRTG 3020 Students
Amy Goodloe ~ Spring 2012

2. A FEW RHETORICAL PRINCIPLES
FOR WEB DESIGN
Tips on Reader-Friendly Design

3. 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

4. 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

5. 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)

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

7. Common web page layout

8. Or

9. For example:

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

11. 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.)

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

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

14. What message does the image convey?

15. 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

16. Didn’t “get” that message yourself?

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

19. Don’t underestimate the
rhetorical power of pretty colors.

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

21. 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

22. WEB PUBLISHING OPTIONS
Tips on Choosing a Web Platform

23. 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?

24. Web Site Builders
Overview Examples
Hosts: Weebly, Wix • http://aisldenver2012.weebly.c
om/
Best for: static web sites • http://gaygene.weebly.com/
Pros: easy to use • http://perpetualrevision.weebly
Cons: limited layout .com/
• http://siteshowcase.weebly.co
options
m/
• http://www.wix.com/onebead/p
roject

28. Wikis
Overview Examples
Hosts: Wikispaces, Wikidot • perpetualrevision.wikispaces.com
• digitalstudents.wikidot.com
Best for: growing web sites • genderbinary.wikidot.com
with collaborative editing • 56wrtg1150.wikidot.com
Pros: easy to use • 66wrtg1150.wikidot.com
• techcommdesign.net/digital-
Cons: limited layout
literacy-report
options and themes

32. Blog Sites
Overview Examples
• perpetualrevision.wordpress.com
Hosts: Wordpress, Tumblr
• slasheducationalresourceproject.tumblr
Best for: frequently added .com
content
Pros: more layout options
and prettier themes
Cons: slightly steeper
learning curve

35. Zooming Presentations
Overview Examples
Hosts: Prezi • prezi.com/a_tm7kcmlesp/top-10-
lesbian-young-adult-books
Best for: non-linear • prezi.com/1zjqb7raya8h/lbgtq-
content mythology-throughout-time
• prezi.com/8t0rrju0b5g0/10-
Pros: fancy zooming effect
common-myths-misconceptions-in-
Cons: not intuitive (until the-lgbt-community
you watch tutorials)

38. Presentation Videos
Overview Examples
Hosts: YouTube, Vimeo, • gendersex.net/blog/archives/en
SlideShare d-violence-against-the-
Best for: Multimedia content transgendered
Pros: Appealing way to present • www.youtube.com/watch?v=kR
video, audio, images, and 0CKynJbjk
voiceover • gendersex.net/blog/archives/re
Cons: Video editing comes with view-of-the-pinkerspelke-
steeper learning curve debate

41. 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