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!