Zero to CSSixty: What I've Learned about Web Design

This is a draft of the first section of my paper. Please read and lob any thoughts that you have my way!

In December of 2008, I signed up for a graduate course entitled “Online Publishing.” Though I honestly had no idea what I’d actually do in the course, I figured that writing, blogging, and websites would come into play at some level. Learning theories of interactivity, usability, and visual design certainly weren’t on the list. And I certainly had little intention of learning XHTML and CSS, much less of becoming an advocate for standards-based open-source design. But here I am four months (or so) from that point, having learned all of that and quite a bit more. As I reflect on the homepage design projects I’ve undertaken (and am still developing), I can’t help but reflect on how to fit it all together—what are the major lessons I’ve learned, what are their implications, and how can I distill it all into a few thousand words? (Something I struggled with on my blog throughout the semester.)

As I work over those issues, and as I review my blogs with all of their various schema, lists of rules and guidelines, and rapidly-arrived-at mathematical equations, I’m continually led back to the concept of the rhetorical triangle. It seems too simple, really, but all of the elements of coding, design, narrative, interactivity, layout, mediation, and HTML that I’ve been grappling with can be succinctly put in terms of James Kinneavy’s tried-and-true communication triangle:

Figure 1 [insert kinneavy figure]

Any writer considering their rhetorical situation must balance a complex set of goals, motivations, needs, and contexts to be considered effective. The web, among other things, increases the complexity of this juggling act. If I take the well-known triumvirate of writer/encode, reader/decoder, and subject/reality (with signal/text, context, and purpose floating nebulously in the ether) and tweak it for web texts, I come up with the following:

Figure 2 [insert figure of web rhetorical triangle]

Among the first problems to emerge is a stronger sense of separation between a text’s visual (or even aural) design and its content. Another is the peculiarity of the Internet and hypertext as a context for both writers and users—especially how metaphors for web and design impinge in strange ways as contexts on web texts. Finally, there is the inevitable purpose of a web text—interactivity and action. These impinge upon content creation, information design, and (again separate from the others) Web design.

My own process of designing, redesigning, and reredesigning my own homepage is certainly exemplary of all of this impingement. A few particular concepts, however, have been especially helpful in guiding my design and development, especially in my work with CSS (Cascading Style Sheets):

  • Flexibility: flexible design allows content to be adapted to new environments, especially different browsers and devices; the ability of content to be adapted to different designs.
  • Accessibility: essentially usability; design should remove barriers to access for as many people as possible, regardless of disability, browsing capability, or device used to access content.
  • Semanticity: meaningful design makes markup easier to use; designs are created logically, according to what meanings and relationships are expressed by content, rather than arbitrarily, according to visual layout.
  • Interactivity: a “continuing increase in participation” (Meadows 37); interactive design attempts to inspire users’ continued participation with content.

In the end, these concepts led me to developing the following mantras for web design. While certainly not all-encompassing, I think that each is of foundational importance, and I would at this point certainly include them in any lesson or lecture on designing web texts. Each of these has strong implications for the designer, for the user, and for the text:

  1. Don’t start with design; start with content. Otherwise, you’ll paint your text into a corner.
  2. Don’t start with design; you’ll have a hard time rewriting your text.
  3. Information needs perspective to become meaningful; single-sourcing allows flexibility for multiple perspectives.
  4. It’s a page. But it’s not a page. Or at least it won’t always be one.

Each of these has a great deal to do with the notion that CSS is intended to separate style and content; this process of separation has been one of the major movements in my own website design, as I have learned to move from a heavily stylized markup to—at this point—nearly style-free, semantic, standards-compliant HTML and CSS. My goal, in the end, is to design sites (and certainly other kinds of texts) that are not only usable and effective from a rhetorical standpoint, but also is aligned to the best definitions of Web design. Jeffrey Zeldman, cofounder of the Web Standards Project, defines it thusly:

Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity. (“Understanding Web Design” par. XX)


3 thoughts on “Zero to CSSixty: What I've Learned about Web Design

  1. Chris,I posted a comment and lost my connection as I hit “publish.” So I’ll try to reconstruct my message and submit my thoughts to you again.You are so enthusiastic about CSS, and I’m jealous about that because I’ve not yet mastered enough CSS to appreciate it as you do.You’ve done a great job of integrating Meadows’ theories into your narrative and thus reflecting more than just learning CSS.I’m eager to “tour” your redesign tonight in class and hear how you are integrating CSS into the design.

  2. Sounds like an interesting start to your paper, Chris. One thing that caught my eye at the end is the contention that CSS separates style from content. This is an intriguing point from a rhetorical stance. We assume that the web page is a rhetorical artifact. Many would also argue that style and content in a rhetorical work can’t be separated and yet CSS professes to do this thereby potentially setting up a conflict. It might be useful to include some research about the relation between message content and style as viewed in traditional and postmodern rhetoric and then relate this to what CSS claims to do. I would think that it might open up some interesting avenues for discussion of the impact CSS can make. Just a thought.

  3. That’s a great connection, Monica–thanks for pointing it out to me; I’ll definitely see about working that in at some point (although I wonder if that may be better served as a future paper of its own… rhetorical implications of the messy debate).@Carie–I’d hesitate to say that I’ve “mastered” it. Positioning and understanding the flow gives me fits; I’ve got a long way to go for mastery. (Thanks, though, for the vote of confidence.)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s