Introduction to Responsive Web Design – What's the difference? – Why is this important?

View Github Repository Open presentation in a new window

TownHack

See all presentation from TownHack

Introduction to Responsive Web Design – What's the difference? – Why is this important?

0 0

rwd-101

WorkShop: Intro to Responsive Web Design

On Github TownHack / rwd-101

Introduction to Responsive Web Design

Presented by David Myers and Zackary Lowery at Town Hack Columbus 2014

This presentation is available online at https://townhack.github.io/rwd-101/#/

Our Audience

Developers Who...

  • ...are new to responsive web design
  • ...no longer want to build separate websites for different devices or screen sizes
  • ...want to learn better practices

Wait... Responsive what?

Responsive Web Design: The practice of designing flexible layouts that are adaptable to any device, any viewport, or even to any environment.

* This example will only work in the Firefox Web Browser

- What is Responsive Web Design? - Not about designing for mobile - Not even about designing for desktops - It's about a better practice; taking dynamic to the next level

What's the difference?

Fixed

Live Demo

Fluid

Live Demo

Adaptive

Live Demo

Responsive

Live Demo

Why is this important?

There are too many devices and screen sizes to predict every possible outcome

- Websites are meant to be dynamic

Some Statistics

What does this mean?

Desktop no longer dominates the realm of web browsers

- Something needs to change - We can't keep trying to develop for each possible outcome independently

So, how do you do it?

CSS Media Queries!

- Ask if anyone knows how it is done

Media Queries allow you to test the device for certain properties...

  • Viewport/Device Width & Height
  • Viewport/Device Orientation
  • Light Levels
  • & More!

...and use the results to help change the layout or style with CSS.

Simple Example

body {
  background-color: #ddd;
}

@media all and (min-width: 50rem) {
  body {
    background-color: #444;
  }
}

Screens less than 50rem wide will have a light background.

Screens 50rem or wider will have a dark background.

Let's take a look!

How to use Media Queries

Inside a CSS file or Style block

@media all and (min-width: 50rem) {
  body {
    background-color: #444;
  }
}

Inside the link tag

<link media="all and (min-width: 50rem)" href="large.css" rel="stylesheet">

In combination with the @import statement

@import url('large.css') all and (min-width: 50rem);

Don't forget the Meta!

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Let's Do It!

Questions?

More Examples

References