Kairos Prototyping Workshop

• Workshop overview here

---

• Pederick Web Developer Toolbar (for Firefox)

• POSH Content-Out Prototyping How-to

• XHTML Templates: Strict (for workshop); Transitional
• POSH Content-Out Prototyping (no positioning, styles)

Prototyping

A prototype is not the same thing as a mock-up: whereas a mockup is usually intended to showcase visual design, a prototype moves beyond or appears before visual design, and instead emphasizes layout, look and feel (functionality), ideally with your actual content, even in really rough form (as opposed to "greeked" or "lorem ipsum" text, which is more appropriate to a mockup's emphasis on visual design).

Working with your actual content is important because content, form, and function are intimately related, particularly in the rhetorical situation behind digital discourse on the Web (or what Kairos calls a "webtext").

Two crucial continuums:

Between scaffolding and execution: production methods that prepare or test ideas for production, and the act of producing the artifact itself.

Between micro and macro elements: smaller, isolated elements (buttons, menus, paragraphs), and the collection of those micro elements into sections, pages, entire artifacts.

POSH Content-out Prototyping

Designer Andy Clarke (2007) advocated a "content-out" approach to Web development, which encourages authors to think about the structure of their discourse apart from visual design. This is the main idea behind developing websites that are styled with CSS: CSS alone can't do much of anything; only when CSS is coupled with a richly structured document does a compelling design emerge. (Putting CSS over the top of an ugly, table-based webpage is sometimes described as "putting lipstick on a pig.")

This portion of the workshop will introduce you to POSH (Plain Old Semantic HTML) content-out prototyping, a method that avoids using visual tools like Dreamweaver. Such a move goes against the conventional wisdom of both our field of computers and writing and of consumer technology in general: we have become so accustomed to visual tools playing a part in the workflow of digital discourse that even the thought of abandoning may well be overwhelming. But as will be demonstrated below, POSH content-out prototyping is much simpler than visual tools, and readily adapts to independent revision of content and design, and to extending discourse to technologies like Flash.

Better still, content-out prototyping isn't a throw-away method: from the start, you are working towards the final product of your efforts.

Setting up a Production Workspace

• Selecting a text editor
• Selecting a baseline browser: Firefox
• Installing the Web Developer toolbar for Firefox
• Keeping all files together in a single folder (perhaps with sub-folders for CSS files, Javascript, images, etc.)

Setting up a Baseline XHTML/CSS Document

• Use XHTML 1.0 Transitional or XHTML 1.0 Strict (preferred) DOCTYPE
• Set character set to UTF-8 (allows copying of text with smart quotes, e.g., from Word)
• Link to Yahoo! reset CSS (creates baseline styles across all browsers, which vary)
• Create <style> tag for foundation CSS (adds some basic visual styles on top of the reset CSS
• Create <style> tag page CSS (should be linked to as a single file for all pages to allow global/multi-page design changes from one source).
• Or, download a template with all of the above: Transitional, Strict (preferred)

Plain Old Semantic HTML

• HTML is incredibly simple to write. No, really. The key thing to keep in mind is that, unlike HTML of the 1990s, today's HTML (actually called XHTML) is not a visual language. It is only for describing the structure of discourse.

• HTML's focus on structure, combined with the ease of writing it, makes it a powerful prototyping tool. Structurally, a header or a paragraph in a webtext will always be a header or a paragraph, not matter how it gets treated visually.

POSH in 30 Seconds

General Rule: POSH works from the INSIDE OUT.

• Mark up headers with <h2>, sub-headers with <h3> (reserve <h1> to provide a heading for the whole page)
• Mark up paragraphs with <p>
• Mark up items in a list with <li>
• For an ordered (numbered) list, group <li> tags in an <ol> tag
• For an unordered (bulleted) list, group <li> tags in a <ul> tag

• Tags that open must close: <h2>Close Tags</h2>
• Tags that open inside other tags close first: <ul><li>List item</li></ul>

• Tags that open inside other tags are children
• Tags that have other tags opened in them are parents
• Tags that share a parent (and thus are adjacent to one another) are siblings

CSS in 30 Seconds

GENERAL: Writing CSS is pretty much like describing the look of elements on your page

• CSS can control all visual aspects of any XHTML element
• To use CSS, one needs to know the elements on a page: headings, paragraphs, and lists; in CSS, these elements are selectors
• CSS can be even more effective when used alongside of familial relationships: e.g., styling links that are children of headings differently from links that are children of paragraphs
• Most CSS properties are plain English; e.g., to change text color, use the color property
• Properties are assigned values; to make text red, assign it to the color property: color: red;
• Consult a CSS reference, but start with the basics (color, background-color, border, font-size)

CSS Positioning in 30 Seconds

GENERAL RULE: CSS Positioning works from the OUTSIDE IN.

• Positioning is reserved for block-level elements (paragraphs, headings, lists)
• By default, block-level elements are as wide as the browser window
• By default, POSH content in a Web browser moves toward the top and the left
• Positioning is, then, often a matter of moving things down and to the right
• Positioning is done according to context: either the <body> tag (and thus the browser window) or an absolute- or relative-positioned parent element
• There are three basic kinds of positioning: static, relative, and absolute
• Static content cannot be positioned; it can only be "bumped" down and right with margins
• Relative content can be positioned or "bumped" like static content
• Absolute content is a free agent; content positioned absolutely has no effect on other page elements, which behave as though the absolutely positioned content no longer exists

For Further Reading

• Cederholm, Dan. (2007). Bulletproof Web design (2nd ed.). Berkeley, CA: New Riders.
• Cederholm, Dan. (2004). Web standards solutions: the markup and style handbook. Berkeley, CA: Apress-Friends of ED.
• Clarke, Andy. (2007). Transcending CSS: The fine art of web design. Berkeley, CA: New Riders. (esp. pp. 55-97, 181-269)
• Keith, Jeremy. (2005). DOM Scripting: Web design with JavaScript and the Document Object Model. Berkeley, CA: Apress-Friends of ED.
• Snyder, Carolyn. (2003). Paper prototyping: The fast and easy way to design and refine user interfaces. San Francisco, CA: Elsevier-Morgan Kaufmann.
• Stolley, Karl. (2008). Sustainable Web design: Resources for building better websites. http://www.sustainablewebdesign.com/