ah teaches information design: 09 Building Better Tubes

ah teaches information design: 09 Building Better Tubes — A slide deck

Building Better Tubes

Lecture outline

Covered in this lecture:

  1. Web layout and navigation
  2. Web usability concerns
  3. CSS positioning

Building Better Tubes

Web layout

Please close all laptops not in the back row.

IAT-235 — P4: 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.

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 original position
  • absolute — positions relative to the last positioned parent through 'left', 'right', 'top', 'bottom'
  • fixed — positions relative to browser window and 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. What did I expect? What did it do? and why?

Some content that isn't particularly exciting, but has a problem.../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.


Bonus Office Hours

Since we have lost a couple weeks this term, I am offering some final bonus office hours for those who would like some additional project assistance. Please note that these office hours are by email appointment only:

  • Thursday, November 22nd; 12:30-1:30pm (on Burnaby)
  • Monday, November 26th; 8:30-9:30am
  • Tuesday, November 27th; 11-12pm
  • Friday, November 30th; 12:30-1:30pm

Change in Office Hours

Please note that Friday, November 23rd's office hours are cancelled. Should you need to meet to make-up for that availability, please send me an email to arrange a time that works for you.

Next week's lecture

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

Next week is support week. For the lecture 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

You choose!

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