Module 2: CSS 3 and the Design of Web Style

Purpose

After doing this assignment, you should be able to:

  • Style webpages using valid CSS 3
  • Understand the syntax or rules of CSS 3
  • Understand some of the components of CSS 3 and what they do
  • Understand how to create a CSS stylesheet that interacts with an HTML file
  • Understand how the web design principle of separating content from style is exemplified in the relationship between HTML and CSS
  • Understand how content strategy relates to style

Technologies

On this module, you are encouraged to use any technologies  available to you, including word processors, web browsers, and online applications (e-mail, chat, blogging, productivity, workflow, etc.). We will cover some of these technologies as we go along, but you can use any that you are proficient with or want to experiment with on this module.

You will definitely need access to the following technologies to complete this module:

  1. A working and recently-updated Internet browser (Google Chrome, Firefox, or Safari are recommended)
  2. A word-processing application that allows for the production of CSS documents in web-standard formats (TextWrangler for Mac  or Notepad++ for PC are recommended)
  3. A reliable email client (Outlook, Apple’s Mail, or Gmail are recommended)
  4. A reliable File Transfer Protocol (FTP) client (Cyberduck for Mac, WinSCP for PC, or FileZilla for all platforms, or FireFTP if you use the Firefox browser, are recommended; Fetch is another alternative for Mac which I personally prefer because of how usable it is, and it is available for $29)

Situation

Now that you have some content, and a preliminary strategy of who that content is for, it’s time to think about style, which is the province of CSS and content rules. For the modern web designer, CSS dictates everything visual about a website, basically, from color to font to layout. Content rules, as Watcher-Boettcher defines them, dictate the logical relationships between content. CRAP (content, repetition, alignment, and proximity) are a basic framework for thinking about web style that, when specific content rules are applied, allows one to design a website that meets a particular audience’s expectations.

Your assignment in this module is to style some content in a way that you think will meet the expectations of a particular user group.

Your first task toward doing so, as I mention below, is to think about the content rules you want to apply to your developing website, and how these rules can help you meet the expectations of a particular audience.

Deliverables You Must Produce for this Project

The following must be posted to Blackboard by the following date / time:

  • Homework #2 – 5/28/14 by Midnight ET
  • Cover Letter, a link to your webpages, and a draft content strategy guide – 6/2/14 by Midnight ET

The following must be posted to this course website by the following date / time:

  • A link to your webpages and a draft of content rules – 6/2/14 by Midnight ET
  • An answer to my design question (see below) on the posts of each of your peers – 6/3/14 by Midnight ET

Audiences

The primary audience for your module is myself, an experienced web and UX designer who will assess your webpages for their style in relationship to an audience (see the grading criteria for this module). Potential users of the website you will build around this page are an important audience to consider as well, however.

To Complete This Project (Workflow)

1) 5/28/14 by Midnight Eastern Time >>

Do Homework #2

2) 5/29/14-6/2/14 >>

Content rules, as defined by Wachter-Boettcher, are logical propositions for the relationships between chunks of content on a website.

Come up with some content rules for your developing website:

  1. Chunks: what are the blocks or sections of your of your website (e.g. header, footer, sidebar, main content section, blog, etc.).
  2. Relationships: what will demarcate these sections from one another (think CRAP)? How will these relationships change on different devices (mobile vs. hand-held vs. desktop) or via different media (e.g. social media vs. a more static website vs. a blog?)
  3. Priority: what needs to be the first thing people see? What is worth scrolling down for or looking at additional pages for?
  4. Meaning: what is the central meaning that a specific user group is looking for? How is that meaning being portrayed in a way that is appropriate for that user group?

(via Wachter-Boettcher pp. 88-92)

If you are struggling to come up with answers to the above:

  1. Find examples of the website you want to build and reverse engineer some of their content rules. How are they structuring content that’s particularly effective?
  2. Talk to random people you know (the less they know about web design the better) about what they’d expect from the type of website you’re building.

Start styling your webpages in ways that satisfy your content rules:

Using the Murach book, style two webpages (either the ones you made from Module #1 or some new ones), using ONE stylesheet.

OPTIONAL: can’t your mind up between two very different styles? Create two stylesheets and ask your peers which one they like better.

(see especially Chapters 4-6 of Murach)

The workflow for creating a stylesheet and linking it to an HTML file is as follows:

  1. Create a stylesheet with selectors that match any of the components of an HTML page (for a semi-complete list of potential selectors, see Chapters 4 and 5 of Murach).
  2. In the head section of your HTML page that you’re styling, code a link element: <link rel="stylesheet" href="styles/nameofstylesheet.css">
  3. FTP your CSS file to the same directory (again, see Technologies above) in the sub-domain I’ve created for you (e.g. if you just FTP to the sub-domain, it will place files in the main folder).
  4. Once you’ve successfully FTPed your CSS file, go to the address http://yourfirstname.guiseppegetto.com/name.html and your content should appear as styled.

Revise all your documents and hand them in:

  • Cover Letter, a link to your two (or more) webpages, and a copy of your draft content rules are due to Blackboard by Midnight ET
  • Links to your webpages and a copy of your draft content rules are due to this course website by Midnight ET

3) 5/27/13 by Midnight ET >>

Post an answer to the following design question as a comment on the posts of each person’s webpage on this course website.

Each module, I will ask you a design question, which you must post a response to as a comment on the posts of each of your peers. Your design question for this module is the following:

  • Looking at the way this author styled his or her webpages, as well as his/her initial content rules: who do you think the users are of the website they are starting to build? And more importantly: does this initial style seem appropriate for these users? Why or why not?

Grading Criteria

Can be found here: grading criteria for this module