Responsive Design with HTML5, CSS3, JavaScript and Backbone.js Mauvis Ledford CTO, Pathbrite @krunkosaurus 

Overview 2 *Stolen  from  h-p://www.paulolyslager.com/   *   

Overview 3 The Rise of JavaScript Application Frameworks Ember.js   Backbone.js 

Overview 4 Backbone + Responsive Design 

Why Responsive Design 5 AudioVroom‘s  popularity   

Don’t Break the Chain 6 Open-source responsive Backbone app made just for you! h-ps://github.com/Brainswap/dontbreakme   

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 7 

What is Responsive Design? •  Origins: Responsive Architecture *Image from http://www.archdaily.com/15014/ad-futures-4-sparc/ 8 

What is Responsive Design? 9 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) 

Responsive design is •  Your data as water; everyone is holding containers •  Accessibility continued 10 

Why Responsive Design 11 New York Times and Craigslist 

Why Responsive Design 12 The Boston Globe http://www.bostonglobe.com/ 

Why Responsive Design 13 Sasquatch  FesEval   http://sasquatchfestival.com, snapshots from h-p://mediaqueri.es   

Why Responsive Design 14 AudioVroom   http://audiovroom.com, snapshots from h-p://mediaqueri.es   

Why Responsive Design 15 Financial Times - app.ft.com iPhone   iPad   

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 Prasad Director of Engineering, Mobile LinkedIn 95%  Web  view!   

Argument against Designing Responsively 17 iPad   iPhone   

Argument against Designing Responsively 18 iPad   iPhone   Is  this  very  different?   

The explosion of HTML5 19 Facebook  iPad  naEve  vs.  Facebook  iPhone  naEve   

Wait, didn’t Facebook go native? 20 Zuckerberg: More people use Facebook on mobile web than on Android and iPhone combined. *  Source:  Mark  Zuckerberg,  Disrupt  SF,  September  2012.   •  Facebook’s native mobile web app was atrociously slow. •  Mobile and hybrid web apps like LinkedIn and Financial Times do not suffer the same issues. •  The addition of native iOS does not solve Facebook problem for non- iOS audience. •  Solution: Buy the world an iPhone or improve Facebook’s mobile web app (which they are actively doing.) 

Still evolving today: Facebook mobile web 21 6/2012   11/2012   

Basecamp for mobile 22 Launched  9/12   37 Signals: Devices and platforms will come and go, but the web browser is here to stay. 

HTML5 Pushstate 23 Other features of being responsive: keeping in context 

HTML5 Pushstate 24 Click a photo. URL changes, larger photo and comments pop up. 

HTML5 Pushstate 25 Close the modal. Go back to user’s context. URL reverts. 

HTML5 Pushstate 26 Had she copied the URL to a friend… 

The explosion of HTML5 27 Pathbrite  web  vs.  Pathbrite  naEve   

The explosion of HTML5 28 Pathbrite  web  vs.  Pathbrite  naEve   

How do you make pages all bendy and flexy? Hint: It’s not media queries! 29 

Find the layout in pixels 30 

The magic equation 31 target / context = result … * 100 260  /  960  =  0.27083333333333   

How do you make images bendy and flexy? 32 Many options for making media flex. 

So why do I need media queries? 33 http://www.dontbreak.me Flexible width with and without media queries. 

Media queries 34 Pulled  from  the  Skeleton.css  framework.   

Magic formula + media queries 35 http://www.dontbreak.me Media queries get you adjustable widths. Ems control vertical layout. ßSecret  sauce   ßSecret  sauce   

Now that you know RD, let’s dive into some Responsive Backbone! 36 http://www.dontbreak.me •  Views •  Models •  Collections •  Routes •  *Templates First a quick primer. Backbone consists of: 

Backbone architecture 37 •  ./js/models/ •  ├── month.js •  └── user.js •  .js/collections/ •  └── months.js Models and collections Clone  the  code  at  h-ps://github.com/BrainSwap/dontbreakme   

Backbone architecture 38 •  ./js/views/ •  ├── app •  │ └── app.js •  ├── base.js •  ├── modals •  │ ├── about.js •  │ ├── base.js •  │ ├── login.js •  │ ├── settings.js •  │ └── signup.js •  ├── months •  │ └── months.js •  └── partials •  ├── footer.js •  ├── header.js •  └── month.js Views (inc. partials and modals) •  ./js/views/ •  ├── app •  ├── base.js •  ├── modals •  ├── months •  └── partials Clone  the  code  at  h-ps://github.com/BrainSwap/dontbreakme   

Backbone architecture 39 CSS •  css/ •  ├── _base.scss •  ├── _mixins.scss •  ├── devices •  ├── features •  ├── helpers •  └── pages •  css/ •  ├── _base.scss •  ├── _mixins.scss •  ├── devices •  │ ├── _high-res.scss •  │ ├── _mobile-landscape.scss •  │ ├── _mobile-portrait.scss •  │ └── _tablet-portrait.scss •  ├── features •  │ ├── _feature-calendar.scss •  │ ├── _feature-header.scss •  │ ├── _feature-modal.scss •  │ └── _feature-spinner.scss •  ├── helpers •  │ └── _html5boilerplate.scss •  └── pages •  └── _page-app.scss Clone  the  code  at  h-ps://github.com/BrainSwap/dontbreakme   

Backbone architecture 40 CSS •  css/ •  ├── _base.scss •  ├── _mixins.scss •  ├── devices •  ├── features •  ├── helpers •  └── pages 

41 Diving into code! 

Thanks and Resources! Books Responsive Web Design by Ethan Marcotte Responsive Web Design with HTML5 and CSS3 by Ben Frain Github projects: dontbreakme Mandible2 NodeInterval Feedback: [email protected] @krunkosaurus 42