Notes for Fixed to Fluid to Responsive

By Scott Granneman & Jans Carton

Find the presentation at http://www.granneman.com/presentations/

## Slide 5

https://en.wikipedia.org/wiki/File:Grid2aib.svg

## Slide 6

https://en.wikipedia.org/wiki/File:Grid2aib.svg, modified to remove the white lines

## Slide 10

https://en.wikipedia.org/wiki/Rule_of_thirds

## Slide 11

Image aligned according to Rule of Thirds

https://en.wikipedia.org/wiki/File:Rivertree_thirds_md.gif

## Slide 12

Image aligned according to Rule of Thirds

https://en.wikipedia.org/wiki/File:Rivertree_thirds_md.gif

## Slide 13

Image cropped without & with the Rule of Thirds

https://en.wikipedia.org/wiki/File:RuleOfThirds-SideBySide.gif

## Slide 14

Image cropped without & with the Rule of Thirds

https://en.wikipedia.org/wiki/File:RuleOfThirds-SideBySide.gif

## Slide 16

https://en.wikipedia.org/wiki/Software_framework

## Slide 20

http://960.gs

## Slide 23

http://unsemantic.com

## Slide 26

http://foundation.zurb.com

## Slide 28

https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)

## Slide 29

http://thebootstrap.info

## Slide 30

Bootstrap 3 was released in July 2013

## Slide 31

http://getbootstrap.com

## Slide 32

https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)

## Slide 34

http://getskeleton.com

https://github.com/dhg/Skeleton#browser-support

## Slide 38

http://getskeleton.com

## Slide 39

https://picturepan2.github.io/spectre/

## Slide 42

http://en.wikipedia.org

## Slide 43

http://en.wikipedia.org

## Slide 44

http://en.wikipedia.org

## Slide 45

http://en.wikipedia.org

## Slide 46

6 margins: 3 left, 3 right

## Slide 51

6 margins: 3 left & 3 right

## Slide 61

https://www.youtube.com/watch?v=-3gw1XddJuc

## Slide 64

http://codepen.io/websanity/pen/toiHp

## Slide 66

http://alistapart.com/article/responsive-web-design

## Slide 67

Emphasis added

https://en.wikipedia.org/wiki/Responsive_web_design

## Slide 68

http://www.stlzoo.org

## Slide 69

The Saint Louis Zoo, before becoming responsive

## Slide 70

The Saint Louis Zoo, after becoming responsive

## Slide 80

http://codepen.io/websanity/pen/toiHp

## Slide 81

http://codepen.io/websanity/pen/toiHp

## Slide 82

http://codepen.io/websanity/pen/toiHp

## Slide 83

http://codepen.io/websanity/pen/toiHp

## Slide 84

http://codepen.io/websanity/pen/toiHp

## Slide 88

Fontbonne University