Alfredo 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 10).

In preparation for lecture...

Please close up any laptops, cellphones, Commodore 64's, Commodore 64's and other 'beep-boop' devices.

Points on breakpoints

How to aim for optimal breakpoints?

• Let your content decide
• Use relative units (always)
• Avoid an absolute process

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

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

Sizing images

When sizing images, consider the maximum pixel dimension the image would be displayed at and the possible pixel density of the device.

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 original position
• 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

Today's code tutorial

Please download:

• The positioning starter kit from short.alfredosherman.com/339-t04
• The responsive images starter kit from short.alfredosherman.com/339-t05

Labs critique sign-up (remote this week!)

Please refer to the announcement from Matthew regarding the critique process in the labs this week.

Activities during critiques

Code review tools:

1. P2 check-in. (Upload P2 to your file space)
2. P2 teamwork reflection (Print-outs available with me!)
3. Positioning exercise
4. Reading reflection #2 (Optional, print-outs also available with me!)

Before you go!

One member of each team, please check-in with me to change your team's name on Canvas.

If no time left, please reach out to your TAs during critique.