Desktop-first to Mobile-first with Bootstrap

Historically Bootstrap has been desktop-first—since the initial release and every subsequent update. With the upcoming release of v3, we've switched to a mobile-first approach. We're still finalizing much of the CSS, but the last few months of development have been intense and an awesome learning experience. This talk highlights some of the things I've learned along the way—some design, some code, and some still unanswered questions.

This talk was given at the Responsive Web Design meetup in SF, sponsored by Rocket Lawyer. <3 to them for organizing everything!

Transcript

1. B
   

   View Slide

2. Hi, I’m @mdo.
   <3
   

   View Slide

3. Desktop-first
   Mobile-first
   to
   

   View Slide

4. With Bootstrap
   Or any other project, really.
   

   View Slide

5. B
   

   View Slide

6. B Created in 2011
   v1: Desktop
   v2: Responsive
   v3: Mobile-first
   

   View Slide

7. 1ST
   

   View Slide

8. It’s a shiny, hand-held
   world out there.
   

   View Slide

9. What’s a nerd to do?
   We mobile-first that shit.
   

   View Slide

10. Mobile first?
    

    View Slide

11. Media query up
    Designed from smallest viewport up
    Constrains design to only the essentials
    

    View Slide

12. Let’s do this.
    Use this one weird trick to fix all your code.
    

    View Slide

13. Global annoyances
    1
    

    View Slide

14. View Slide

15. View Slide

16. // Disable iOS/WinMobile font size changes
    @media screen and (max-device-width: 480px) {
    html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    

    View Slide

17. Pixels or rems?
    2
    

    View Slide

18. // Using rems means double the code
    // if you want any IE8 support.
    .element {
    font-size: 32px;
    font-size: 3.2rem;
    }
    1
    2
    3
    4
    5
    6
    

    View Slide

19. // And what about margin, padding, etc?
    // Do we double all those, too?
    .element {
    font-size: 32px;
    font-size: 3.2rem;
    margin: 10px 0;
    margin: .5rem 0;
    padding: 10px 15px;
    padding: 1rem 1.5rem;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    

    View Slide

20. Responsive IE8?
    3
    

    View Slide

21. View Slide

22. Start small.
    4
    

    View Slide

23. Start refactors with a single component
    Keep your browser window narrow
    KISS (more on that later)
    

    View Slide

24. Uncomment, comment.
    5
    

    View Slide

25. Don’t always start over
    Make it a painful refactor
    Will help existing and future employees
    

    View Slide

26. Border-box er’ything.
    6
    

    View Slide

27. // Consistent box-model
    * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    1
    2
    3
    4
    5
    6
    

    View Slide

28. Avoid overrides.
    7
    

    View Slide

29. Be efficient, for your sake, and for file size
    Document your overrides
    Don’t undo yourself
    

    View Slide

30. .example {
    margin: 40px;
    }
    // Bad overrides
    .example-modifier {
    margin: 40px 0;
    }
    // Better overrides
    .example-modifier {
    margin-left: 0;
    margin-right: 0;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    

    View Slide

31. // Bootstrap 2
    .navbar-fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    }
    @media screen and (max-width: 480px) {
    .navbar-fixed-top {
    position: static;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    

    View Slide

32. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // Bootstrap 3
    @media screen and (min-width: 768px) {
    .navbar-fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    }
    }
    

    View Slide

33. Design like it’s 2005.
    8
    

    View Slide

34. Forget all the embellishments early on
    Strip everything, and add it back later
    Treat it like a boss prototype
    

    View Slide

35. Media query strategy.
    9
    

    View Slide

36. Single file, or embedded?
    Ideal world would be both honestly
    We’re still figuring this out
    

    View Slide

37. position: rough;
    10
    

    View Slide

38. Android’s scroll is laggier than iOS
    iOS has problems updating fixed elements
    Responsive navs in limited viewports
    

    View Slide

39. Admin Admin
    Dashboard
    Reports
    Organizations
    Users
    Billing
    Settings
    Help
    Login
    iPhone outline by @kirillz
    

    View Slide

40. Submenus are crap.
    11
    

    View Slide

41. Tap targets are super small
    Horizontal space is also rather limited
    But there are workarounds if you need ‘em
    

    View Slide

42. Dropdown link
    Dropdown link
    Dropdown link
    Dropdown link ▶
    Dropdown link
    Dropdown link
    Dropdown link
    Dropdown link ▶
    Dropdown link ▶
    Submenu link
    Submenu link
    Submenu link
    Submenu link
    Submenu link
    Dropdown link
    Dropdown link
    Dropdown link
    Dropdown link ▶
    Back
    Submenu link
    Submenu link
    Submenu link
    Submenu link
    ⾢
    Dropdown link
    Dropdown link
    Dropdown link
    Dropdown link ▼
    Dropdown link
    Dropdown link
    Dropdown link
    Dropdown link ▼
    Submenu link
    Submenu link
    Submenu link
    Submenu lin
    Dropdown link ▼
    Submenu link
    Submenu link
    Submenu link
    Submenu link
    

    View Slide

43. It depends.
    12
    

    View Slide

44. No guideline fits every situation
    This stuff takes time and work
    Follow your heart
    

    View Slide

45. Thanks, nerds!
    <3
    

    View Slide

46. Questions?
    

    View Slide