IAT-339: 05 Devices and Their Fickle Owners — A slide deck
Devices and Their Fickle Owners
Covered this week:
- Web design patterns
- More responsive thinking
Lecture slides will be made available on the day of the lecture.
- You will have only thirty minutes to complete the quiz. Keep an eye on the time due, as late submissions receive a zero.
- 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.
- 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.
- 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.
- Please answer any questions in full sentences.
The secret password is . You have 30 minutes.
Devices and Their Fickle Owners
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
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.
Often not that graceful
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
- 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
- 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
Next week's reading
"Considering Accessibility" and "Disabilities and Impairments" (Chpt 1 & 2) from Accessibility for Everyone (Kalbag, 2017)
- Office hours — Tuesdays from 3:00-3:50pm and Thursdays from 12:30-1:20pm at the Surrey campus mezzanine.