Responsive Usefulness

Responsive Usefulness

Lecture outline

Covered in this lecture:

  1. Responsive vs adaptive design
  2. CSS grids

Full lecture slides will be available the day of the lecture.

P3: HTML/CSS

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.

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

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/934c46233e45d31277ac08e351ed892f

Parent & Child Elements

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/9fadf35fe1d4ec950e5e8bc7730bddd2

Fluid Grids

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/d5b93b07354d645e7c49a8049b411e6f

Animation demonstrating how breakpoints work in web design
9 Basic Principles of Responsive Web Design

Media Queries

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/19fb18931c47e8c5064c9222d6929d02

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

This week's labs

The low-down

  • CSS Layout exercise
  • Introduction to P3 final

Next Week's Lecture...

More on web layout and the quiz.

Quiz

Things to note

  • You will have 30 minutes.
  • You will be completing it on paper.
  • It will be open book, but not open laptop.
  • It will use any of the three readings since the last quiz.
  • There will be 2-4 short answer questions.

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Tuesdays from 2:30-3:20pm and Thursdays from 9:30-10:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna
1/1