• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Design with Backbone
 

Responsive Design with Backbone

on

  • 6,548 views

 

Statistics

Views

Total Views
6,548
Views on SlideShare
6,548
Embed Views
0

Actions

Likes
11
Downloads
68
Comments
2

0 Embeds 0

No embeds

Accessibility

Categories

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.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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 http://www.paulolyslager.com/
  • OverviewThe Rise of JavaScript Application Frameworks Ember.js Backbone.js3
  • OverviewBackbone + Responsive Design4
  • Why Responsive DesignAudioVroom‘spopularity5
  • Don’t Break the ChainOpen-source responsive Backbone app made just for you! https://github.com/Brainswap/dontbreakme7
  • 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 http://www.archdaily.com/15014/ad-futures-4-sparc/
  • 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 http://www.bostonglobe.com/
  • Why Responsive DesignSasquatch Festival http://sasquatchfestival.com, snapshots from http://mediaqueri.es14
  • Why Responsive DesignAudioVroom http://audiovroom.com, 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 http://www.dontbreak.me
  • 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 http://www.dontbreak.me
  • Now that you know RD, let’s dive into someResponsive Backbone!First a quick primer. Backbone consists of:• Views• Models• Collections• Routes• *Templates34 http://www.dontbreak.me
  • 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 projects:dontbreakmeMandible2NodeIntervalFeedback:mauvis@pathbrite.com@krunkosaurus45 Let your knowledge shine