Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Anna Filina

April 21, 2015
Tweet

More Decks by Anna Filina

Other Decks in Programming

Transcript

  1. foolab.ca | @foolabca
    Bootstrap:
    Mobile Sites in Minutes
    Fluent, San Francisco - April 21, 2015

    View full-size slide

  2. Anna Filina
    • Developer
    • Problem solver
    • Coach
    • Advisor
    2

    View full-size slide

  3. Objectives
    • Choose responsive
    • Create mobile sites faster
    • Introduce Bootstrap
    • Transform your site
    3

    View full-size slide

  4. Mobile world
    4
    App Site
    Alternative Responsive
    Mobile

    View full-size slide

  5. Native issues
    • Effort for current & future platforms.
    • Many variables:
    ◦ devices,
    ◦ browsers,
    ◦ capabilities.
    • Need to download & install.
    • Useful for task-oriented apps.
    5

    View full-size slide

  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

    View full-size slide

  7. Responsive advantages
    • Fully adapts to the viewport size.
    • No redirects.
    • Single website.
    • Fastest & cheapest.
    7

    View full-size slide

  8. What is Bootstrap?

    View full-size slide

  9. Frontend framework
    • Helper CSS classes (class="navbar").
    • Grid layout.
    • JS for more advanced features
    ◦ Dropdown menu
    ◦ Tabs
    ◦ Carousel
    • Works on any modern device.
    10

    View full-size slide

  10. Advantages
    • Widely used
    • Rich documentation
    • Many themes
    • Easy to learn and use
    11

    View full-size slide

  11. Let's build stuff!

    View full-size slide

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

    View full-size slide

  13. index.html


    ...
    ...



    14

    View full-size slide

  14. Output comparison
    Small+:
    Extra

    small:
    15

    View full-size slide

  15. index.html

    ...


    ...


    16

    View full-size slide

  16. 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

    View full-size slide

  17. 4 sizes
    • xs
    ◦ 767-
    ◦ Phones
    • sm
    ◦ 768+
    ◦ Tablets

    • md
    ◦ 992+
    ◦ Desktops
    • lg
    ◦ 1200+
    ◦ Large desktops
    18

    View full-size slide

  18. Building a
    complete site

    View full-size slide

  19. Header
    20
    Extra

    small:
    Small+:

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. header.html

    ...



    ...


    23

    View full-size slide

  23. header.html


    data-toggle="collapse"
    data-target=".navbar-collapse">Menu


    ...

    24

    View full-size slide

  24. Spotlight
    25
    Extra

    small:
    Small+:

    View full-size slide

  25. spotlight.html
    ...



    ...
    26

    View full-size slide

  26. Content
    27
    Responsive video
    Left-aligned image
    Button with icon

    View full-size slide

  27. content.html
    28




    View full-size slide

  28. content.html
    29


    ...

    View full-size slide

  29. content.html
    30

    View full-size slide

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

    View full-size slide

  31. Final result
    32

    View full-size slide

  32. Advanced example
    33

    View full-size slide

  33. Advanced example
    34

    View full-size slide

  34. Other features
    • Carousel.
    • Popups.
    • Progress bars.
    • Pagination.
    • Button dropdown.
    • ...
    35

    View full-size slide

  35. Tips
    • Don't make user scroll too much (shortcuts).
    • Make descriptive button labels.
    • Keep transitions to minimum.
    • Cordova / PhoneGap to convert to native.
    36

    View full-size slide

  36. 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

    View full-size slide

  37. Useful links
    • What is supported?

    http://getbootstrap.com/getting-started/#support
    • Responsive image replacement:

    https://github.com/scottjehl/picturefill
    38

    View full-size slide

  38. @afilina afilina.com

    View full-size slide