how u rd thgs

how u rd thgs

Lecture outline

Covered in this lecture:

  1. Web content and structure
  2. Styling and types of content considerations
  3. CSS fundamentals

Full lecture slides will be available the day of the lecture.

P2 Due

Please submit before your lab time:

  • 1 finalized sitemap (PDF)
  • 1 final set of wireframes (URL or generated to HTML, ZIP'd up)

how u rd?

Content and the web

Lab Files

To help you remember what 'went down' last week, we have prepped packages for you to review on the course website and on Canvas.

P3/4 Breakdown

A week-to-week overview:

  • Feb 27:
    CSS Basics
    P3 CSS Exercise
  • Mar 5:
    CSS Layout
    P3 Layout Exercise
    P4 Intro
  • Mar 12:
    CSS Positioning
    P3 Due
    P4 Crits
  • Mar 19:
    Tech support week
    P4 Troubleshooting
  • Mar 26:
    Coding Quiz
  • Apr 2
    Tech support/additional critique week
  • Apr 9
    P4 Presentations

P3/P4 Notes

Some things to note about P3/P4:

  • There is a portion of your grade for coding.
  • All HTML/CSS code must be your own (no frameworks allowed)

User Expectations

What they have experienced before

"Users spend most of their time on other websites"
Jakob's Law of the Web User Experience
The Craigslist website landing page
Why do you go to this site?

How Users Use

Our approaches to web content

A study by Nielson demonstrated that there were some key divisions in how users looked for website content:

  • Search dominant
  • Navigation dominant
  • Tool dominant

Giving the Right Content

What to deliver

  1. Should answer the query
  2. Should answer it clearly
  3. Should support it (and us)

IA and Content

How to deliver

  1. Should answer the query ... Organising content or objects.
  2. Should answer it clearly ... Describing them clearly.
  3. Should support it (and us) ... Providing ways for people to get them.

How Users View

Our approaches to web-reading

What does it appear the user is doing?

The Inverted Pyramid

The one not built by the Egyptians

We tend to scan digital content, so support us in doing so.

  1. Essential information: What the user needs to know yesterday
  2. Important information: Other important information the user might need
  3. Further details: More meat (or tofu) if the user is interested

Why are they here?

Why do they exist?

Web users are fickle characters. You have: 10 seconds to keep the user's attention, and 1 second to keep their flow of thought uninterrupted.

Multiple Modalities

Be context-aware

All your content should reinforce your information or message, be it images, text, icons, interactions, etc.

Technical Accessibility

In this week's reading, Cederholm talks about where using advanced CSS is risky business: Where and why should we be careful about applying 'new-fangled' CSS?


Keep it so

Make sure that we can still access the content in a semantically appropriate fashion. For example, text should remain text, even when placed on images:

Oops, this code did not quite load. Please view it at

Human Engines

Where SEO is headed

More and more, search engines are using more 'human' models of building connections and modelling potential queries and responses.

  1. Follow web standards
  2. Make content accessible
  3. Have valid code
  4. Have good content
  5. Rich media + metadata

Lessons From Last Week

There were a couple of common HTML issues that I thought it best to discuss as a class:

  • <button> vs <a>
  • An <img> with no caption
  • Spaces in files/folders/ID names
  • Using <br> appropriately

<button> vs <a>

The <a> element is meant for linking to different portions of a page, other pages, or other websites.

The <button> element is meant for on-page, typically JavaScript enabled interactions.

<img> With No Caption

If you have no caption, for an image, just use the <img> element on its own. For example:

<img src="kitten.jpg" alt="A photo of a sad looking kitten">

Spaces in Files/Folders/ID Names

Instead of spaces, use dashes '-', underscores '_' or camel case 'camelCase' when naming files, folders or IDs.

<a href="#this is not understood"> — will not be understood as an ID.

<a href="#this-is-understood">will be understood as an ID.

<a href="#thisIsUnderstood">will be understood as an ID.

When is using <br> okay?

The <br> element defines a line break in text. This only really makes semantic sense in a few occasions. Some examples:

  • In an address:
    352 Main Street<br>
    Vancouver, BC<br>
    V2V 2V2
  • In a poem:
    Another night deprived of slumber<br>
    Hours passing without number<br>
    My eyes trace round the room I lay...

Do not use <br> to 'add space' between elements.

Let's Talk CSS

Oops, this code did not quite load. Please view it at

Block, Inline, and Inline-block

Block elements break to the next line, can have a height and width, and by default are full-width.

Block One
Second Block

Inline elements stay in-line with other inline elements, and listen to their content for their sizing.

Inline One
Second Block

Inline-block elemetns stay in-line with other inline elements, can have a height and width, and listen to their content for their sizing.

Inline-block One
Second Inline-block

The Box Model

content-box vs border-box

Oops, this code did not quite load. Please view it at


Rems — root-ems — are units responsive to the font-size set by the browser which help us establish easy relationships in type. As a general rule of thumb, setting your paragraphs to 1rem and scaling other things accordingly is better practice.

Oops, this code did not quite load. Please view it at

Please Prepare

In preparation for this week's code tutorial, please open up your laptops and download the starter files for the tutorial from


Please convene in room 3130 at the beginning of your labs.

This week's labs

The low-down

  • P2 speed-dating
  • P3 exercise

Next week's lecture

Responsive Usefulness (Web layout)

Building Better Project Briefs

Introduction by Betty Ackah

As part of this research we are hoping to have you complete a seven-question survey on your understanding of the current brief (P2: Wireframes):

  • An additional +1 point on the final grade of P2 for completing the survey. 
  • Andrew will not be permitted to know what your specific comments were.
  • Deadline for completion is midnight on Wednesday, March 4th.

Survey is available at