ah teaches information design: 07 how u rd thgs

ah teaches information design: 07 how u rd thgs — A slide deck

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

P2 Due

Please submit before your lab time:

  • 1 finalized sitemap (PDF)
  • 1 final set of wireframes (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.

<!-- Here we are placing an image file using the <img> element, note how the file is referenced (no http://) and the use of the alt attribute to describe the image. -->
<img src="Lectures/07-how_u_rd_thgs/dog.jpg" alt="A corgy wearing a bird mask">

Bring Code from Lecture

As much as possible, please bring your code from lecture to the labs.

P3/4 Breakdown

A week-to-week overview:

  • Oct 29:
    CSS Basics
    P3 CSS Exercise
  • Nov 5:
    CSS Layout
    P3 Layout Exercise
    P4 Intro
  • Nov 19:
    CSS Positioning
    P3 Due
    P4 Crits
  • Nov 26:
    Tech support week
    P4 Troubleshooting
  • Dec 3:
    Coding Quiz
    P4 Presentations

P3/P4 Notes

Some things to note about P3/4:

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

Supporting Users

Remember 'responsiveness'

Research from Google shows that 90 percent of people start a task using one device, then pick it up later on another device...
Windows on the Web (Karen McGrane)

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 Reddit 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)

Information Architecture (IA) is...

(From Week 3)

  1. Organising content or objects.
  2. Describing them clearly.
  3. Providing ways for people to get them.

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:

This is still accessible text.

Users and IA

Remember its importance

IA helps by offering:

  • Meaningful relationships between pages
  • Consistency in the structures
  • Logical uses of terminology
  • Clear paths for guiding users in deeper

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

Let's Talk CSS

selector { property: value; }

Ems and Rems

Ems and Rems are units responsive to font size, and should be used to help establish a hierarchical relationship of type. As a general rule of thumb, setting your paragraphs to 1rem and scaling other things accordingly is better practice.


50 pixel font

1.2em font
1.2em font
1.2em font
1.2em font

Rems (root-em)

50 pixel font

1.2rem font
1.2rem font
1.2rem font
1.2rem font

Block vs Inline

An overview

Block level elements (i.e. div, p, ul...) form a new block of content on a new line, and have a definable size.

Some content in a <div>.

Inline level elements (i.e. em, strong, span...) do not form new blocks of content, but instead work on the same line and their size is set by their content.

Some content in this <div> - which are block-level - but with an inline tag inside.

The Box Model

content-box vs border-box

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.


You may...

Nap. It's midterm time. We're all pooped.

Office Hours Adjustment

Please note that my Wednesday, October 31st office hours are cancelled. Please email me directly if you need a make-up meeting time.

Our First Stylesheet

<!-- Insert code here, Andrew covers folder setup, linking our css, selector { property: value }, :hover, parent and child, different units, classes -->


Please convene in room 3100 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)

  • Reading Quiz #2
  • Thinking about web layout