IAT-235: 08 Responsive Usefulness

IAT-235: 08 Responsive Usefulness — A slide deck

No Quiz Today

For those few who noticed the last slide of my last lecture, do not worry there is no quiz today. There will be a quiz next week though.

IAT-235 — P04: Web

Offline vs Online

How can the combination of offline and online information design help Vancouver residents be more voting aware?

P04 Final

For those who want to attend the Hubbub (Friday, December 1st), we will have presentations available in lecture on November 30th (last class). Otherwise you will present in the labs.

Hubbub plan:
9:00 — Registration
9:30 — Official welcome, presentations and voting
11:15 — Voting period closes, results are tallied
11:30 — Prizes announced!

P04 Teams

You may form new teams for P04 if you would like. Please note that if you are not in lab this week, we will not help you join a team.

Team Contracts

The P04 conflict agreement

  1. Benefit of the doubt: Team member must be given 48 hours to respond via email with reasons for their behaviour. Clearly cite the contract.
  2. Request instructor support: A team member contacts Andrew with details of the problem, and how it has been dealt with thus far. Provide all evidence.
  3. Request for removal: The team contacts Andrew with details of the problem, and depending on the sitation, team member(s) are removed from the team.


Remember that the markup of your content and your styling must remain separated.

Things we should not see:

  • <b>, <i>, <u> elements
  • Using <br> to non-semantically separate things (i.e. to just add spaces)
  • Use of the style attribute in an element (i.e. do not do <p style="">)
Animation illustrating the differences between responsive and adaptive web design
9 Basic Principles of Responsive Web Design

Elements of Responsive Design

The pieces you need:

  • Relative units
  • Fluid grids
  • Media queries

What Are Relative Units?

.column {
width: 0;

Fluid Grids


Item #1
Item #2
Tousled gentrify whatever, art party sustainable.
Animation demonstrating how breakpoints work in web design
9 Basic Principles of Responsive Web Design

Media Queries and Breakpoints

body { margin: 1rem; }
/* If the condition below is met */
@media (min-width: 40em) {
/* We override the original styling */
body { width: 100%; }

Points on Breakpoints

Where and when should our web layout collapse?

  • Let your content decide
  • Use relative units (always)
  • Grids are your bestest friends
  • Avoid an absolute process
Can I Use...


You may...

Skip merrily through the posies*

* Posies not provided.

Why Do Invalid Sites Still Work?

Browsers are kind, benevolent beings

Browsers are more likely to ignore errors then tell you about them. This makes it easier for you to make websites that 'render', but will not work consistently in the future.

Our First Grids

<!-- Insert code here, Andrew covers how to set up your first grid and use flexbox and media queries to make it responsive -->

This week's labs

The low-down

  • CSS Grid tutorial
  • P04 Introduction

Next Week's Lecture...

A quiz and more on 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