Responsive Design

Goal

By the end of today, you will be able to:

1. write cascading if statements
2. use media queries for responsive design

Getting to know the JS Console

The JS Console is very important:

• It's where error messages are printed
• It's where console.log messages are printed
• It's where you can type in bits of code just to see what they do.

In general, you should always have the JS console open when you are coding JS.

You owe it to yourself to learn the keyboard shortcut for opening the JS console. I do it a zillion times a day, and if I can save myself 5 seconds each time...

Command-option-j on the Macs will do the trick. Do that now, please.

Datatypes Matter

Look at each of the following expressions and guess their value. Write down your predictions. (This is important, so that you will notice if you are wrong.) Then, type or copy/paste the expressions into the JS console and see if you were right.

3 < 11;
"3" < "11";
3 < "11";

Hunh? What does this all mean?

• The first compares two numbers.
• The second compares two strings, which uses a character by character comparison, like "ax" < "cab"
• The third compares a number and a string. What happens then?

The take-home message is that if you are treating things as numbers, make sure they are numbers, not strings.

If statements

We'll return to the last two exercises from last time (the time-based ones).

Cascading IF Statements

We saw this in the reading:

    if (grade >= 90) {
        letterGrade = "A";
    } else if (grade >= 80) {
        letterGrade = "B";
    } else if (grade >= 70) {
        letterGrade = "C";
    } else if (grade >= 60) {
        letterGrade = "D";
    } else {
        letterGrade = "F";
    }

Quiz Question Nr. 1

We all know that a B is a grade between 80 and 90 (at least in this example), but the code above does not check that the grade is less than 90! Is that okay?

1. It's okay, the letterGrade variable gets overwritten by the correct value

2. It's okay, the test comes after the test for A

3. It's okay, the test comes in the else

4. Oops, that's a bug in the code!

Exercise on Page Width

Suppose we want to categorize a screen as "narrow", "medium" or "wide", storing the result in a variable called "screenKind". Imagine we do it this way:

• wide: wider than 960px
• medium: 480-960
• narrow: 0-480

Your code should prompt the user for the screen width. (But, you should know that there is a built-in screen.availWidth global variable that contains this info.)

You might come up with something like this:

var width = parseInt(prompt("Enter screen width in pixels"));
if( width >= 960 ) {
    screenKind = "wide";
} else if( width > 480 ) {
    screenKind = "medium";
} else {
    screenKind = "narrow";
}
  

Is 480 narrow or medium?

Cascaded IF Summary

If you use if-else, you don't have to test for the negation of something.

Don't test for things that you know are true. If you know that a coin flip is not heads, you don't have to test that it's tails.

Even more generally, keep your code as simple as possible. If you're given someone's age, you don't have to test that it's a positive number. Professional code is littered with "sanity checks" like that, but even the pros find that annoying. For us, let's focus on the important conditions.

Responsive Design

Let's refresh some CSS knowledge.

Quiz Question Nr. 2

You're given the following CSS rule:

  div p {
    width: 100%;
    max-width: 500px;
  }

When will the elements p within the div have exactly the width 500px?

1. Always
2. When the parent's width is less than 500px
3. When the parent's width is more than 500px

Quiz Question Nr. 3

How can you read the following CSS rule (called a media query) in English:

@media handheld and (max-width: 600px) {
      /* ... */
}

1. all media elements in a handheld device cannot have a width more than 600px
2. set all media elements in a page to at least 600px of width
3. if the media type is a handheld device and the display's width is greater than 600px do
4. if the media type is a handheld device and the display's width is up to 600px do

Responsive Design Example

You have an opportunity to take a web page with a fixed-width design and convert it to responsive design that changes appearance based on the width of the device. Download this folder that contains the HTML file and three images. Unzip it on your Desktop. Or, get the files one at a time from the directory

Step 1

Change the CSS for the element wrapper to move from fixed-width to fluid width. (Note the margin property with 3 values: top left-and-right bottom.)

#wrapper {
  width: 960px;
  margin: -10px auto 0;
  background-color: #FFEFDF;
}

#wrapper {
  max-width: 960px;
  width: 100%;
  margin: -10px auto 0;
  background-color: #FFEFDF;
}

Ask yourself

What does it mean for the wrapper to have a width of 100%?

Resize the page after this change. What do you see?

Step 2

The banner image is not changing because the image width is also 960px. When the page becomes smaller than the image, a horizontal scrollbar is added. We can force the banner image to change its width with the page by creating a rule to set it to 100%. Do that now and test the result.

Step 3

After the first two steps, the page text flows with the page and the banner image shrinks too when we resize. The biggest problem for the moment is the navbar. Let's look at its code:

nav ul li {
  list-style-type: none;
  display: inline-block;
  text-align: center;
  width: 137px;
  padding: 20px 0;
}
   

Every value in pixels for the width property is a problem for the fluid design, we need to convert it to a % value. How do we do that?

Ask yourself

The value 137px doesn't seem random. Why is every list item of the navbar set to 137px? What is the corresponding in %? Make that change into the code and test the page.

Step 4

The menu items are showing in a horizontal line because of the property display: inline-block;. If you were to delete the word "inline", you'd see them stacking vertically. However, this is not a behavior you want from the beginning. We want this only when the screen is small. In this case we will need a media query rule.

 @media screen and (max-width: 680px){
    nav ul li {
      display: block;
      width: 100%; /* let's fill all available space*/
      padding: 1% 0; /* 1% of width of element*/
      border-bottom: 1px solid white;
    }
  }
  

Add this rule to the page and resize it.

Step 5

We're almost done. If you resize to a small width, you'll see the images sticking out left and right. This can also be fixed with the following media query:

@media screen and (max-width: 480px) {
  #text img {width: 100%};
}
      

Summary

We hope that after these activities you have a good understanding of:

• Using cascading "if" statements, and avoiding unnecessary tests.
• using media queries to create responsive design

Solutions

Will be posted later, visit again after .

        1. C  we don't have to test for the negation because we used ELSE
        2. C  it can be smaller than 500 if the parent is smaller than 500
        3. D  "max" means "it can't be more than, but it can be less"