Responsive Design with HTML5, CSS3, JavaScript and Backbone.jsMauvis LedfordCTO, Pathbrite

Overview

2 *Stolen from http://www.paulolyslager.com/

*

Overview

3

The Rise of JavaScript Application Frameworks

Ember.js

Backbone.js

Overview

4

Backbone + Responsive Design

Why Responsive Design

5

AudioVroom‘s popularity

Don’t Break the Chain

7

Open-source responsive Backbone app made just for you!

https://github.com/Brainswap/dontbreakme

What is Responsive Design?

• A flexible grid

• Flexible media (images, videos)

• Media queries

• Avoid declaring non-percentage widths

Actually…

Responsive Design is a mindset not a technology or methodology

Let your knowledge shine8

What is Responsive Design?

• Origins: Responsive Architecture

*Image from http://www.archdaily.com/15014/ad-futures-4-sparc/9

What is Responsive Design?

10

Don't get set into one form, adapt it and build your own, and let it grow, be like water […] You put water into a bottle it becomes the bottle; You put it in a teapot it becomes the teapot. Now water can flow or it can crash. Be water, my friend.

Bruce LeeA Warrior's Journey (2000)

Responsive design is

• Your data as water; everyone is holding containers

• Accessibility continued

Let your knowledge shine11

Why Responsive Design

12

New York Times and Craigslist

Why Responsive Design

13

The Boston Globe

http://www.bostonglobe.com/

Why Responsive Design

14

Sasquatch Festival

http://sasquatchfestival.com, snapshots from http://mediaqueri.es

Why Responsive Design

15

AudioVroom

http://audiovroom.com, snapshots from http://mediaqueri.es

Argument against Designing Responsively

16

Responsive design just doesn’t work. … We’re looking at the ‘entrenched’ use case [for desktop users], the coffee-and-couch use case [for tablet users], the two-minute use case [for mobile phone users].

Kiran PrasadDirector of Engineering, Mobile

LinkedIn95% Web view!

Argument against Designing Responsively

17

iPad iPhone

Argument against Designing Responsively

18

iPad iPhone

Is this very different?

The explosion of HTML5

19

Facebook iPad native vs. Facebook iPhone native

The explosion of HTML5

20

Facebook web vs. Facebook native

HTML5 Pushstate

Let your knowledge shine21

Click the link

HTML5 Pushstate

Let your knowledge shine22

Link changes, photo and comment pops up, and I keep my context

HTML5 Pushstate

Let your knowledge shine23

I close the modal, I go back to my context

HTML5 Pushstate

Let your knowledge shine24

Had I copied and pasted the URL…

The explosion of HTML5

25

Pathbrite web vs. Pathbrite native

The explosion of HTML5

26

Pathbrite web vs. Pathbrite native

How do you make pages all bendy and flexy?

Hint: It’s not media queries!

27

Find the layout in pixels

28

The magic equation

29

target / context = result … * 100

260 / 960 = 0.27083333333333

How do you make images bendy and flexy?

30

Many options for making media flex.

So why do I need media queries?

31

http://www.dontbreak.me

Flexible width without media queries.

Media queries

32

Pulled from the Skeleton.css framework.

Magic formula + media queries

33

http://www.dontbreak.me

Media queries get you access adjusting widths

but also ems to control vertical layout.

Now that you know RD, let’s dive into some Responsive Backbone!

34

http://www.dontbreak.me

• Views

• Models

• Collections

• Routes

• *Templates

First a quick primer. Backbone consists of:

35

Backbone high level architecture

Backend Server Front-end (Backbone MVC)

compressed js

compressed css

view templates

Resources

BooksResponsive Web Design by Ethan Marcotte

Responsive Web Design with HTML5 and CSS3 by Ben Frain

Github projects: dontbreakmeMandible2NodeInterval

Feedback:mauvis@pathbrite.com@krunkosaurus

Let your knowledge shine45