IAT-235: 07 how u rd thgs

IAT-235: 07 how u rd thgs — A slide deck

P02 Due

Please submit before your lab time:

  • 1 finalized sitemap (PDF)
  • 1 final set of wireframes (generated to HTML, ZIP'd up)
IAT-235 — P02: Rubric

how u rd?

Content and the web

Lab Files

help you remember what 'went down' last week, we have prepped packages for you to review on thecourse websiteon 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.

P03/04 Breakdown

A week-to-week overview:

  • Oct 19:
    CSS Basics
    P03 Intro + HTML pages
  • Oct 26:
    CSS Grids
    P03 CSS
    P04 Intro
  • Nov 2:
    CSS Positioning
    P04 Crits
  • Nov 9:
    Tech support week
    P04 Troubleshooting
  • Nov 16:
    Coding Quiz
    P04 Critiques
  • Nov 23:
    P04 Final crits
  • Nov 30:
    Final Presentations (in lecture/labs)

P03/P04 Notes

Some things to note about P03/04:

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

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)

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. Images, text, icons, info-graphics, 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

Let's imagine I've specified that p tags should have a size of 2rem, while p tags in section tags should have a size of 0.8em. Here's what it looks like:

Here is our 2rem-sized type.

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> with an inline tag.

The Box Model

content-box vs border-box

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.

Our First Stylesheet

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

Validate, validate, validate, validate, validate, validate...

Validate * (infinity + beyond)

Just like we can validate our HTML, we can also validate our CSS.

This week's labs

The low-down

  • P02 speed-dating
  • CSS tutorial
  • P03 introduction

Next week's lecture

Responsive Usefulness (Web layout)

  • Reading Quiz #2
  • Thinking about web layout

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Tuesdays from 9-10am and Thursdays from 9-10am at the Surrey campus mezzanine.
  • ac.ufs@h.werdna