Responsive Design with Backbone
Download as pptx, pdf11 likes6,088 views
This document provides an overview of responsive design using HTML5, CSS3, JavaScript, and the Backbone.js framework. It discusses the rise of JavaScript frameworks like Backbone and how Backbone can be used for responsive design. It then explains the concepts of responsive design, including flexible grids, media queries, and avoiding fixed widths. It also discusses using HTML5 features like pushState to support responsive design goals. Finally, it gives a high-level overview of how to structure a Backbone application to support responsive design.
![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](https://image.slidesharecdn.com/html5pres20123-120521172105-phpapp01/85/Responsive-Design-with-Backbone-10-320.jpg)
![Argument against Designing Responsively
Responsive design
just doesnt work.
Were 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](https://image.slidesharecdn.com/html5pres20123-120521172105-phpapp01/85/Responsive-Design-with-Backbone-16-320.jpg)
Responsive Design with Backbone
- 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
- 7. Dont 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 doesnt work. Were 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: Its 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, lets 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
Editor's Notes
- #10: Ethan Marcott