1. CS 0134 (term 2181) Jarrett Billingsley
Responsive Design
CS 0134 (term 2181)
Jarrett Billingsley

2. Class announcements
Uhh, nothing really!
11/20/2017
CS term 2181

3. The problem
11/20/2017
CS term 2181

4. 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
11/20/2017
CS term 2181

5. AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
Ye Moderne Internette
(yes this is a fridge with the internet)
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
11/20/2017
CS term 2181

6. 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?!?
11/20/2017
CS term 2181

7. Responsive Design
11/20/2017
CS term 2181

8. 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.
11/20/2017
CS term 2181

9. The three basic techniques
We can make fluid layouts: layouts where things change size based on the size and type of screen.
We can use flexboxes to automatically rearrange things for us.
And we can use CSS media queries to turn on and off CSS rules.
11/20/2017
CS term 2181

10. 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 browser's width
percentage of browser's height
11/20/2017
CS term 2181

11. Specifying sizes box-sizing: border-box; padding content margin
Remember the box model parts?
In CSS, when you specify width and height, it specifies the size of the content box.
But there's an alternate mode:
box-sizing: border-box;
Now, the width and height specify the size of the content, padding, and border all put together!
This is usually more convenient.
width
height
margin
padding
content
width
height
11/20/2017
CS term 2181

12. A flexbox refresher
Remember that flexboxes have two parts: container and children.
They can go vertical or horizontal.
But they have some other cool features…
Their children can wrap around if there's not enough space.
You can even reorder the children with CSS!
11/20/2017
CS term 2181

13. The Viewport and Media Queries
11/20/2017
CS term 2181

14. 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 – there's more page there, but it's off the screen!
You're only looking at a little window into the whole page.
11/20/2017
CS term 2181

15. 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 will be 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.
11/20/2017
CS term 2181

16. 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"
11/20/2017
CS term 2181

17. @media screen and (orientation: portrait) { html { width: 100vw; } }
Media Queries
A media query is a special CSS structure used to turn on and off CSS rules. It appears alongside rules did.
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!
11/20/2017
CS term 2181

18. 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)
11/20/2017
CS term 2181

19. Lab tiiiime
11/20/2017
CS term 2181