Building Better Tubes

Lecture outline

Covered in this lecture:

1. Web layout and navigation
2. Web usability concerns
3. 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"

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

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

1. Inline styles: should never be used
2. ID's: #home, #cool-stuff
3. 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:

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?

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?

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