1.  Jen Kramer JS Summit November 19, 2013

2.  Grounding in mobile techniques  Background on responsive design  Introduce Bootstrap and Foundation  Compare Bootstrap and Foundation  Declare a winner!!!

3. www.jenkramer.org jen@jenkramer.org

4.  Build a separate mobile-compatible website or mobile app (or both)  Responsive Design  A comparison of methods for building mobile-optimized websites A comparison of methods for building mobile-optimized websites www.jenkramer.org jen@jenkramer.org

5.  Defined by three characteristics o Flexible grid-based layout o Images that resize o Media queries (CSS3)  www.alistapart.com/articles/responsive-web- design/ www.alistapart.com/articles/responsive-web- design/ www.jenkramer.org jen@jenkramer.org

7.  Images should change size, based on screen resolution o Load a big image and let it scale (not good) o Server-side (good) o Client-side: Load several images and display the one right for this resolution (not good) o Client-side: let JavaScript decide (better)

8.  Browser reports screen resolution  Based on current width, serve a stylesheet with layout for that width  No JavaScript involved

9. 

12.  While the back-end world has been developing tools and API’s, the front-end world has been custom or off-the- shelf. There has been no middle ground. www.jenkramer.org jen@jenkramer.org

14.  Some of the work is done for you – including debugging!  You can still customize what you get.  It doesn’t have to look like a Bootstrap/Foundation site.  The code may be more than you would create custom… but how much time/money did you save?

16. getbootstrap.com foundation.zurb.com 15 More Responsive CSS Frameworks Worth Considering www.jenkramer.org jen@jenkramer.org

17.  I am a lynda.com author, and I have recorded video training titles on both frameworks.  I am currently writing a book on Bootstrap 3.  I do not work for or contribute to the coding of either project.  I have no insight into either project other than what’s publicly available for both projects.  I think both frameworks are awesome and amazing in their own right and are appropriate for different situations and different skillsets.

18.  Jen’s spreadsheet comparing Bootstrap and Foundation Jen’s spreadsheet comparing Bootstrap and Foundation  Based on documentation sites for Bootstrap and Foundation.

19.  Twitter Bootstrap is the most popular responsive design framework for building web sites and web applications.  It is the most popular project in GitHub and is used by NASA and MSNBC among others.GitHubNASA MSNBC wikipedia.org/wiki/Twitter_Bootstrap www.jenkramer.org jen@jenkramer.org

20.  A fully functional grid system with 4 different sizes.  Base CSS includes standardized styling for forms, buttons, images, headings, navigation systems, etc.  CSS customization through LESS CSS  jQuery-driven components include dropdown menus, tooltips, popovers, alerts, image carousel, accordion panels, etc.  Optional icon font for incorporating vector images, distributed with Bootstrap, 180 icons Optional icon font  Distributed under Apache 2, copyright 2013 Twitter (moving to MIT) www.jenkramer.org jen@jenkramer.org

21.  ZURB Foundation is an easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.  It is the 13th most starred project in all of GitHub and is used by National Geographic Education, PBS, and Pixar Projection. www.jenkramer.org jen@jenkramer.org

22.  A fully functional grid system with 3 different sizes plus a block grid.  Base CSS includes standardized styling for forms, buttons, images, headings, navigation systems, etc.  CSS customization via Sass and Compass  jQuery-driven components include dropdown menus, tooltips, popovers, image carousel, site tour, etc.  Custom icon font for incorporating vector images available as a separate download Custom icon font  Distributed under MIT license www.jenkramer.org jen@jenkramer.org

23. 23 BootstrapFoundation  Started by Mark Otto and Jacob Thornton, while working at Twitter, as internal tool  Released Bootstrap in 2011  Otto & Thornton left Twitter in 2012  Otto is now in charge of the open source project and is adding core team members.  ZURB is a 30-person web development company in Campbell, CA  Created Foundation to build client websites  Mark Otto worked here until 2007  When ZURB saw how well Bootstrap was doing, they released Foundation as an open source project.

24. www.jenkramer.org jen@jenkramer.org 24 BootstrapFoundation  Strictly open source community, with Otto as benevolent dictator  With a company behind this framework, tech support is available, as well as in-person and online training

