1. CS/COE 1520 Jarrett Billingsley
Responsive Design
CS/COE 1520
Jarrett Billingsley

2. Today: floats flexboxes responsive design media queries viewports
accessibility
how was the project? ready for another? maybe with JAVASCRIPT?!!?

3. Floats

4. It looks fancy
Blah blah blah! This is a bunch of words. This thing on the right is a living cotton ball.
It upsets me. What is it? Why is it so small? Is it OK? Does it need help?
This text is going to wrap around the sides of the image, and it'll look great.
Now the text goes all the way to the right side. Nice! And the cool thing is, I didn't have to do anything in the HTML. It's all CSS.
Weird Dog #1
common in print-style layouts are floats: objects on one side with text flowing around them.
this looks like crap.
Blah blah blah! This is a bunch of words. This thing on the right is a living cotton ball.
It upsets me. What is it? Why is it so small? Is it OK? Does it need help?
This text is going to wrap around the sides of the image, and it'll look great.
Now the text goes all the way to the right side. Nice! And the cool thing is, I didn't have to do anything in the HTML. It's all CSS.
Weird Dog #1

5. Putting things in their place
the HTML looks like:
<h2>Weird Dog #1</h2>
<img class="floating" src=...>
<p>Blah blah blah! This is a...
note: the float comes before the text that you want to wrap around it.
the CSS looks like:
img.floating { float: right; }
Weird Dog #1
Blah blah blah! This is a bunch of words. This thing on the right is a living cotton ball.
It upsets me. What is it? Why is it so small? Is it OK? Does it need help?
This text is going to wrap around the sides of the image, and it'll look great.
Now the text goes all the way to the right side. Nice! And the cool thing is, I didn't have to do anything in the HTML. It's all CSS.

6. Stop it!! when you float something, the layout can start to get weird.
we need to tell the browser to stop floating things.
here's a useful rule:
div.clearfix { clear: both; }
right before the thing you want to stop floating at, put:
<div class="clearfix"></div>
Weird Dog #1
Blah blah blah! This is a bunch of words. This thing on the right is a living cotton ball.
It upsets me. What is it? Why is it so small? Is it OK? Does it need help?
Weird Dog #2
- in this example, we'd put the clearfix before the second header ("Weird Dog #2").
- that'd force the browser to move below the fluffy dog before continuing layout.
Maybe dogs were a mistake.

7. We all float down here, within reason
you can float anything!
tables!
paragraphs!
entire sections!
but don't use it for laying out pages.
this is how we used to have to lay out responsive pages
and it was awful
instead, we can now use…

8. Flexboxes

9. A side bar with… <aside>
what if we wanted to put the navigation on the left? maybe with some other stuff, like images.
for the page on the right, I might do…
<header></header>
<div>
<aside><nav></nav></aside>
<main></main>
</div>
<footer></footer>
header
navigation
main
footer
this div is here for a reason…

10. 💪🎁
flexboxes can go vertical, too!
for laying out non-print-like pages, flexboxes are a much better alternative to floats.
there are two parts: the container, and the children.
the container can be anything, and decides how its children are laid out.
the children are blocks inside the container.

11. and you can even reorder the children with CSS!
So….. flexible ;)
they have some other cool features
their children can wrap around if there's not enough space, just like text on a page.
and you can even reorder the children with CSS!

12. this can be wrap, nowrap, or wrap-reverse. The default is nowrap.
The CSS for flexboxes
the container can be anything – a <div>, or <main>, or <section>, or whatever! I'd recommend using a class or ID for it though.
on the container, you need the following CSS rules:
display: flex;
flex-flow: row nowrap;
this can be row, row-reverse, column, or column-reverse. The default is row.
this can be wrap, nowrap, or wrap-reverse. The default is nowrap.

13. Aligning, justifying, centering
for row layouts:
justifying means controlling the left-to-right position and spacing of items. it's just like left, center, right, justify on text.
aligning means controlling the up-and-down position of items.
for column layouts, they're swapped.
justifying is up-and-down, aligning is left-to-right.
I defer to the flexbox guide's excellent illustrations for this. ;o

