Date post: | 06-Mar-2015 |
Category: |
Documents |
Upload: | amy-goodloe |
View: | 502 times |
Download: | 2 times |
The Rhetorical Nature of Web Design
a few preliminary considerations for colleagues and students
Amy Goodloe August 10, 2011 Version .02b
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!
COPYRIGHT NOTICE
All the material on these slides is the sole property of Amy Goodloe © 2011
all rights reserved
Do not use without permission!
The Basic Idea:
to inspire you to think rhetorically about web design
- reading the web - writing the web
Every element of a web site has a rhetorical purpose.
graphics layout color
navigation organization
and of course...
text
Everything works together to convey: - a particular mood or tone - a message about the content - a message about the author (ethos)
In other words, every element of a web site communicates a message...
whether the designer intended it to...
or not!
(this would be a good place for an example, eh?)
So how do you design a web site that sends the right messages for your
rhetorical situation?
Start by paying attention to how people read the web.
You probably don’t remember when you learned how to navigate a book.
(if you haven’t seen this already, go watch it!)
To read a book, you had to figure out elements like:
table of contents
chapters sections
page numbers appendices
index (or is that indices?)
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.
Structure
thesis statements previews of main points
topic sentences transitions
sentence structure headings
sub-headings
Format
alignment (left, centered, right, justified)
font type font size
bold, italics, underlining color
bulleted lists charts and tables
margins
Structural and formatting elements always convey meaning.
The key is making sure they convey the meaning you intend to convey.
A little food for thought:
If you read the previous slide on a web page, what meaning would the underlined
word you convey?
That brings us back to the question:
so how do people read on the web?
Web sites come in a variety of layouts, possibly more than are available
in print formats.
But some layouts are more common than others.
However, more common doesn‘t necessarily mean more readable.
(a variety of factors influence web
site layout)
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!)
Research with thermographic imaging shows that readers tend to read web pages in a more or less
“F” shaped pattern.
Like this:
So you wouldn’t want to put your most brilliant insights in
the lower right corner.
(unless, of course, your intention is to mess with readers’ expectations!)
* Not recommended for class web sites!
Common web page layout
Or
For example:
Let’s take a closer look at that top navigation menu.
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 class web site.
Now let’s take another look at that header image.
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
Didn’t “get” that message yourself?
No problem.
The image also has pretty colors that blend nicely with the rest of the site.
Let’s take another look.
Don’t underestimate the rhetorical power of pretty colors.
How much time do you want to spend reading this web site?
None!
I will talk more about elements like color and header images in another
presentation.
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)
Let’s turn to more pressing concerns:
how do YOU design a rhetorically effective web site?
To get you started thinking about answers to that question
(notice I didn’t say I would answer it!)
I want to do three things:
(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
(2) Show you what kinds of design decisions you can make with your own Wordpress site
(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)
PART 1: Anatomy of a Wordpress site applies to wordpress.com as well as self-hosted
Wordpress Components
(1) Architecture - set by CMS
(2) Design - set by theme designer, mostly - with some input by you
(3) Content - all yours
(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
(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
This is what PHP looks like
This is what CSS looks like
To illustrate what themes do:
The next slide shows a “demo” Wordpress blog with the default theme, Twenty Ten, activated.
And now, the same web site with the CSS disabled.
WARNING! Naked web site coming up.
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”
Next up...
A trip through a variety of themes, to see how they each change the
look and feel of the site.
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?
Each screen shot you just saw contained the same content, with different themes.
Just as a reminder, here’s the original
default theme again.
(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
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.
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.
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!)
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!
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)
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 / )
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>
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.
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.
(this slide unintentionally left blank)
:-/
PART 2: Design Considerations what can you do within the constraints of Wordpress?
Architecture: Header
Can’t change: ¤ basic framework ¤ exact layout and formatting
Can change: ¤ title, subtitle, content of top navigation
menu, etc.
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)
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
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
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
More to come!
¤ More on the theme of design, coming soon...
PART 3: Rhetorical Considerations it always comes back to audience
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
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?
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!
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?
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
Consider the rhetorical purpose of:
¤ subject lines ¤ categories ¤ tags ¤ formatting ¤ header images ¤ file names ¤ the theme’s design elements
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 Menu
Site Title
Categories
Tag Cloud
Sticky Post Links Menu
Text Widget
Archive
Header Image
Post Title
Author’s Avatar + post meta data
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
COPYRIGHT NOTICE
All the material on these slides is the sole property of Amy Goodloe © 2011
all rights reserved
Do not use without permission!