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

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

Floats

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

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.

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.

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…

Flexboxes

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…

💪🎁 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.

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!

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.

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

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

Responsive Design: why?

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 10-20 minutes to download even images took a while it was garbage and terrible

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

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?!?

Responsive Design

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.

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.

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

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; }

The Viewport and Media Queries

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.

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"

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.

@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!

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)

"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

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.