Responsive Design

1. 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 Weird Dog #1 common in print-style layouts are floats: objects on one side with text flowing around them. 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. this looks like crap. 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. 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.

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 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 main navigation this div is here for a reason… footer

10. 💪🎁 • 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. flexboxes can go vertical, too! the children are blocks inside the container.

11. 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. 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 wrap, nowrap, or wrap-reverse. The default is nowrap. this can be row, row-reverse, column, or column-reverse. The default is row.

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 • flexboxes are good for now, but… • the next big thing for site layouts willbe 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 OldeInternette • 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 10-20 minutes to download • even images took a while • it was garbage and terrible

17. Ye ModerneInternette (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. like this on a phone… a page can look like this on a PC… 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. Relative and Absolute • there are two kinds of measurement units in CSS. relative units are based on the size of something else on the page. absolute units measure things with real-world units. 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! margin width padding content width height height from now on I'll use this rule: * { box-sizing: border-box; }

24. The Viewport andMedia 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 • 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 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.