IAT-339: 05 Devices and Their Fickle Owners

IAT-339: 05 Devices and Their Fickle Owners — A slide deck

Devices and Their Fickle Owners

Lecture outline

Covered this week:

  • Thinking about like users
  • Web design patterns
  • More responsive thinking

Lecture slides will be made available on the day of the lecture.

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.

Devices and Their Fickle Owners

An animated gif illustrating the differences between responsive and adaptive web design
9 Basic Principles of Responsive Web Design

Points on Breakpoints

How to aim for optimal breakpoints?

  • Let your content decide
  • Use relative units (always)
  • Grids are your bestest friends
  • Avoid an absolute process
A photo of a series of devices showing the same web-page
An internet-enabled refrigerator
"Samsungs Smart Fridge is Hacked" via Stuff

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.com).
  • Scripting: Enhancing the experience as much as possible.

Advanced Progressive Enhancement

(aka. Responsive Web Design)

We are taking a device-agnostic approach, as the screen isn't our only variable:

  • Problematic browsers
  • Slow connections
  • Small screens
  • Touch first
  • Content structure
  • ... etc.

Graceful Degredation

Often not that graceful

A common solution to avoiding proper enhancement or degredation on mobile sites.

Degredation vs. Enhancement

Wait, so what's different?

Graceful degredation: Build for the biggest and bestest, making sure that the site is still usable for 'lower-class' browsers.

Progressive enhancement: Build a common standard for all browsers (upper and lower class), then offer additional functionality for browsers which can use it.


Modernizr to the rescue!

Let's take a brief look at Modernizr.

What Should My Site Look Like?

Problem is, there are no hard and fast rules.

Remember, your site should:

  • Clearly indicate interactivity (like a link)
  • Help your user achieve their goals
  • Provide them with the content and tools to achieve their goals


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)


This week's labs

The low-down

  • P02 feedback

P02 Rules Reminder

Just a quick reminder that you are not permitted to work with frameworks until P04.

Next week's lecture


  • Web usability
  • Accessibility

Next week's reading

"Considering Accessibility" and "Disabilities and Impairments" (Chpt 1 & 2) from Accessibility for Everyone (Kalbag, 2017)

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