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

Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling— across a wide range of devices (from desktop computer monitors to mobile phones).

WAT?

The content adapts

"Fluid layouts"

Responsive design has 3 components

  1. Fluid grids
  2. Flexible media
  3. CSS media queries

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!

The absence of support for @media queries is in fact the first @media query.

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!