Introduction to Rhetorical Web Design

Surface

HTML

HyperText Markup Language is the code that you will use to create the structure of each webpage in a code-editing program such as Notepad++ or TextWrangler. "Structure" in this sense differs from style or "design" elements, which are the more aesthetics-related elements of the webpage's appearance. Your HTML document (saved as an .html file) will include a doc-type statement, a head that contains metadata, and a body that contains coded tags for paragraph divisions, text, links, lists, images, and divs (divisions or sections).

XHTML

Extensible HyperText Markup Language is a preferred form of HTML because it is based closely upon the fundamental rules of XML, which renders it more readily transferrable across a variety of platforms.

XHTML Reminders

Be sure that your tags both open and close, and that image and external-link tags contain certain attributes (e.g., an alt attribute for alternative text that should appear in place of an image if necessary, a size attribute to specify the height and width of an image, or a title attribute that may appear when the cursor hovers over a link or image).

Images Editors

Adobe Photoshop is a popular image editor, though certain free-downloadable alternatives exist, such as GIMP and Pixlr. Certain image editors, such as Apple's Aperture, have extensive capabilities and may prove very useful for some purposes but have limits on the sorts of filters that you can apply to an image (because they are applications designed to make photographs or other images look "better," not grainy or distorted beyond recognition even if that is your artistic decision).

Copyright

Be aware of copyright restrictions on images that you wish to use on your website. While proper source citation is essential, proprietary images cannot be used without the copyright holder’s permission &emdash; though "fair use" may permit leeway in some cases, such as for parody or satire. You can also look for copyright-free images.

CSS

Cascading Style Sheets (.css documents, also created in code-editing programs) are the coded documents that you apply to HTML documents to add stylistic design elements such as font styles and sizes, colors, borders, margins, and alignment. Include a link tag to the CSS sheet in the heading of a related HTML document. Separating stylistic design elements in this way makes future alterations to such elements within and across webpages much easier. When possible, use one CSS sheet for multiple HTML documents.

Borrowing Ideas

Select "View Page Source" to see the HTML and CSS code for another website to achieve an effect that you wish to imitate.

Usability

Use of repetition, space, and contrast should be products of conscious decisions to enhance user experience. Minimalism is one approach to web design that endeavors to enhance user experience through reduction of design to the minimal elements required to achieve the intended rhetorical purpose(s).

Font styles

Choose font styles that reinforce the meaning or purposes of the website and webpage content. Ensure that each of your CSS font choices is "web safe"or else has an alternative font choice and generic font family identified that will work on all browsers.

Color

Like font style, color selections are rhetorical choices that ought to serve the purpose(s) of the project. Realize that certain colors have cultural connotations, some positive and others pejorative, of which you ought to be aware, especially with respect to your intended audience(s).