IAT-235: 09 Building Better Tubes

IAT-235: 09 Building Better Tubes — A slide deck

Quiz Rules

  1. You will have only thirty minutes to complete the quiz. Keep an eye on the time due, as late submissions receive a zero.
  2. This quiz is open book, meaning you can draw on online resources as much as you would like. Please remember that if you cannot access a reading because everyone else did so before you, there is nothing we can do. Please refer to your notes.
  3. Any words that are not your own must be cited using a proper format — for example (Author, 2000). Any plagiarism will result in a grade of zero. No exceptions.
  4. Any talking, texting, messaging, paging, or secret-tiny bluetooth resulting in communications with friends or classmates will result in a grade of zero. No exceptions. Facebook can wait.
  5. Please answer any questions in full sentences.

Quiz time

The secret password is . You have 30 minutes.

Building Better Tubes

Web layout

Please close all laptops not in the back row.

IAT-235 — P04: Web

Progressive Enhancement

Build up from the basics

The layering of progressive enhancement

  • Content: Ensuring that the basic content works (clean, semantic, HTML)
  • Styling: Applying styling and testing across devices (caniuse? + CSS)
  • Enhancing: Enhancing the experience as much as possible through use of advanced CSS or Javascript.


If I cannot read it, I will not stay on the website.

Playful text is fun, but please remember that we need to be able to read the words that we are looking at. That means high-contrast and clear type is essential.

Readability of Navigation

Let's take a look at the readability of novel navigation.

Readability of a 'Web-page'

Let's take a look at the readability below the fold of the web-page.

Ad Blindness

If it looks like an ad, I will not see it.

Eye-tracking data demonstrating banner blindnessFrom Banner Blindess Findings (NNGroup)


If it doesn't explain what it does, I fear the result.

Click here

Neilsen vs Norman

Cage match, in the OCTAGON

"Good design means that beauty and usability are in balance. An object that is beautiful to the core is no better than one that is only pretty if they both lack usability"
Emotion and Design: Attractive things work better (Don Norman)


One way to move things on the web

Some options:

  • static — the default, things occur as ordered in the HTML
  • relative — similar to static, but allows for further instructions through 'left', 'right', 'top', 'bottom' to move relative to its parent
  • absolute — positions relative to the viewport through 'left', 'right', 'top', 'bottom'
  • fixed — similar to absolute, but will not scroll (stays in view)


Coding Conventions

When you get started on planning out elements

More things to ensure:

  • Use a purpose-oriented naming convention: .external-link (describe the content)
  • Avoid naming based on style: .blue-border
  • Use understandable names: #footer makes more sense then #lower-bar
  • Agree with your teammate: You need to understand one another

CSS Sampler

nav {}
#nav-main {}
.nav-button {}
.nav-button.is-current {}

ID vs. Class

IDs must always be unique, <section id="kittens"> they can only be specified once. While classes can be used as many times as needed — <section class="group">


The order in which things are read

  1. Inline styles: should never be used
  2. ID's: #home, #cool-stuff
  3. Classes, attributes & pseudo-classes: .home, [class], :hover
CSS specificity as illustrated by Star Wars characters


When we encounter a point where what we expect to happen and what has actually happened don't match; we have encountered a bug. This usually means stepping back through what you did to determine what is not behaving as you expect it to.


I recommend starting with:

  1. What is the code supposed to do? Why?
  2. What did the code do?
  3. If you can solve for the why the code did what it did, you have found your bug.

Debugging Sample #1

I have some weird stuff showing up in my content in the box below.did I expect? What did it do? andwhy?

<div><p>Some content that isn't particularly exciting, but has a problem...</p>/div>

Debugging Sample #2

All the text in the box below should be blue. What did I expect? What did it do? and why?

Some content that isn't particularly exciting, but has a problem...

Debugging Sample #3

There should be a second pink block in the box below. What did I expect? What did it do? and why?

Debugging Sample #4

Both columns in the box below should span 50% of the width of their parent. What did I expect? What did it do? and why?

This column spans 50% of the page.

This column spans 50% of the page.


You may...

Finish up P03? If you haven't yet?

This week's labs

The low-down

  • Tech questions
  • P04 intro

Next week's lecture

I've fallen, and I can't get up!

Next week is support week. In the labs you will be given an opportunity to voice what you would like covered or re-covered. Please ask any and all pending questions on the online quiz available after lecture.

Next week's lecture

Is not optional, it is pivotal

We're covering what you are requesting. Now is a good time to ask about the stuff you see yourself needing to do (within reason).

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