IAT-235: 09 Building Better Tubes — A slide deck
Building Better Tubes
Lecture outline
Covered in this lecture:
- Web layout and navigation
- Web usability concerns
- CSS positioning
PSA

Building Better Tubes
Web layout
Please close all laptops not in the back row.
New Materials Available
The city has provided us with some new materials for the development of your websites, including updated reports (all linked in Canvas):
- An updated EF Tool Report
- A new ecoCity Pilot Report
- The Lighter Footprint Goal Presentation
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.
Readability
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.

Genericism
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)
Positioning
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)
Positioning
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">
Specificity
The order in which things are read
Inline styles: should never be used- ID's: #home, #cool-stuff
- Classes, attributes & pseudo-classes: .home, [class], :hover

Bugs
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.
Debugging
I recommend starting with:
- What is the code supposed to do? Why?
- What did the code do?
- 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?
Debugging Sample #2
All the text in the box below should be blue. What did I expect? What did it do? and why?
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.
Break-time
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 3:00-3:50pm and Thursdays from 12:30-1:20pm at the Surrey campus mezzanine.
- ac.ufs@h_werdna