Responsive Design

class: middle, center

# Responsive Design

---

# First, What's .eight[Screen Resolution]?

---

# First, What's .eight[Screen Resolution]?

- Fixed dimension of pixels, or dots of color, for a screen.
- Measured in .eight[width] by .eight[height], like 1920x1200
- Aspect ratio is the relationship between width and height, like 16:9
- "Retina" displays screw this up...

---
class: middle, center

# .fourteen[Experiment]

## Let's list all the screen resolutions of all the devices in the room.

---
class: middle, center

# .eight[So which should we build for?]

---
count: false
class: middle, center

# .eight[So which should we build for?]

## All of them.

---

# Attempt #1: CSS 2.1

Ye olde sylesheets allowed a .eight[media] type:

```html
<link rel="stylesheet" type="text/css" href="main.css"
  media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"
  media="print" />
```

---

# Attempt #1: CSS 2.1

- Browser only requests the relevant stylesheet
- Less work for the browser
- More work for you

.fourteen[Verdict:] Helpful in some situations, not a fix for all our screens.

---

# Attempt #2: User Agent Queries

- User Agent: software acting on behalf of a user (e.g. web browser or email client)
- Server configuration that responds differently for each request
- "Desktop Site" or "Mobile Site"
- Double the work!
- Less consistent user experience

.fourteen[Verdict:] Don't bother.

---

# Attempt #3: Relative Units Only

- Percent all the things!
- Creates fluid-ish layout
- One size never fits all

.fourteen[Verdict:] There's still a better way...

---
count: false

# Attempt #3: Relative Units Only

- Percent all the things!
- Creates fluid-ish layout
- One size never fits all

.fourteen[Verdict:] There's still a better way...

PS - If you still haven't read [this article on Values and Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units), you need to.

---

# Attempt #4: CSS3 Media Queries

Welcome to the world of tomorrow!

```css
@media <condition> {
  /* If condition is true, apply these rulesets */
  ...
}
```

.fourteen[Verdict:] We've got a winner!

---

# Example Condition

```css
@media screen and (max-width: 480px) {
  p {
    color: red;
  }
}
```

If the device has a screen and it's width is not more than 480px, then all paragraphs will be red;

---
class: middle, center

# .eight[Breakpoint]

## The point at which a media query is or isn't applied.

---
class: middle, center

# There's a Lot of Conditions

## [MDN: Using media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax)

---

# .eleven[Beware!]

Don't mix Attempts #2 and #4

```css
@media <some phone size> {
  /* All phone styles... */
}
@media <some desktop size> {
  /* All desktop styles... */
}
```

---

# Most Effective Method:

Build .eight[mobile-first] and .eight[progressively enhance] the design.

- Pick the smallest size that the *content* allows.
- Once styled, resize larger until you *want/need* to tweak something.
- Sprinkle in targeted media queries for that *exact* piece of content.

Basically, listen to the needs of your content.

---
class: middle, center

From [Two CSS Tricks That’ll Make Your Site Fully Responsive](https://medium.com/@mchisti/two-css-tricks-thatll-make-your-site-fully-responsive-5f9efba4015e)

---

# Be Fluid!

.eight[Responsive] vs. .eight[Adaptive]:

From [CSS Tricks: The Difference Between Responsive and Adaptive Design](https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/)

---

# Some Example Layouts

I don't know which article came first, so here's both...

- [LukeW: Multi-Device Layout Patterns](https://www.lukew.com/ff/entry.asp?1514)
- [Google Web Fundamentals: Responsive Web Design Patterns](https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns)

---

# Some More Patterns

## [Brad Frost's *This is Responsive*](https://bradfrost.github.io/this-is-responsive/)

---

# More Resources:

The Original: [Responsive Web Design](https://alistapart.com/article/responsive-web-design/) by Ethan Marcotte

- [CSS-Tricks: Media Queries for Standard Devices](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/)
- [Froont: Nine Principles of Responsive Design](https://blog.froont.com/9-basic-principles-of-responsive-web-design/)