IAT-235: 08 Responsive Usefulness

IAT-235: 08 Responsive Usefulness — A slide deck

Responsive Usefulness

Lecture outline

Covered in this lecture:

  1. Reading Quiz #2
  2. Responsive vs adaptive design
  3. CSS grids

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.


This week only

Need a bit of assistance with HTML/CSS and getting that website up and running?

This coming Wednesday on March 7th from 12:30 - 2:30, We will be hosting a session covering the HTML/CSS and help you get started with the wonderful world of website building. Drop by and learn all about how to start a website from scratch, from the ideation stage, to layout, syntax, grid-structure, tags and CSS!

Date: Wednesday, March 7th

Time: 12:30-2:30pm

Place: SUR 3050

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 March 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: 3rem; }
/* If the condition below is met */
@media (min-width: 40em) {
/* We override the original styling */
body { margin: 1rem; }

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

More on web layout.

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