Download - Notes on the Rhetoric of Web Design
![Page 1: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/1.jpg)
The Rhetorical Nature of Web Design
a few preliminary considerations for colleagues and students
Amy Goodloe August 10, 2011 Version .02b
![Page 2: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/2.jpg)
PREFACE
¤ What follows are notes for a presentation I shared with colleagues at the PWR Digital Composition Workshop on August 10th, 2011.
¤ These notes are part of a larger project I’m working on on the topic of the rhetoric of web design, so please keep that in mind as you move further along in the presentation.
¤ TIP: The early slides are meant to be moved through at a brisk pace!
![Page 3: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/3.jpg)
COPYRIGHT NOTICE
All the material on these slides is the sole property of Amy Goodloe © 2011
all rights reserved
Do not use without permission!
![Page 4: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/4.jpg)
The Basic Idea:
to inspire you to think rhetorically about web design
- reading the web - writing the web
![Page 5: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/5.jpg)
Every element of a web site has a rhetorical purpose.
![Page 6: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/6.jpg)
graphics layout color
navigation organization
and of course...
text
![Page 7: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/7.jpg)
Everything works together to convey: - a particular mood or tone - a message about the content - a message about the author (ethos)
![Page 8: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/8.jpg)
In other words, every element of a web site communicates a message...
![Page 9: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/9.jpg)
whether the designer intended it to...
or not!
![Page 10: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/10.jpg)
(this would be a good place for an example, eh?)
![Page 11: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/11.jpg)
So how do you design a web site that sends the right messages for your
rhetorical situation?
![Page 12: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/12.jpg)
Start by paying attention to how people read the web.
![Page 13: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/13.jpg)
You probably don’t remember when you learned how to navigate a book.
![Page 14: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/14.jpg)
(if you haven’t seen this already, go watch it!)
![Page 15: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/15.jpg)
To read a book, you had to figure out elements like:
table of contents
chapters sections
page numbers appendices
index (or is that indices?)
![Page 16: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/16.jpg)
You also learned to pay attention to a variety of structural and formatting
elements for cues to help you interpret the meaning of printed text.
![Page 17: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/17.jpg)
Structure
thesis statements previews of main points
topic sentences transitions
sentence structure headings
sub-headings
![Page 18: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/18.jpg)
Format
alignment (left, centered, right, justified)
font type font size
bold, italics, underlining color
bulleted lists charts and tables
margins
![Page 19: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/19.jpg)
Structural and formatting elements always convey meaning.
![Page 20: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/20.jpg)
The key is making sure they convey the meaning you intend to convey.
![Page 21: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/21.jpg)
A little food for thought:
If you read the previous slide on a web page, what meaning would the underlined
word you convey?
![Page 22: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/22.jpg)
That brings us back to the question:
so how do people read on the web?
![Page 23: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/23.jpg)
Web sites come in a variety of layouts, possibly more than are available
in print formats.
![Page 24: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/24.jpg)
![Page 25: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/25.jpg)
![Page 26: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/26.jpg)
![Page 27: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/27.jpg)
![Page 28: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/28.jpg)
![Page 29: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/29.jpg)
But some layouts are more common than others.
![Page 30: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/30.jpg)
However, more common doesn‘t necessarily mean more readable.
(a variety of factors influence web
site layout)
![Page 31: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/31.jpg)
But if a layout is common, that probably means many web readers have been
“trained” to read it.
(more on the concept of “training” your readers later!)
![Page 32: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/32.jpg)
Research with thermographic imaging shows that readers tend to read web pages in a more or less
“F” shaped pattern.
![Page 33: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/33.jpg)
Like this:
![Page 34: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/34.jpg)
So you wouldn’t want to put your most brilliant insights in
the lower right corner.
![Page 35: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/35.jpg)
(unless, of course, your intention is to mess with readers’ expectations!)
* Not recommended for class web sites!
![Page 36: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/36.jpg)
Common web page layout
![Page 37: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/37.jpg)
Or
![Page 38: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/38.jpg)
For example:
![Page 39: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/39.jpg)
Let’s take a closer look at that top navigation menu.
![Page 40: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/40.jpg)
How do you “read” the placement of the items on the menu?
![Page 41: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/41.jpg)
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.)
![Page 42: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/42.jpg)
Many web readers also expect on-site links along the left, and off-site links (if any) along the right.
![Page 43: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/43.jpg)
These are just a few of the many rhetorical decisions you’ll need to make
when you design a class web site.
![Page 44: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/44.jpg)
Now let’s take another look at that header image.
![Page 45: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/45.jpg)
What message does the image convey?
![Page 46: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/46.jpg)
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
![Page 47: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/47.jpg)
Didn’t “get” that message yourself?
![Page 48: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/48.jpg)
No problem.
The image also has pretty colors that blend nicely with the rest of the site.
![Page 49: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/49.jpg)
Let’s take another look.
![Page 50: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/50.jpg)
![Page 51: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/51.jpg)
Don’t underestimate the rhetorical power of pretty colors.
![Page 52: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/52.jpg)
How much time do you want to spend reading this web site?
![Page 53: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/53.jpg)
![Page 54: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/54.jpg)
None!
![Page 55: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/55.jpg)
I will talk more about elements like color and header images in another
presentation.
![Page 56: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/56.jpg)
For now, let’s look at a few other elements of my class web sites that
illustrate how design conveys meaning.
(The following slides contain screenshots of my sites, which discussed in the workshop)
![Page 57: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/57.jpg)
![Page 58: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/58.jpg)
![Page 59: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/59.jpg)
Let’s turn to more pressing concerns:
how do YOU design a rhetorically effective web site?
![Page 60: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/60.jpg)
To get you started thinking about answers to that question
![Page 61: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/61.jpg)
(notice I didn’t say I would answer it!)
![Page 62: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/62.jpg)
I want to do three things:
![Page 63: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/63.jpg)
(1) Go over the anatomy of Wordpress
- because you’ll most likely be using Wordpress to build your site - because the anatomy lesson applies to reading and writing a variety of web sites
![Page 64: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/64.jpg)
(2) Show you what kinds of design decisions you can make with your own Wordpress site
![Page 65: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/65.jpg)
(3) Help you better understand the rhetorical considerations that should inform the way you “write” for web audiences
(using a few sample sites, including my own)
![Page 66: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/66.jpg)
PART 1: Anatomy of a Wordpress site applies to wordpress.com as well as self-hosted
![Page 67: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/67.jpg)
Wordpress Components
(1) Architecture - set by CMS
(2) Design - set by theme designer, mostly - with some input by you
(3) Content - all yours
![Page 68: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/68.jpg)
(1) Architecture
¤ CMS makes use of templates written in PHP
¤ templates provide layout by assembling all the parts “on the fly” (dynamic)
- parts: header, content, sidebar(s), footer
¤ knowledgeable user can customize templates
¤ most web sites follow a similar architecture to that used by Wordpress
![Page 69: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/69.jpg)
![Page 70: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/70.jpg)
![Page 71: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/71.jpg)
(2) Design
¤ Controlled by theme: PHP templates + CSS
¤ PHP Templates - header, content, sidebar, footer - index, posts, page, archives, & more
¤ CSS - “cascading style sheet” (defines how HTML elements will
appear) - controls colors, font type, font size, heading level
formatting, spacing, backgrounds, link styles, and much more
![Page 72: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/72.jpg)
This is what PHP looks like
![Page 73: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/73.jpg)
This is what CSS looks like
![Page 74: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/74.jpg)
To illustrate what themes do:
The next slide shows a “demo” Wordpress blog with the default theme, Twenty Ten, activated.
![Page 75: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/75.jpg)
![Page 76: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/76.jpg)
And now, the same web site with the CSS disabled.
![Page 77: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/77.jpg)
WARNING! Naked web site coming up.
![Page 78: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/78.jpg)
![Page 79: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/79.jpg)
NOTE: This is the “raw” text for the sidebar. It appears
further down the page without a CSS file as it’s the
CSS that makes it “float right”
![Page 80: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/80.jpg)
Next up...
A trip through a variety of themes, to see how they each change the
look and feel of the site.
![Page 81: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/81.jpg)
As you view each, consider :
• How does the theme impact the message?
• What does the theme say about the site’s content?
• ... about the designer?
![Page 82: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/82.jpg)
![Page 83: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/83.jpg)
![Page 84: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/84.jpg)
![Page 85: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/85.jpg)
![Page 86: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/86.jpg)
![Page 87: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/87.jpg)
![Page 88: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/88.jpg)
![Page 89: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/89.jpg)
![Page 90: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/90.jpg)
![Page 91: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/91.jpg)
![Page 92: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/92.jpg)
![Page 93: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/93.jpg)
![Page 94: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/94.jpg)
Each screen shot you just saw contained the same content, with different themes.
Just as a reminder, here’s the original
default theme again.
![Page 95: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/95.jpg)
![Page 96: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/96.jpg)
(3) Content
The content is all yours! ¤ Text you write in posts, pages, and text widgets ¤ Content you embed (images, videos,
slideshows, etc.) ¤ Links you provide in the sidebar ¤ Categories and tags you create to organize
material
![Page 97: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/97.jpg)
KEY POINT: Content is separate from architecture and design.
¤ If you change those (by picking a new theme), you’ll change how your content appears.
¤ But you won’t change the content itself.
![Page 98: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/98.jpg)
The separation of content from design and layout is what enabled the Web 2.0 revolution.
Now anyone can be a web author, without needing to be a web designer.
![Page 99: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/99.jpg)
But we’re not exactly at “web writing for dummies” level yet.
Apps that take too much control over the
design and layout simply aren’t popular
(like Microsoft Front Page... yuck!)
![Page 100: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/100.jpg)
Wordpress soared above all the other options because it still allows you a fair
degree of choice
The software is open source, so you’re free to tinker with it... a little bit or a lot!
![Page 101: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/101.jpg)
You don’t have to understand how to build a web site from scratch in
HTML, PHP, and CSS.
But you might find it helpful to learn a few HTML and CSS basics.
(CSS modification is not an option on the free version of wordpress.com)
![Page 102: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/102.jpg)
To apply HTML formatting to a piece of text, you put codes around the text inside
of angle brackets.
The code before the passage says “start doing x” and the code after it says “stop
doing x” (as indicated by the / )
![Page 103: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/103.jpg)
For example:
<strong>This will be bold</strong>
<em>This will be italicized</em>
<p>This will be a paragraph</p>
<h2>This will be header level 2</h2>
![Page 104: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/104.jpg)
Making a hyperlink:
<a href=http://amygoodloe.com/contact/>Contact Amy</a>
You can use the link tool to create a hyperlink in a post or page.
But knowing the HTML allows you to create a
hyperlink in a text widget or comment box as well.
![Page 105: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/105.jpg)
If HTML seems to complicated, that’s perfectly fine. Ignore it for now.
Later knowing the basics of HTML will
come in handy, especially for troubleshooting.
![Page 106: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/106.jpg)
(this slide unintentionally left blank)
:-/
![Page 107: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/107.jpg)
PART 2: Design Considerations what can you do within the constraints of Wordpress?
![Page 108: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/108.jpg)
Architecture: Header
Can’t change: ¤ basic framework ¤ exact layout and formatting
Can change: ¤ title, subtitle, content of top navigation
menu, etc.
![Page 109: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/109.jpg)
Architecture: Content
Can change: ¤ what goes in posts and pages
¤ text, formatting, images, links, etc. ¤ subject lines, date published, visibility ¤ what displays on main page (recent posts or
page)
Can’t change: ¤ meta data included in each post (function of
theme)
![Page 110: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/110.jpg)
Architecture: Sidebar
Can change: ¤ placement and settings for widgets ¤ sometimes also number and placement of
sidebars
Can’t change: ¤ what the widgets can and can’t do
![Page 111: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/111.jpg)
Architecture: Footer
Can’t change: ¤ Standard text included on footer
Can change: ¤ Some themes allow you to add your own
custom text ¤ Some also have footer widgets enabled
![Page 112: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/112.jpg)
Design
¤ Controlled by theme ¤ may have custom options
¤ With access to CSS, you can make many changes, both on the site as a whole and in individual posts and pages ¤ FYI: free wordpress.com does not give access
to CSS, but pwrfaculty.net does
![Page 113: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/113.jpg)
More to come!
¤ More on the theme of design, coming soon...
![Page 114: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/114.jpg)
PART 3: Rhetorical Considerations it always comes back to audience
![Page 115: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/115.jpg)
Priority #1: Your Audience
¤ readability and usability first ¤ who are your target readers? ¤ what are their reading habits?
¤ Principle: the less motivated a reader is to read your content, the easier you should make it find
![Page 116: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/116.jpg)
Site Navigation
¤ What goes on the page menu? ¤ should it have drop-downs?
¤ What goes on the sidebar menus? ¤ placement and labels impact meaning
¤ Can visitors search the site?
¤ If students can post entries, is it clear to them how to log in?
![Page 117: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/117.jpg)
Categories
¤ By design, blog posts go into categories, but there are many creative ways to use them ¤ Tip: Try to limit yourself to one category per post
and let tags do the rest of the work
¤ How to organize your info? Give yourself room to grow. ¤ Tip: Nancy has students suggest new categories
¤ You simply won’t get the categories right the first time!
![Page 118: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/118.jpg)
Tags
¤ Tags are keywords associated with content that show up on individual posts
¤ More importantly, tags can be displayed in a Tag Cloud in the sidebar
¤ What is the rhetorical purpose of a Tag Cloud?
![Page 119: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/119.jpg)
What is the rhetorical purpose?
¤ Every element of your web site has a rhetorical purpose ¤ The question is: are you paying attention to that
purpose? ¤ If you ask students to design web sites, make
sure they pay attention
![Page 120: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/120.jpg)
Consider the rhetorical purpose of:
¤ subject lines ¤ categories ¤ tags ¤ formatting ¤ header images ¤ file names ¤ the theme’s design elements
![Page 121: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/121.jpg)
Examples
¤ The slides that follow feature screen shots of a variety of web sites designed by my students and me, which we discussed in the workshop.
¤ The first example provides an “anatomy lesson” in how to build a class blog.
![Page 122: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/122.jpg)
Page Menu
Site Title
Categories
Tag Cloud
Sticky Post Links Menu
Text Widget
Archive
Header Image
Post Title
Author’s Avatar + post meta data
![Page 123: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/123.jpg)
![Page 124: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/124.jpg)
![Page 125: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/125.jpg)
![Page 126: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/126.jpg)
![Page 127: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/127.jpg)
![Page 128: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/128.jpg)
![Page 129: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/129.jpg)
![Page 130: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/130.jpg)
Under development!
¤ I will continue working on these presentation notes and may also add an audio voiceover in the future.
¤ If you have any questions or comments, please feel free to contact me at:
http://amygoodloe.com/contact
![Page 131: Notes on the Rhetoric of Web Design](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54f96bed4a79592b098b4a91/html5/thumbnails/131.jpg)
COPYRIGHT NOTICE
All the material on these slides is the sole property of Amy Goodloe © 2011
all rights reserved
Do not use without permission!