Visible to members of this folder

Rutgers Design 2B: W5

Media queries and JavaScript introduction.

Responsive Design Introduction

Unlike print, digital design is experienced on a variety of formats (for example, phones, tablets, a variable browser window), so as designer’s we need to create a system that works on many different formats. As developers, we need to keep this in mind for the same reasons.

If you’d like to follow along, create an index.html and main.css file, or copy and paste the following:

<!DOCTYPE html>

<html>

<head>

<title>Media Queries and JS</title>

<link rel="stylesheet" type="text/css" href="assets/main.css">

</head>

<body>

<div class="container">

<div class="item">

Hello!

</div>

</body>

</html>

Media Queries

Media queries are a CSS technique that allow you to target specific capabilities of a device. It uses the @media rule to define how the CSS will change only if that condition is true.

/* If the browser window is smaller than 500px, the background color will change to lightblue: */

@media (max-width: 500px) {

body {

background-color: lightblue;

}

Media queries can be used to target vertical rules as well:

/* If the browser window is shorter than 650px, the background will turn orange */

@media (max-height: 650px) {

body {

background-color: orange;

}

Specifying a max-width or max-height in a media query is often used when you write CSS for your website viewed on desktop, but if you want it to look different at a smaller, or larger, breakpoint. It’s also helpful in fine-tuning some of your design elements on a variety of sizes.

Mobile First Media Queries

Instead of defining your media queries using max-width you can also take a mobile first approach where you define your media queries using min-width

/* The body's background is set to blue by default, but when the browser's width is at least 500 pixels wide, the background is set to red. */

.

body {

background-color: blue;

}

@media (min-width: 500px) {

body {

background-color: red;

}

The points at which media queries take affect are also known as breakpoints.

For example, the breakpoints in Bootstrap’s default grid are as follows:

< 768 px Phones

≥ 768px Tablets

≥ 992px Medium desktops

≥ 1200px Large desktops

/* The body's font-size is smaller by default */

body {

font-size: 16px;

}

/* Tablet breakpoint */

@media (min-width: 768px) {

body {

font-size: 50px;

}

/* Desktop breakpoint */

@media (min-width: 992px) {

body {

font-size: 60px;

}

/* Wide screen breakpoint */

@media (min-width: 1200px) {

body {

font-size: 70px;

}

Resources

http://bradfrost.github.io/this-is-responsive/patterns.html

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

https://mediaqueri.es/

Responsive Typography with Viewport Units

CSS also has viewport units which are increments that are dependent on the size of the browser window, or viewport.

The units are:

vw – percentage of the viewport width

vh – percentage of the viewport height

vmin – a percentage of the viewport width or height, whichever is smaller

vmax – a percentage of the viewport width or height, whichever is larger

.item {

font-size: 10vw;

}

The best way to figure this out is to experiment. Here is some more information about using this feature:

https://css-tricks.com/fun-viewport-units/

Intro to Javascript

Javascript (JS) is a programming language that runs inside the internet browser. It was created in 1995.

Originally, it was used for front-end interaction. Now it’s also used for back-end. In general, you can use it to program the behavior of a webpage.

Before we can do anything fun with JavaScript, it’s important to understand the basics.

Console

The web console is a tool where you can write commands on a server directly into a webpage. In other words, it’s an easy way to test out javascript commands and see if they’re working.

To open it up, go to a website hold down command, option and J (⌥+⌘+J) or go to View / Developer / Javascript Console.

This is how it should look:

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_7CF83757331EBE50FE8CE8D3F2C3AB9E3598DF02F99C8AC4AB133784B3E9A068_1550708698514_Screen+Shot+2019-02-20+at+7.24.47+PM.png

The javascript console is text only, and you can use it to communicate with the website using lines of codes.

Try saying “Hello” to the browser and see if it says anything back.

👎

Unless you’re using the correct syntax, you’ll likely see an error. Try this instead:

alert("Hello Friend!")

Now that you’ve made friends with your browser, you might be wondering what’s going on.

You’ve done 4 things:

You called up the function, alert

alert(“Hello Friend!”)

You utilized basic syntax, by starting with parentheses

alert(“Hello Friend!”)

You typed a parameter

alert(“Hello Friend!”)

You utilized basic syntax, by ending with parentheses

alert(“Hello Friend!”)

Parameters

You may be wondering what a parameter is. Parameters are what functions (such as the alert function) reference to know what to work on. Parameters can be a variety of different things. In our example, “Hello Friend” was the parameter, which is a string.

Data Types

Strings

JavaScript strings are used for storing and manipulating text. A string can be any character, and it’s held inside double "" or single quotes ''. It doesn’t matter which you use, but it’s best to pick one and stick with it.

When you defined the "Hello Friend!" string, you used double quotes and you typed 13 characters (spaces and exclamation points are all characters).

Examples:

"Wassup Rutgers"

"Javascript is fun!"

Since the string uses quotes at the beginning at the end, you have to be careful when you use quotes within the string. To avoid the problem, use \ the backslash character. See below:

"She said, \"Hello!\" to the duck"

Numbers

To use numbers, simply type them in without the quotes. Try this, you’ll get whatever number you type in back to you.

console.log(5)

Here are some examples of numbers:

100

31.5

Booleans

Booleans can only be one of two values: true or false. Sometimes you’ll need this to check if something using this same principle. For example, check if a div has a certain class.

Options:

true

false

Operators

Operators are used to perform arithmetic operations with Javascript. When you record these in the console, you’ll receive an answer back.

Try this out:

console.log(9+5 * 3)

In this example:

you’re using the + and * operators.

the mathematical order is respected. first 5 * 3 is calculated, then 9+15 (remember PEMDAS from high school? parentheses, exponents, multiply, divide, add, subtract)

the spaces around the * symbol don’t affect the output. They’re just there to help other people read the code, and as you recall, aiming for lean, readable code is always our goal.

Examples:

10 + 100 (110)

7 * 7 (49)

3 * 1 + 2 (5)

4 > 3 (true)

4 > 3 * 3 (false)

10 <= 10 (false)

false+false (0)

false+true(1)

true+true(2)

Place this in the head of your HTML document, after the CSS stylesheet.

<script type="text/javascript" src="INSERT PATH TO YOUR JS FILE HERE"></script>

Create a javascript file. Open up a blank sublime text document and save it as “main.js” then link to its location in the above path.

You can try something simple in your js document to see if it worked:

console.log("hello!");

that’s enough of an intro for today! Please review these notes for next week.

Additional Resources

https://javascript.info/

https://www.w3schools.com/js/default.asp

https://jgthms.com/javascript-in-14-minutes/

Activity – Inspiration Diary

Let’s put JavaScript on hold for now, we’ll pick it up next week. For now, let’s have fun and review the skills we’ve learned so far.

Step 1

Take a look at your inspiration diary (your Are.na account). Working with a partner, take a few minutes to review each other’s feeds so far. Here are some questions to help you get started. In this week’s g-doc, please answer these questions:

What are you seeing?

Are there any similarities between the photos in terms of content?

Are there any similarities between the photos formally, such as in color, or scale, crop, etc?

Are there any outliers within the feed?

What kind of feeling does the overall feed showcase?

Are there any things about the author that stand out in this collection?

Step 2

After your partner has analyzed your feed, pick one of your photos to work with. Create a website that depicts something about the photograph (or any are.na block), without using the asset itself. Review our notes from last week and consider how you can highlight the most interesting pieces about the photograph without showing it in it’s entirety.

Requirements:

Use HTML and CSS

Use at least one CSS animation in a meaningful way

The composition must change in some capacity at at least one different screensize

Name your composition something specific, rather than “Inspiration Diary”

Post your exercise on your class homepage

As you’re working, I’m going to meet with you about your Maxims project. We’re going to work on this activity until the last half hour or so of class, at which point we’ll take a look at them on the big screen! This is also a good time to ask any questions about HTML and CSS.

Interesting reference for abstracted websites