14. The future: grids Header Main Nav Footer Logo
flexboxes are good for now, but…
the next big thing for site layouts will be grids.
they're like… 2D flexboxes.
they're just about fully supported now, so have a look at them.
Logo
Header
Main
Nav
Footer

15. Responsive Design: why?

16. Ye Olde Internette
HTML appeared in 1993 and became popular in the mid-1990s.
at that time, if you wanted to access the internet, you did it with…
a desktop PC!
keyboard + mouse for input
a low-resolution CRT monitor
couldn't do nice graphics
a dial-up modem
no video
a song took minutes to download
even images took a while
it was garbage and terrible

17. AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
Ye Moderne Internette
(yes this is a fridge with the internet)
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

18. Oh no tons of screen sizes and aspect ratios (wide? tall?)
touchscreens, thumb-typing, video game controllers
extremely high resolution displays (4K etc.)
a range of capabilities and browsers
everyone needs to be able to access your site
especially people with disabilities
how do we deal with all this?!?

19. Responsive Design

20. What it is
Responsive Design means designing your page to be flexible: it adjusts its appearance depending on how the user views the page.
a page can look like this on a PC…
like this on a phone…
and like this when you print it out.

21. The three basic techniques
we can use fluid layouts:
to change the size of things based on the size and type of screen.
we can use floats and flexboxes:
to automatically rearrange things for us.
and we can use CSS media queries:
to conditionally enable CSS rules.

22. px in cm mm deg % em rem vw vh
Relative and Absolute
there are two kinds of measurement units in CSS.
absolute units measure things with real-world units.
relative units are based on the size of something else on the page. px in cm mm
deg % em
rem vw vh
percentage of size of enclosing box
Width of a lowercase 'm' in this font
'em' but uses the 'html' tag's font
percentage of viewport's width
percentage of viewport's height

23. Oh yeah, remember box-sizing?
don't forget this wonderful thing:
box-sizing: border-box;
now, the width and height specify the size of the content, padding, and border all put together!
width
height
margin
padding
content
width
height
from now on I'll use this rule:
* { box-sizing: border-box; }

24. The Viewport and Media Queries

25. A tiny slice
on your computer browser, the viewport is the whole browser.
but on a mobile device, the viewport is only what you can see.
you're only looking at a little window into the whole page.

26. Responsive Design Mode
browsers let you simulate viewing your page on a mobile device so that you don't have to upload, load it on your device, etc.
in IE-- stop using IE, seriously
in Chrome, open the inspector, then click this button
in Firefox, Tools > Web Developer > Responsive Design Mode
in Safari, Develop > Enter Responsive Design Mode
in Edge, open the inspector, then go to "Emulation"

27. A new <meta> tag <meta name="viewport"
the viewport meta tag lets you control some things.
<meta name="viewport"
content="width=device-width, initial-scale=1">
the syntax is awkward, but the important stuff is in the content:
width=device-width makes the viewport as wide as the page, instead of starting off looking at a portion.
initial-scale=1 will control how zoomed in is when it loads.
user-scalable=no is another common one: it will make it impossible to zoom.
god that's annoying.

28. @media screen and (orientation: portrait) { html { width: 100vw; } }
Media Queries
a media query is sort of a CSS "if statement."
html { width: 70vw; }
@media screen and (orientation: portrait) {
html { width: 100vw; } }
This can be screen, print, speech, or all.
You can put 0 or more conditions combined with and.
put as many rules inside as you want!

29. Conditions and examples
you can detect the orientation – whether you're holding your phone/tablet right side up or sideways.
@media print and (orientation: landscape)
@media screen and (orientation: portrait)
you can see change things based on the size of the screen.
@media screen and (max-width: 480px)
this means "when it's 480px wide or narrower…"
@media screen and (min-height: 1000px)
this means "when it's 1000px tall or taller
you can test for the resolution, which is how tiny the pixels are:
@media screen and (max-resolution: 72dpi)
@media print and (min-resolution: 300dpi)

30. "Breakpoints"
let's have a look at the Pittsburgh Cultural District page, and resize the browser horizontally.
there are a few sizes where the layout "snaps" into a different form.
we call these breakpoints. they have nothing to do with debugging. :P

31. Putting some things together
think about how flexboxes and media queries might interact…
we could have a horizontal layout…
become vertical…
and even reorder some of the items.