1. Responsive Design with HTML5, CSS3,
JavaScript and Backbone.js
Mauvis Ledford
CTO, Pathbrite

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

3. Overview
The Rise of JavaScript Application Frameworks
Ember.js
Backbone.js
3

4. Overview
Backbone + Responsive Design
4

5. Why Responsive Design
AudioVroom‘spopularity
5

7. Don’t Break the Chain
Open-source responsive Backbone app made just for you!
https://github.com/Brainswap/dontbreakme
7

8. 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
8 Let your knowledge shine

9. What is Responsive Design?
• Origins: Responsive Architecture
9 *Image from http://www.archdaily.com/15014/ad-futures-4-sparc/

10. What is Responsive Design?
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 Lee
A Warrior's Journey (2000)
10

11. Responsive design is
• Your data as water; everyone is
holding containers
• Accessibility continued
11 Let your knowledge shine

12. Why Responsive Design
New York Times and Craigslist
12

13. Why Responsive Design
The Boston Globe
13 http://www.bostonglobe.com/

14. Why Responsive Design
Sasquatch Festival
http://sasquatchfestival.com, snapshots from http://mediaqueri.es
14

15. Why Responsive Design
AudioVroom
http://audiovroom.com, snapshots from http://mediaqueri.es
15

16. Argument against Designing Responsively
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 Prasad
Director of Engineering, Mobile
95% Web view! LinkedIn
16

17. Argument against Designing Responsively
iPad iPhone
17

18. Argument against Designing Responsively
iPad iPhone
Is this very different?
18

19. The explosion of HTML5
Facebook iPad native vs. Facebook iPhone native
19

20. The explosion of HTML5
Facebook web vs. Facebook native
20

21. HTML5 Pushstate
Click the link
21 Let your knowledge shine

22. HTML5 Pushstate
Link changes, photo and comment pops up, and I keep my context
22 Let your knowledge shine

23. HTML5 Pushstate
I close the modal, I go back to my context
23 Let your knowledge shine

24. HTML5 Pushstate
Had I copied and pasted the URL…
24 Let your knowledge shine

25. The explosion of HTML5
Pathbrite web vs. Pathbrite native
25

26. The explosion of HTML5
Pathbrite web vs. Pathbrite native
26

27. How do you make pages all bendy and flexy?
Hint: It’s not media queries!
27

28. Find the layout in pixels
28

29. The magic equation
target / context = result … * 100
260 / 960 = 0.27083333333333
29

30. How do you make images bendy and flexy?
Many options for making media flex.
30

31. So why do I need media queries?
Flexible width without media queries.
31 http://www.dontbreak.me

32. Media queries
Pulled from the Skeleton.css framework.
32

33. Magic formula + media queries
Media queries get you access adjusting widths
but also ems to control vertical layout.
33 http://www.dontbreak.me

34. Now that you know RD, let’s dive into some
Responsive Backbone!
First a quick primer. Backbone consists of:
• Views
• Models
• Collections
• Routes
• *Templates
34 http://www.dontbreak.me

35. Backbone high level architecture
Backend Server Front-end (Backbone MVC)
Only API calls live here. Light-weight front end. Most all
of it can live on the CDN. (Fast
and Cheap!)
compressed js
compressed css
view templates
35

45. Resources
Books
Responsive Web Design by Ethan
Marcotte
Responsive Web Design with HTML5
and CSS3 by Ben Frain
Github projects:
dontbreakme
Mandible2
NodeInterval
Feedback:
mauvis@pathbrite.com
@krunkosaurus
45 Let your knowledge shine