SlideShare a Scribd company logo
1 of 45
Download to read offline
Responsive Design with HTML5, CSS3,
JavaScript and Backbone.js
Mauvis Ledford
CTO, Pathbrite
Overview



                                          *




2 *Stolen from http://www.paulolyslager.com/
Overview
The Rise of JavaScript Application Frameworks




      Ember.js




                             Backbone.js




3
Overview
Backbone + Responsive Design




4
Why Responsive Design
AudioVroom‘spopularity




5
Responsive Design with Backbone
Don’t Break the Chain
Open-source responsive Backbone app made just for you!




              https://github.com/Brainswap/dontbreakme

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 methodology




8       Let your knowledge shine
What is Responsive Design?

• Origins: Responsive Architecture




9    *Image from http://www.archdaily.com/15014/ad-futures-4-sparc/
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
Responsive design is



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




11      Let your knowledge shine
Why Responsive Design
New York Times and Craigslist




12
Why Responsive Design
The Boston Globe




13   http://www.bostonglobe.com/
Why Responsive Design
Sasquatch Festival




      http://sasquatchfestival.com, snapshots from http://mediaqueri.es
14
Why Responsive Design
AudioVroom




     http://audiovroom.com, snapshots from http://mediaqueri.es
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!                                  LinkedIn


16
Argument against Designing Responsively




           iPad                   iPhone

17
Argument against Designing Responsively




           iPad                             iPhone
                  Is this very different?
18
The explosion of HTML5
Facebook iPad native vs. Facebook iPhone native




19
The explosion of HTML5
Facebook web vs. Facebook native




20
HTML5 Pushstate
Click the link




21    Let your knowledge shine
HTML5 Pushstate
Link changes, photo and comment pops up, and I keep my context




22   Let your knowledge shine
HTML5 Pushstate
I close the modal, I go back to my context




23    Let your knowledge shine
HTML5 Pushstate
Had I copied and pasted the URL…




24   Let your knowledge shine
The explosion of HTML5
Pathbrite web vs. Pathbrite native




25
The explosion of HTML5
Pathbrite web vs. Pathbrite native




26
How do you make pages all bendy and flexy?




     Hint: It’s not media queries!

27
Find the layout in pixels




28
The magic equation
target / context = result … * 100

260 / 960 = 0.27083333333333




29
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 queries




Pulled from the Skeleton.css framework.

32
Magic formula + media queries
Media queries get you access adjusting widths
but also ems to control vertical layout.




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




34    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 templates



35
Responsive Design with Backbone
Responsive Design with Backbone
Responsive Design with Backbone
Responsive Design with Backbone
Responsive Design with Backbone
Responsive Design with Backbone
Responsive Design with Backbone
Responsive Design with Backbone
Responsive Design with Backbone
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

More Related Content

Similar to Responsive Design with Backbone

Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkJohn Strott
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013Achieve Internet
 
Responsive Web Design: How the mobile web has changed the way we think and work
Responsive Web Design:  How the mobile web has changed the way we think and workResponsive Web Design:  How the mobile web has changed the way we think and work
Responsive Web Design: How the mobile web has changed the way we think and workvq20
 
Responsive Design - ISCTE
Responsive Design - ISCTEResponsive Design - ISCTE
Responsive Design - ISCTEfidibiko
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...Doug Gapinski
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...Dave Olsen
 
How to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the EnterpriseHow to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the EnterpriseFlashGuy13
 
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipallanchao
 
Building a Responsive Web Design Process
Building a Responsive Web Design ProcessBuilding a Responsive Web Design Process
Building a Responsive Web Design ProcessLydia Whitehead
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Stephen Hay
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJenRobbins
 
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalAcquia
 
Responsive Design for an Omnichannel World
Responsive Design for an Omnichannel WorldResponsive Design for an Omnichannel World
Responsive Design for an Omnichannel WorldAriad Communications
 
15 Web Design Trends for 2013
15 Web Design Trends for 201315 Web Design Trends for 2013
15 Web Design Trends for 2013David King
 
Embracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyEmbracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyChad Currie
 

Similar to Responsive Design with Backbone (20)

Responsive Design and Joomla!
Responsive Design and Joomla!Responsive Design and Joomla!
Responsive Design and Joomla!
 
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible framework
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
 
Responsive Web Design: How the mobile web has changed the way we think and work
Responsive Web Design:  How the mobile web has changed the way we think and workResponsive Web Design:  How the mobile web has changed the way we think and work
Responsive Web Design: How the mobile web has changed the way we think and work
 
Responsive Design - ISCTE
Responsive Design - ISCTEResponsive Design - ISCTE
Responsive Design - ISCTE
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
 
How to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the EnterpriseHow to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the Enterprise
 
Mobile last
Mobile lastMobile last
Mobile last
 
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
 
Building a Responsive Web Design Process
Building a Responsive Web Design ProcessBuilding a Responsive Web Design Process
Building a Responsive Web Design Process
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
 
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
 
Responsive Design for an Omnichannel World
Responsive Design for an Omnichannel WorldResponsive Design for an Omnichannel World
Responsive Design for an Omnichannel World
 
15 Web Design Trends for 2013
15 Web Design Trends for 201315 Web Design Trends for 2013
15 Web Design Trends for 2013
 
Embracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyEmbracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think Responsively
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive Web Design Whitepaper
Responsive Web Design WhitepaperResponsive Web Design Whitepaper
Responsive Web Design Whitepaper
 

Recently uploaded

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 

Recently uploaded (20)

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 

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
  • 7. Don’t 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 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! 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: It’s 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, let’s 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

  1. Ethan Marcott