October 11, 2022: CSS - Responding to Screen Size

Agenda

  • Check-in, Discussion
  • Coding Tips
  • Lecture/Demo: Responding to screen sizes
  • Discussing Harmonic Collections & Pair Debugging
  • Next Week

Check-in / Discussion Topics

Feel free to add below!
  • Who uploaded their work? Did you share the link yet? Does it feel different now that it’s online?
  • Is technology better alone?
  • Is socializing better offline?

Coding Tips

I’ve noticed some things that could help you work faster…

Commenting

You can comment out” code to make the computer ignore it, without deleting the code. This can help you debug quickly, or see how something is working.

The keyboard shortcut for commenting and un-commenting is ⌘ + /

Comments in HTML start with <!-- and end with -->.
<!-- This is a comment -->
<h1>This is an h1</h1>

Comments in CSS start with /* and end with */
.box {
  background: green;
  /* background: blue; */
}

Saving

The keyboard shortcut for saving is ⌘ + s

Lecture/Demo: Responding to Screen Sizes

One of the most challenging things about making a website is designing for different screen sizes. How does the website look on a big screen? A small screen? How does it look when you flip your phone sideways? Is it different on a touch screen vs. a non-touch screen? How does it look when you try to print the website out? For just one website, there are so many ways another person might encounter or experience it, so we should be mindful of that.

On top of that, our relationship to technology changes quickly. Ten years ago, no one really surfed the web on their phone, so websites were designed first for desktop computer screens. Today, in my day-to-day work, we often design websites for the phone screen first, because we imagine them clicking the link on Instagram and then using the website in their mobile browser.

We say that a website is responsive when it adapts to different screen sizes or devices. You can see how different websites deal with this by just resizing your window.

Examples on the Web

Try resizing your browser window and seeing how the layout changes.
  • https://loadmo.re — A curated aggregation of websites designed for phones and small screens.