teaching machines

CS 347: Lecture 10 – Responsive Web Design

September 24, 2020 by Chris Johnson. Filed under fall-2020, lectures, webdev.

Dear students:

The technologist’s temptation is to ignore the differences in people and machines. We developers lump people together in a big homogeneous bucket, assuming everyone thinks like us, functions like us, and has a machine like ours. Supporting diversity is hard work; ignoring it is easier. If you have a soul, you will accept this hard work as the only way to keep bias out of your computational creations.

In this lecture, we explore some ways to make our web sites navigable on a broader spectrum of devices, from desktops to mobiles to everything in between.

Here’s your TODO list:

• Watch Responsive Web Design, in which we discuss the differences between large displays and small displays.
• Watch Meta Viewport, in which we see how to make our site not appear zoomed out on mobile devices.
• Watch Media Query, in which we introduce the conditional statement of CSS.
• Watch Navlinks on Desktop, in which we configure a nav bar for large displays.
• Watch Navlinks on Mobile, in which we apply a media query to make our nav bar usable on mobile.
• Watch Haiku, in which we take a poetic aside.
• Watch Haiku, in which we take another poetic aside.
• Read chapter 1 of Eloquent JavaScript.
• Be prepared for a peer review on Thursday. Plan on sharing a first draft of your layout, using placeholder text and images as necessary.
• Post any questions and comments you have regarding the videos and readings on the course Slack.

See you next time.

Sincerely,