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.

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. Mobile world
   4
   App Site
   Alternative Responsive
   Mobile
   

   View 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 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 Slide

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

   View Slide

8. Example
   8
   

   View Slide

9. What is Bootstrap?
   

   View Slide

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
    

    View Slide

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

    View Slide

12. Let's build stuff!
    

    View Slide

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

    View Slide

14. index.html
    
    
    ...
    ...
    
    
    
    14
    

    View Slide

15. Output comparison
    Small+:
    Extra

    small:
    15
    

    View Slide

16. index.html
    
    ...
    
    
    ...
    
    
    16
    

    View Slide

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
    

    View Slide

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

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

    View Slide

19. Building a
    complete site
    

    View Slide

20. Header
    20
    Extra

    small:
    Small+:
    

    View Slide

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

    View Slide

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

    View Slide

23. header.html
    
    ...
    
    
    
    ...
    
    
    23
    

    View Slide

24. header.html
    
    
    data-toggle="collapse"
    data-target=".navbar-collapse">Menu
    
    
    ...
    
    24
    

    View Slide

25. Spotlight
    25
    Extra

    small:
    Small+:
    

    View Slide

26. spotlight.html
    ...
    
    
    
    ...
    26
    

    View Slide

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

    View Slide

28. content.html
    28
    
    
    
    
    

    View Slide

29. content.html
    29
    
    
    ...
    
    

    View Slide

30. content.html
    30
    
    

    View Slide

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

    View Slide

32. Final result
    32
    

    View Slide

33. Advanced example
    33
    

    View Slide

34. Advanced example
    34
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

38. Useful links
    • What is supported?

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

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

    View Slide

39. @afilina afilina.com
    

    View Slide