# Week 5: Mobile First Responsive

Agenda

Week 5 Tutorial Files (opens new window)
meta tags
float and clear
height vs line-height
Mobile First
Responsive Design
media Queries
Responsive Images
Backgrounds with CSS

# Meta Tags and Meta Data

The <meta> tags go in the head of every webpage.
We use them for setting the character encoding and viewport settings, as well as connecting to other related files.
Here are some common ones:

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self' data: gap: ws: https://ssl.gstatic.com; 
    style-src 'self' https://fonts.googleapis.com; 
    font-src 'self' data: https://fonts.gstatic.com;
    media-src *; 
    img-src 'self' data: content:;"
/>

<meta name="robots" content="noindex" />
<meta name="geo.position" content="45.5678;-75.4321" />
<meta name="geo.placename" content="Ottawa" />
<meta name="description" content="Website about how to design webpages" />
<meta name="keywords" content="HTML,CSS,JavaScript" />
<meta name="author" content="https://twitter.com/prof3ssorSt3v3" />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

TIP

Always include the meta tags for charset, viewport, and content-security-policy.

# CSS Float and Clear

CSS float property
CSS clear property

In the early days of CSS, float and clear were used to create columns and layout. Now that task falls to display flex and grid and we are back to using float for its original purpose - to make text wrap around images.

We can tell an image to float to the left or right side of its container. After doing this the image will no longer be trapped inside a single line of text. The text will wrap around the image.

It works by ignoring the height of the image. The background and border of the element will only consider the non-floated content when determining the height of the container.

# Height and line-height

There are two CSS properties that have to do with content height. One is called height and the other is line-height.

Height talks refers to the vertical size of a block element.

Line-height refers to the amount of space given to each line of text inside an element.

A paragraph could have a height of 300px and a line-height of 30px. The browser would create a 300px tall space to hold the paragraph and then start to add the lines of text. Each line would be 30px tall, regardless of the font-size. If the font-size was 12px then there would be 18px of space around the letters in each line. If the font-size was 40px then the text on each line would be overlapping the text on the next line.

If there were more than 10 lines of text then the content would spill out of the container. If there were fewer than 10 lines of text then there would be an empty space at the bottom of the paragraph.

# Mobile First Responsive Design

The term responsive design was coined by Ethan Marcotte back in 2010 (opens new window) to describe the process of writing CSS styles which can change depending on the size and type of browser being used to view the webpage.

The term Mobile First was coined in 2012 by Luke Wroblewski as a best practice to designing all websites so that the default styles are aimed at mobile browsers as well as older browsers which don't support the latest CSS capabilities like @media.

The reason for the mobile first approach is that a single column layout designed for a small mobile screen is still usable on a large screen, however, a 3 or 4 column layout designed for a large monitor would become almost useless on a small mobile screen.

Adaptive design is similar to responsive design. It will have a series of width ranges. There will be a breakpoint between each of these ranges. There will be a specific layout designed for each of the width ranges.

# Media Queries

Media Queries are a way for us to add extra instructions for the browser into our CSS so that additional styles get applied when special conditions are met. For example, change the size of the fonts in the headings and navigation if the width of the browser is less than 700px, OR change the number of columns from three to two if the aspect ratio of the screen changes to more vertical than horizontal.

IMPORTANT

When writing your CSS you should put your defaults at the top of the file so those styles apply to all devices.

These defaults should be for MOBILE sized screens.

This way, older mobile devices that don't understand the @media rules, will still display the default values that are optimized for mobile small screens.

The @media styles will overwrite the defaults depending on the various properties of the device.

@media (min-width: 600px) {
  p {
    /* this style applies to paragraphs if the device screen is over 600px wide */
  }
}

1
2
3
4
5

# Multiple Conditions

We can also chain multiple conditions together for our media queries.

@media screen and (min-width: 1000px) and (min-aspect-ratio: 5/2) {
  h1 {
    /* new h1 styles to override the defaults */
  }
}

1
2
3
4
5

We would put and between each of the conditions to make sure that all the tests are passed before the nested CSS gets applied. The first value in this test, screen, has to do with a media type. The most common terms we could use for the type are the terms all, screen, or print.

# Responsive Images

Set image widths with percentages to allow them to resize with their parent elements
Do NOT set heights on images because this will ruin their aspect ratio

img,
video {
  width: 100%;
  height: auto;
}

1
2
3
4
5

# Picture Element

picture elements allow us to set different image sources based on device properties
picture elements use an img element as a fallback.
MDN picture element ref (opens new window)
The img element will be used as the container to render the picture.
Multiple source elements are used to load different versions of the picture.
Each source element gets a media attribute which defines the parameters for loading the image.

<picture>
  <source srcset="hugePic.jpg" media="(min-width: 1200px)" />
  <source
    srcset="normalPic.jpg"
    media="(min-width: 800px) and (max-width: 1200px)"
  />
  <source srcset="smallPic.jpg" media="(max-width: 800px)" />
  <img src="default.jpg" alt="image description" />
</picture>

1
2
3
4
5
6
7
8
9

# Backgrounds

With <img> and <picture> elements we are creating actual content for the website. With CSS we can decorate our site. We can set the background colour or put an image or pattern in behind the content.

There are lots of properties related to background images. Most of the time you will just specify the background-image, background-repeat, and background-position.

background-color: hsl(220, 50%, 50%);

background-image: url("../img/mybackground.jpg");
background-repeat: no-repeat;
background-size: cover;
background-clip: padding-box;
background-origin: border-box;
background-position: left top;

1
2
3
4
5
6
7
8

The background-size property lets us doo some useful scaling of the background image while maintaining the proper aspect ratio.

# To Do Before Week 6

Self-Directed To Do

Watch the following videos before week 6:

Complete Week 5: Responsive Design with Float

← Week 4: Design Foundations Week 6: Flexbox →