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 (June 7).

An Apple smartwatch being used to view a website

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?

Media Queries
A 'smart' refrigerator displaying a series of applications it can run from web browsing, to music player, to video games

"You can play Doom Eternal on a Fridge" (ExtremeTech)

Opera Mini Tips

Progressive enhancement

Build up from the basics

The layering of progressive enhancement:

Advanced progressive enhancement

(aka. Responsive Web Design)

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

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:

The Starbucks website landing page from 2005
The Starbucks website landing page from today
The TikTok homepage

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:

Positioning

One way to move things on the web

Some options:

Positioning
P2: Company

Next week's lecture

Usefulness

More depth on accessibility and usability online. Recorded lectures and slides will typically become available within a couple days.

1/1