responsive design with backbone
DESCRIPTION
TRANSCRIPT
![Page 1: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/1.jpg)
Responsive Design with HTML5, CSS3, JavaScript and Backbone.jsMauvis LedfordCTO, Pathbrite
![Page 2: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/2.jpg)
Overview
2 *Stolen from http://www.paulolyslager.com/
*
![Page 3: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/3.jpg)
Overview
3
The Rise of JavaScript Application Frameworks
Ember.js
Backbone.js
![Page 4: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/4.jpg)
Overview
4
Backbone + Responsive Design
![Page 5: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/5.jpg)
Why Responsive Design
5
AudioVroom‘s popularity
![Page 6: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/6.jpg)
Don’t Break the Chain
7
Open-source responsive Backbone app made just for you!
https://github.com/Brainswap/dontbreakme
![Page 7: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/7.jpg)
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
![Page 8: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/8.jpg)
What is Responsive Design?
• Origins: Responsive Architecture
*Image from http://www.archdaily.com/15014/ad-futures-4-sparc/9
![Page 9: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/9.jpg)
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)
![Page 10: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/10.jpg)
Responsive design is
• Your data as water; everyone is holding containers
• Accessibility continued
Let your knowledge shine11
![Page 11: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/11.jpg)
Why Responsive Design
12
New York Times and Craigslist
![Page 12: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/12.jpg)
Why Responsive Design
13
The Boston Globe
http://www.bostonglobe.com/
![Page 13: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/13.jpg)
Why Responsive Design
14
Sasquatch Festival
http://sasquatchfestival.com, snapshots from http://mediaqueri.es
![Page 14: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/14.jpg)
Why Responsive Design
15
AudioVroom
http://audiovroom.com, snapshots from http://mediaqueri.es
![Page 15: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/15.jpg)
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!
![Page 16: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/16.jpg)
Argument against Designing Responsively
17
iPad iPhone
![Page 17: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/17.jpg)
Argument against Designing Responsively
18
iPad iPhone
Is this very different?
![Page 18: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/18.jpg)
The explosion of HTML5
19
Facebook iPad native vs. Facebook iPhone native
![Page 19: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/19.jpg)
The explosion of HTML5
20
Facebook web vs. Facebook native
![Page 20: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/20.jpg)
HTML5 Pushstate
Let your knowledge shine21
Click the link
![Page 21: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/21.jpg)
HTML5 Pushstate
Let your knowledge shine22
Link changes, photo and comment pops up, and I keep my context
![Page 22: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/22.jpg)
HTML5 Pushstate
Let your knowledge shine23
I close the modal, I go back to my context
![Page 23: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/23.jpg)
HTML5 Pushstate
Let your knowledge shine24
Had I copied and pasted the URL…
![Page 24: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/24.jpg)
The explosion of HTML5
25
Pathbrite web vs. Pathbrite native
![Page 25: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/25.jpg)
The explosion of HTML5
26
Pathbrite web vs. Pathbrite native
![Page 26: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/26.jpg)
How do you make pages all bendy and flexy?
Hint: It’s not media queries!
27
![Page 27: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/27.jpg)
Find the layout in pixels
28
![Page 28: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/28.jpg)
The magic equation
29
target / context = result … * 100
260 / 960 = 0.27083333333333
![Page 29: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/29.jpg)
How do you make images bendy and flexy?
30
Many options for making media flex.
![Page 30: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/30.jpg)
So why do I need media queries?
31
http://www.dontbreak.me
Flexible width without media queries.
![Page 31: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/31.jpg)
Media queries
32
Pulled from the Skeleton.css framework.
![Page 32: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/32.jpg)
Magic formula + media queries
33
http://www.dontbreak.me
Media queries get you access adjusting widths
but also ems to control vertical layout.
![Page 33: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/33.jpg)
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:
![Page 34: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/34.jpg)
35
Backbone high level architecture
Backend Server Front-end (Backbone MVC)
compressed js
compressed css
view templates
![Page 35: Responsive Design with Backbone](https://reader035.vdocuments.mx/reader035/viewer/2022062616/54b5140b4a7959202e8b4630/html5/thumbnails/35.jpg)
Resources
BooksResponsive Web Design by Ethan Marcotte
Responsive Web Design with HTML5 and CSS3 by Ben Frain
Github projects: dontbreakmeMandible2NodeInterval
Feedback:[email protected]@krunkosaurus
Let your knowledge shine45