25. www.jenkramer.org jen@jenkramer.org 25 Bootstrap Latest versions of: Chrome (Mac, Windows, iOS, and Android) Safari (Mac and iOS only, as Windows has more or less been discontinued) Firefox (Mac, Windows) Opera (Mac, Windows) IE 9 and 10. IE 8 supported with respond.js Foundation Latest versions of Chrome, Firefox, Safari iOS (iPhone and iPad) Android 2, 4 (tablet and phone) Windows Phone 7+ Surface IE 9 and 10. IE 8 supported with additional grid code (provided on site as a gist)

27. www.jenkramer.org jen@jenkramer.org 27 Bootstrap  Some effort put into accessibility improvements  Includes the Aria codes, screen reader only styles  Joomla has pushed for accessibility since Bootstrap is incorporated in the version 3 CMS Foundation

28. www.jenkramer.org jen@jenkramer.org 28 Bootstrap  4 grid system: o Extra small always stays horizontal o Small, medium, large grids stack after breakpoint Foundation  3 grid system: o Small always stays horizontal o Medium, large grids stack after breakpoint  Can center columns on the page

29. www.jenkramer.org jen@jenkramer.org 29 Bootstrap  There is a TON of stuff that’s styled  No right-to-left support  Specific to Bootstrap: o Jumbotron o Media object o Media List o Well Foundation  In general there is LESS styling out of the box o But that’s less to override later  Right-to-left support  Specific to Foundation: o Pricing Tables o Keystrokes

30. www.jenkramer.org jen@jenkramer.org 30 Bootstrap  LESS CSS  Not much LESS documentation on Bootstrap site  Less of an expectation that you will work with LESS  No official training available Foundation  Sass plus Compass (can run without Compass)  Extensive Sass documentation  Expectation that you will style with Sass  ZURB offers training for working with Sass (and Foundation)

31. www.jenkramer.org jen@jenkramer.org 31 Bootstrap  Affix: fixes element in place while page scrolls  ScrollSpy: Updates nav bar with current position on page Foundation  HTML5 form validation library (Abide)  Responsive lightbox (Clearing)  Site tour (Joyride)  Responsive image scheme: Interchange loads correct individual image for screen resolution, including Retina images

32. www.jenkramer.org jen@jenkramer.org 32 Bootstrap Carousel Foundation Orbit

33. www.jenkramer.org jen@jenkramer.org 33 Bootstrap CarouselFoundation Orbit $(document).foundation('orbit', { animation: 'fade', timer_speed: 10000, pause_on_hover: true, resume_on_mouseout: false, animation_speed: 500, stack_on_small: true, navigation_arrows: true, slide_number: true, container_class: 'orbit-container', stack_on_small_class: 'orbit-stack-on-small', next_class: 'orbit-next', prev_class: 'orbit-prev', timer_container_class: 'orbit-timer', timer_paused_class: 'paused', timer_progress_class: 'orbit-progress', slides_container_class: 'orbit-slides-container', bullets_container_class: 'orbit-bullets', bullets_active_class: 'active', slide_number_class: 'orbit-slide-number', caption_class: 'orbit-caption', active_slide_class: 'active', orbit_transition_class: 'orbit-transitioning', bullets: true, timer: true, next_on_click: false, variable_height: false, before_slide_change: function(){}, after_slide_change: function(){} });  6 methods  2 events  3 data- options

34. www.jenkramer.org jen@jenkramer.org 34 BootstrapFoundation

35. CAN THERE BE ONLY ONE?

36.  You need lots of styling out of the box, without lots of changes.  You love LESS CSS.  You’re OK with a strictly open source project.  You need one of the unique JS/CSS characteristics.  You hate semicolons in your JavaScript/you hate JS. www.jenkramer.org jen@jenkramer.org

37.  You don’t want a ton of styling you have to override later.  You love Sass/Compass.  You need tech support and/or training.  You need one of the unique JS/CSS characteristics.  You love semicolons in your JavaScript/you love JS. www.jenkramer.org jen@jenkramer.org

38. Jen Kramer Waltham, MA Phone: 802-257-2657 jen@jenkramer.org www.jenkramer.org Twitter: @jen4web@jen4web Facebook: facebook.com/webdesignjenfacebook.com/webdesignjen www.jenkramer.org jen@jenkramer.org Slides available at www.slideshare.net/jen 4web