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

Desktop-first to Mobile-first with Bootstrap

Avatar for Mark Otto Mark Otto
April 26, 2013
Technology
59
46k

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!
Avatar for Mark Otto

Mark Otto

April 26, 2013
Tweet

More Decks by Mark Otto

See All by Mark Otto
@mdo-ular CSS
Avatar for Mark Otto mdo
70
35k
Frameworks of Tomorrow UDE 2013
Avatar for Mark Otto mdo
18
1k
Build your own Bootstrap
Avatar for Mark Otto mdo
62
120k
Frameworks of Tomorrow 2
Avatar for Mark Otto mdo
14
1.5k
Frameworks of Tomorrow
Avatar for Mark Otto mdo
34
38k
Designing Bootstrap
Avatar for Mark Otto mdo
35
49k
Bootstrap One Year Party
Avatar for Mark Otto mdo
4
510
Bootstrap at the Twitter UK Open House
Avatar for Mark Otto mdo
1
440
Bootstrap 2
Avatar for Mark Otto mdo
40
31k

Other Decks in Technology

See All in Technology
SnowflakeとDatabricks両方でRAGを構築してみた
Avatar for camay kameitomohiro
1
570
【Oracle Cloud ウェビナー】ご希望のクラウドでOracle Databaseを実行〜マルチクラウド・ソリューション徹底解説〜
Avatar for oracle4engineer oracle4engineer
PRO
1
140
AIにおけるソフトウェアテスト_ver1.00
Avatar for fumisuke fumisuke
1
330
もう難しくない！誰でもカンタンDocker入門 〜30分であなたのPCにアプリを立ち上げる〜
Avatar for とことんDevOps devops_vtj
0
180
Winning at PHP in Production in 2025
Avatar for Benjamin Eberlei beberlei
1
270
MCPを理解する
Avatar for Yudai Hayashi yudai00
12
9.1k
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
7
63k
C++26アップデート 2025-03
Avatar for Akira Takahashi faithandbrave
0
1.2k
Новые мапы в Go. Вова Марунин, Clatch, МТС
Avatar for Lamoda Tech lamodatech
0
1.7k
ビジネスとデザインとエンジニアリングを繋ぐために 一人のエンジニアは何ができるか / What can a single engineer do to connect business, design, and engineering?
Avatar for 株式会社カミナシ kaminashi
2
860
Linuxのパッケージ管理とアップデート基礎知識
Avatar for Go Nishimoto go_nishimoto
1
700
製造業向けIoTソリューション提案資料.pdf
Avatar for h.uriu haruki_uiru
0
140

Featured

See All Featured
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.6k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
6.5k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
38
1.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.4k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
29
920
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
57k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
276
23k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.4k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
245
12k

Transcript

  1. B

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

  3. Desktop-first Mobile-first to

  4. With Bootstrap Or any other project, really.

  5. B

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

  7. 1ST

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

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

  10. Mobile first?

  11. Media query up Designed from smallest viewport up Constrains design

    to only the essentials

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

    all your code.

  13. Global annoyances 1

  14. <!DOCTYPE html> 1

  15. <meta name="viewport" content="width=device- width, initial-scale=1.0"> 1

  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

  17. Pixels or rems? 2

  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

  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

  20. Responsive IE8? 3

  21. <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements

    and media queries --> <!--[if lt IE 9]> <script src="/js/html5shiv.js"></script> <script src="/js/respond.min.js"></script> <![endif]--> 1 2 3 4 5 6 7 8

  22. Start small. 4

  23. Start refactors with a single component Keep your browser window

    narrow KISS (more on that later)

  24. Uncomment, comment. 5

  25. Don’t always start over Make it a painful refactor Will

    help existing and future employees

  26. Border-box er’ything. 6

  27. // Consistent box-model * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:

    border-box; } 1 2 3 4 5 6

  28. Avoid overrides. 7

  29. Be efficient, for your sake, and for file size Document

    your overrides Don’t undo yourself

  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

  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

  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; } }

  33. Design like it’s 2005. 8

  34. Forget all the embellishments early on Strip everything, and add

    it back later Treat it like a boss prototype

  35. Media query strategy. 9

  36. Single file, or embedded? Ideal world would be both honestly

    We’re still figuring this out

  37. position: rough; 10

  38. Android’s scroll is laggier than iOS iOS has problems updating

    fixed elements Responsive navs in limited viewports

  39. Admin Admin Dashboard Reports Organizations Users Billing Settings Help Login

    iPhone outline by @kirillz

  40. Submenus are crap. 11

  41. Tap targets are super small Horizontal space is also rather

    limited But there are workarounds if you need ‘em

  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

  43. It depends. 12

  44. No guideline fits every situation This stuff takes time and

    work Follow your heart

  45. Thanks, nerds! <3

  46. Questions?