Responsive Design

for beginners

Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it.

Why?

More Systems

Break points

@media



<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>
@media screen and (min-width: 700px) and (orientation: landscape) { ... }

@media features

color

how many bits of color. 0 is black and white. 

aspect-ratio

aspect ratio of the viewport

device-aspect-ratio

aspect ratio of the device itself

orientation

checks if width is bigger than height

resolution

pixel density of the device

@media types

all

everything

print

paged and print preview

screen

color screens

speech

speech synthesizers

safest to use: "print" and "screen"


/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

How bootstrap does it

Images

example

img {
    width: 100%;
    height: auto;
}

The simple way

img {
  width: 500px;
}
@media (max-width: 500px) {
  img {
    width: 250px;
  }
}

@media queries


<article>
    <img srcset="large.jpg 1400w, medium.jpg 700w, small.jpg 400w"
         sizes="(min-width: 700px) 700px, 100vw"
         alt="A woman reading">
</article>

srcset and sizes

Grid

Why Use Grid

Visually appealing

Reduces need to make design decisions

Easily create visual hierarchies

Reduces layout work

How to Use Grid

Use it EVERYWHERE*

Plan it out first, set up your rows

Don't leave items dangling

Make your own grid

... or not

Using Bootstrap

Bootstrap Grid

<div class="container-fluid">
   <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
  </div>
</div>

Use .container

Wrap around a new .row each time

Add up your columns to 12

Visibility Helpers

Jquery Rescon


$(document).ready(function(){
    // Regular methods of doing it. Considering .rescon is the container for your columns
      $(".rescon").rescon();

    // You can programmatically reset the plugin
    $('#reset').on('click', function(){
        $(".rescon").rescon({ action : "reset"});
    })

    // And run it back again. 
    $('#run').on('click', function(){
      $(".rescon").rescon({ action : "run"});
    })

    // Add custom sizes
    $(".rescon").rescon( { 
        sizes : { "xs" : 0, "sm" : 300, "md" : 600, "lg" : 1000 }
    });

})

Considerations

How is Search Engine Optimization?

Does it work with small devices?

Will I get long load times when I don't need everything?

Am I compromising features?

Is there an alternative?

Hands on

Responsive Design | and introduction

By Caner Uguz

Responsive Design | and introduction

Understanding what responsive design is and how to make it work in a website using bootstrap.

  • 620