Emily Kauffman

Back to teaching

CIS 275 Lecture 23: Responsive Web Design, continued

Goals

  1. Review previous class's exercises
  2. Learn flexible images
  3. Learn how to use media queries
  4. Homework #6
  5. Next class

Review of Flexible Grid exercises

Class intro and review of previous exercises. I recommend you follow along and make sure you understand flexible grids before moving on.

Flexible Images and Media

We are now experts at flexible layouts and converting mockups with pixels to flexible units. Now we want to focus on making our images be flexible.

Media Queries

Our layouts are flexible, our images are scaling... but when you get to a really small screen, the content doesn't always look like it should. This is where media queries are useful. We might want things to display different on different screen sizes and resolutions.

Explanation

Practical Example

GitHub Link

Lecture Exercises:

Due: Thursday, 9:00 AM, April 30

Through this exercise, you'll develop the ability to test your understandings of Responsive Web Design (RWD). Specifically, you should implement fluid layouts, flexible images, and media queries. To successfully complete this task, you should be able to exhibit mastery of the objectives from Exercises 1-5, and you should also:

  1. Understand the elements that constitute RWD and how to employ them
  2. Demonstrate basic abilities with flexbox
  3. Generate carefully edited HTML and CSS with absolutely no errors
  4. Target your designs on multiple platforms and browsers

Here's what you should do: Generate two files - one HTML file and corresponding external stylesheet for controlling layout and appearance.

You should make sure your work includes:

  1. All styling for appearance and layout on multiple devices and browsers
  2. Appropriate comments for all your code
  3. The traditional lorem ipsum filler text
  4. A navigation area with three options using flexbox
  5. At least one image embedded in the content of the page

This represents the minimum you should do to successfully complete the exercise. You should feel free to go further – such practice will only improve your skills. In the end your browser might display something like this:

a wide screen shot of example exercise 6
A wide screen shot of exercise 6
a medium size screen shot of example exercise 6
A medium size screen shot of exercise 6
a mobile screen shot of example exercise 6
A mobile screen shot of exercise 6
gif of a responsive website changing widths
Responsive website in action

Next Class

Next class, we're going to be doing more work with responsive web design.

On the 30th, we're going to do a partner usability study on each others websites. We are going to use our 9:00-10:45 AM class time to do this. This means that you'll be logging on during our normal class time. If this is a problem, please let me know immediately so we can come up with an alternative. Decide on your partner and one of you should email me (or message me on Teams) you and your partner's name by the end of the day, Sunday, April 26th. If you do not have a partner, let me know as soon as you can and I'll pair you with someone.