Responsive Design with Backbone
Upcoming SlideShare
Loading in...5

Responsive Design with Backbone






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • Ethan Marcott

Responsive Design with Backbone Responsive Design with Backbone Presentation Transcript

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