ah teaches information design: 08 Responsive Usefulness

ah teaches information design: 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, but not open laptop meaning you can draw on your notes as much as you like.
  3. Any words that are not your own must be cited using a proper format — for example (Author) or (Reading about ___). 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.
  5. Please answer any questions in full sentences.

Quiz time

You have 30 minutes.

IAT-235 — P4: Web

P4 Teams

You may form new teams for P4 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 P4 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.

Any questions?

HTML vs CSS

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

  • No <b>, <i>, <u> elements
  • No using <br> to non-semantically separate things (i.e. to just add spaces)
  • No 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

Relative Units

.column {
width: 0;
}

Fluid Grids

Flexbox

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 { margin: 3rem; }
}

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

Break-time

You may...

Skip merrily through the posies*

* Posies not provided.

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 Layout tutorial
  • P3/P4 Introduction

Next Week's Lecture...

More on web layout.

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Wednesdays from 11:00-11:50am and Fridays from 8:30-9:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna
1/1