Bootstrap: Mobile Sites in Minutes

Bootstrap: Mobile Sites in Minutes

Bootstrap is a front-end framework that allows you to create responsive layouts, meaning that they automatically adjust to any screen size. It’s easy to use, fast to integrate and looks amazing. This presentation will teach you how to quickly create an adaptive layout and with little effort. It will also feature a case study of transforming an existing web application.

B3b2139e4f2c0eca4efe2379fcebc1c5?s=128

Anna Filina

April 21, 2015
Tweet

Transcript

  1. foolab.ca | @foolabca Bootstrap: Mobile Sites in Minutes Fluent, San

    Francisco - April 21, 2015
  2. Anna Filina • Developer • Problem solver • Coach •

    Advisor 2
  3. Objectives • Choose responsive • Create mobile sites faster •

    Introduce Bootstrap • Transform your site 3
  4. Mobile world 4 App Site Alternative Responsive Mobile

  5. Native issues • Effort for current & future platforms. •

    Many variables: ◦ devices, ◦ browsers, ◦ capabilities. • Need to download & install. • Useful for task-oriented apps. 5
  6. Mobile advantages • Quicker and less expensive. • No download,

    no installation. • Others link to your site. • Point of entry for first-time users. • Useful for content-oriented sites. 6
  7. Responsive advantages • Fully adapts to the viewport size. •

    No redirects. • Single website. • Fastest & cheapest. 7
  8. Example 8

  9. What is Bootstrap?

  10. Frontend framework • Helper CSS classes (class="navbar"). • Grid layout.

    • JS for more advanced features ◦ Dropdown menu ◦ Tabs ◦ Carousel • Works on any modern device. 10
  11. Advantages • Widely used • Rich documentation • Many themes

    • Easy to learn and use 11
  12. Let's build stuff!

  13. index.html <link href="css/bootstrap.min.css" rel="stylesheet"> 13

  14. index.html <div class="container"> <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div>

    </div> <!-- sm = 768px --> 14
  15. Output comparison Small+: Extra
 small: 15

  16. index.html <link href="css/layout.css" rel="stylesheet"> ... <div class="col-sm-6"> <div class="example"> ...

    </div> </div> 16
  17. layout.css @media (max-width: 767px) { div.example { border-bottom: 1px solid

    #ccc; padding: 0 0 10px 0; } } @media (min-width: 768px) { div.example { border: 1px solid #ccc; padding: 10px; } } 17
  18. 4 sizes • xs ◦ 767- ◦ Phones • sm

    ◦ 768+ ◦ Tablets
 • md ◦ 992+ ◦ Desktops • lg ◦ 1200+ ◦ Large desktops 18
  19. Building a complete site

  20. Header 20 Extra
 small: Small+:

  21. Header - small 21 6 6 col-sm-6 col-sm-6

  22. Header - extra small 22 8 4 col-xs-8 col-xs-4

  23. header.html <div class="col-xs-8 col-sm-6"> ... </div> <div class="col-xs-4 col-sm-6"> <nav

    class="navbar"> ... </nav> </div> 23
  24. header.html <!-- inside nav tag --> <div class="navbar-header"> <button class="navbar-toggle"

    data-toggle="collapse" data-target=".navbar-collapse">Menu</button> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav">...</ul> </div> 24
  25. Spotlight 25 Extra
 small: Small+:

  26. spotlight.html <div class="col-sm-4 hidden-xs">...</div> <div class="col-sm-4"> <img src="..." class="img-responsive"> </div>

    <div class="col-sm-4 hidden-xs">...</div> 26
  27. Content 27 Responsive video Left-aligned image Button with icon

  28. content.html 28 <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."> </iframe> </div>

  29. content.html 29 <div class="media"> <img class="media-object pull-left" src="..."> <div class="media-body">...</div>

    </div>
  30. content.html 30 <span class="glyphicon glyphicon-user"></span>

  31. Glyphicons 31 Color, background, size, shadow, etc.

  32. Final result 32

  33. Advanced example 33

  34. Advanced example 34

  35. Other features • Carousel. • Popups. • Progress bars. •

    Pagination. • Button dropdown. • ... 35
  36. Tips • Don't make user scroll too much (shortcuts). •

    Make descriptive button labels. • Keep transitions to minimum. • Cordova / PhoneGap to convert to native. 36
  37. Services • Development: PHP, JS, etc. • Fix problems: bugs,

    performance, etc. • Workshops: testing, Symfony, AngularJS, APIs, etc. • Advisor: testing strategy, legacy code, speed up development, etc. 37
  38. Useful links • What is supported?
 http://getbootstrap.com/getting-started/#support • Responsive image

    replacement:
 https://github.com/scottjehl/picturefill 38
  39. @afilina afilina.com