Building Responsive Web Apps

Preamble

Session 1.1 

Sites vs. Apps

Native vs. Web

What's wrong with building 5 different apps?

Areas of reconciliation

Limitations

Don't try to make your app something it's not

Session 1.2 

Delivering consistent experiences with RWD

Limitations are great

Bureaucracy is bad

Take the user on the same journey

Not matter what the device

The long page syndrome

You don't need to show it all at once

De-prioritise some content blocks

Display on interaction events

Patterns for responsive apps

Exercise

Session 2.1

Structuring projects to scale

Session 2.2

Meaningful media queries

@media screen and (min-width: 780px) and (max-width: 1049px)

???

Media query mixins

@include mq(from: $fablet, to: $tablet)

Device breakpoints

tablet: (min-width: 780px) and (max-width: 1049px),

tablet-up: (min-width: 780px)

tablet-down: (max-width: 1049px)

@extend

@include on(mobile) {
  .selector {
    @extend .another-selector
  }
}

Warning! You may only @extend selectors within the same directive.

%placeholders

%placeholder {}
@include on(mobile) {
  %placeholder-on-mobile {}
}

@include on(mobile) {
  .selector {
    @extend %placeholder-on-mobile
  } 
}

Mobile first

.selector {
  padding: 12px;
}

@include on(tablet-up) {
  .selector {
    padding: 18px;
  }
}

@include on(desktop-up) {
  .selector {    padding: 24px;
  }
}

Silos

@include on(mobile) {
  .selector {
    padding: 18px;
  }
}

@include on(tablet) {
  .selector {
    padding: 18px;
  }
}

@include on(desktop) {
  .selector {
    padding: 24px;
  }
}

Cake and eat it

// base style.selector {
  color: green;
}
@include on(mobile-tablet) {
  .selector {
    padding: 18px;
  }
}

@include on(desktop-up) {
  .selector {
    padding: 18px;
  }
}

Rule of thumb

Don't overwrite rules

Don't repeat rules

Exercise

Session 2.3

Unpacking the syntax

.thing-to-transform {
  transform: function(value) function2(value);
}

Exercise

Session 2.4

Developing responsive interaction

JavaScript

State

$('.handle').on('click', function() {
  $('.thing').addClass('is-active');
});

Responding to state changes

.thing {
  display: none;
}

.thing.is-active {
  display: block;
}

Transitioning between state changes

.thing {
  transform: translateX(-100%);
  transition: transform 0.3s;
}

.thing.is-active {
  transform: translateX(0);
}

Exercise

Create a responsive interaction