ah teaches web design & development (Devices and their Fickle Owners lecture)
Devices and their Fickle Owners
Lecture outline
Thinking about how users use websites, and more options for laying out your site. Lecture slides will be made available on the day of the lecture (Oct 13).
PSA
SIAT grad student is looking for participants for a study that explores cybersickness in Virtual Reality.
One of the most prevalent side effects of VR is cybersickness, a psychophysiological response akin to traditional motion sickness that occurs when immersed in virtual environments. The goal of this project is to develop a benchmark simulation that is effective in reliably inducing cybersickness in participants, that does not get people severely sick. In this study, participants will undergo a sickness-inducing virtual environment, with four conditions: once without any countermeasures and three sickness reduction techniques. The overarching goal of this study is to observe users' onset and development of cybersickness.
Criteria: We are inviting people who are at least 14 years old, have no physical or cognitive disabilities, have no vestibular disorders that cause prolonged episodes of dizziness and/or vertigo to participate in this study.
Compensation: This study is worth 1.5 course credits, please check with your instructor if your course is eligible for SONA credits.
Location: SFU Surrey Campus, Room 3800.
Additional Information and Timeslots: Available on SONA (linked)
Please contact rose_rouhani@sfu.ca for more information.
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
"You can play Doom Eternal on a Fridge" (ExtremeTech)
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.
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?
Consider the 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
Consistency
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.
Responsive images
Thinking about when and how to use responsive images includes a variety of factors:
- User's resolution or screen sizes
- Dimensions of the image
- Breakpoints
Positioning
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)
- sticky — fixed within container, relative otherwise