ah teaches web design and development: 05 Devices and Their Fickle Owners — A slide deck
Devices and Their Fickle Owners
Covered this week:
- The quiz
- 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, but not open laptop meaning you can use your notes as much as you want, but no mobile or laptop devices are permitted.
- Any words that are not your own must be cited — for example (Author, 2000). Any plagiarism will result in a grade of zero.
- 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.
- Please answer any questions in full sentences.
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)
- 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.
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.
What Should My Site Look Like?
There are no hard and fast rules, but there are patterns.
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
Internal vs. external
Internal consistency is consistency between the elements within your own site, while external consistency is consistency between the elements of your site with other websites.
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)
- sticky — fixed within container, relative otherwise
See you in X minutes, and may I recommend the following article: Mobile Usability for Cats (Nielsen).
This week's labs
P02 feedback and check-in.
P2 Rules Reminder
Just a quick reminder that you are not permitted to work with frameworks until P3.
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 — Wednesdays from 11:00-11:50am and Fridays from 8:30-9:20am at the Surrey campus mezzanine.