Intro to Responsive Web Design

Updated 5/30/2015

Oh hai!

Instructor: Cecy Correa, @cecycorrea

Contact: cecy@girldevelopit.com

Intros!

A litle bit about yourself and what you hope to get out of this class.

Rules

• Don't be afraid to ask questions
• Help each other out
• Have fun!

WAT?

What is responsive design?

What is mobile-first?

Definition

WAT?

The content adapts

"Fluid layouts"

Responsive design has 3 components

We'll talk about these in more detail later!

So, then... what is mobile first?

There are a lot of things you can't control

• What device do the users have?
• What if Javascript doesn't load?
• What if CSS doesn't load?
• What if there is a slow connection?

Facebook without Javascript & CSS is hardly usable.

Mobile-first is:

• Mobile-first means designing for the lowest-common denominator.
• Not just mobile, but designing for devices that may not be able to access CSS or JS.
• It means designing in a way that will make your content as accessible as possible for all of your users.

This will make more sense later, I promise!

Rethinking the mobile web

Presentation by Bryan Rieger (2010)

cecy.co/1rhaFDi

Slide 56

Let's review!

Responsive design

Techniques that include fluid layouts, flexible images and media queries.

Mobile first!

An approach that takes into consideration the lowest-common denominator.

It's asking yourself as a designer: "What is the most important thing users need to do on this site?" and making that as accessible as possible.

Responsive design is a way to achieve mobile-first.

Remember!

Slide 79

Enough mumbo jumbo!

Let's learn how to responsive web design!

Fluid grid

Fluid grid

• Define container widths as % not px
• This percentage will represent the width of the containing element, which means it will reflow according to viewport widths.

Fluid grid

Formula: Target / Context

Wherein...

• Target is the div you want to find the % of
• Context is parent div
• Result is width as %

Fluid grid

Fluid grid

Target = 640, context is 960

What will the percentage be?

Answer: 66.666666666667%

Fluid grid

Let's turn the rest into %

Fluid grid

Let's turn the rest into %

Fluid grid

Fluid grid

*Round up to 4% to make it fit

Fluid grid

How do we turn the Context into a %?

Fluid grid exercise

Go here:

cecy.co/rwd-fluid-grids

• (Create a Codepen account if you don't have one)
• Fork it!
• Watch me demo
• Then you can try!

Flexible media

Flexible media

Videos, images, etc.

The secret again is using %

Flexible media

Secret sauce:

img { max-width: 100%; }

Flexible media

Let's add images to our practice site!

img src="http://placekitten.com/700/200" alt="kitten"

Flexible media

Now, let's add...

img { max-width: 100%; }

What if we want to make it smaller?

Flexible media

Add a class to it!

.cat { width: 50%; }

Develop it!

Add 3 cat images to your site, make them sit side by side using %

Media queries!

Allow you check for capabilities of a device, like:

• Width
• Height
• Orientation
• Resolution
• ...and more!

Media queries!

@media all

Applies to all media types: screen, print, tv...

Media queries!

@media screen

The one you want to use! Browsers and mobile devices are in this category. Excludes print, etc.

Media queries!

@media print

For printers

Media queries!

@media handheld

For "handheld" devices. Not widely supported right now.

Media queries!

@media screen and (resolution: #dpi)

For high resolution devices, like retina displays. You can use this to display higher res images to higher res devices.

So many!

@media all and (orientation: landscape)

@media all and (orientation: portrait)

There's even...

@media 3d-glasses

If you Google...

You may see...

@media only screen ...

"Only" is used so older browsers ignore the code.

If you Google...

This will only work in devices:

@media screen and (min-device-width)

This will work in your browser:

@media screen and (min-width)

Develop it!

Add a media query to your site: make the background red at 600px.

@media screen and (min-width: 600px) { body {background: red;} }

Fluid typography

Fluid typography

Not px but ems

Fluid typography

16px is default for browsers.

Target / 16px = em

Let's figure out our ems on our practice site!

End of day 1!