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
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
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
36.
37.
38.
39.
40.
41.
42.
43.
44.
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