Responsive Design with Backbone


Published on

Published in: Technology, Design
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Ethan Marcott
  • Responsive Design with Backbone

    1. Responsive Design with HTML5, CSS3,JavaScript and Backbone.jsMauvis LedfordCTO, Pathbrite
    2. Overview *2 *Stolen from
    3. OverviewThe Rise of JavaScript Application Frameworks Ember.js Backbone.js3
    4. OverviewBackbone + Responsive Design4
    5. Why Responsive DesignAudioVroom‘spopularity5
    6. Don’t Break the ChainOpen-source responsive Backbone app made just for you!
    7. 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 methodology8 Let your knowledge shine
    8. What is Responsive Design?• Origins: Responsive Architecture9 *Image from
    9. What is Responsive Design? Dont 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 Warriors Journey (2000)10
    10. Responsive design is • Your data as water; everyone is holding containers • Accessibility continued11 Let your knowledge shine
    11. Why Responsive DesignNew York Times and Craigslist12
    12. Why Responsive DesignThe Boston Globe13
    13. Why Responsive DesignSasquatch Festival, snapshots from http://mediaqueri.es14
    14. Why Responsive DesignAudioVroom, snapshots from http://mediaqueri.es15
    15. 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! LinkedIn16
    16. Argument against Designing Responsively iPad iPhone17
    17. Argument against Designing Responsively iPad iPhone Is this very different?18
    18. The explosion of HTML5Facebook iPad native vs. Facebook iPhone native19
    19. The explosion of HTML5Facebook web vs. Facebook native20
    20. HTML5 PushstateClick the link21 Let your knowledge shine
    21. HTML5 PushstateLink changes, photo and comment pops up, and I keep my context22 Let your knowledge shine
    22. HTML5 PushstateI close the modal, I go back to my context23 Let your knowledge shine
    23. HTML5 PushstateHad I copied and pasted the URL…24 Let your knowledge shine
    24. The explosion of HTML5Pathbrite web vs. Pathbrite native25
    25. The explosion of HTML5Pathbrite web vs. Pathbrite native26
    26. How do you make pages all bendy and flexy? Hint: It’s not media queries!27
    27. Find the layout in pixels28
    28. The magic equationtarget / context = result … * 100260 / 960 = 0.2708333333333329
    29. How do you make images bendy and flexy?Many options for making media flex.30
    30. So why do I need media queries?Flexible width without media queries.31
    31. Media queriesPulled from the Skeleton.css framework.32
    32. Magic formula + media queriesMedia queries get you access adjusting widthsbut also ems to control vertical layout.33
    33. Now that you know RD, let’s dive into someResponsive Backbone!First a quick primer. Backbone consists of:• Views• Models• Collections• Routes• *Templates34
    34. 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 templates35
    35. ResourcesBooksResponsive Web Design by EthanMarcotteResponsive Web Design with HTML5and CSS3 by Ben FrainGithub Let your knowledge shine