Desktop-first to Mobile-first with Bootstrap

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Hi, I’m @mdo. <3

Slide 3

Slide 3 text

Desktop-first Mobile-first to

Slide 4

Slide 4 text

With Bootstrap Or any other project, really.

Slide 5

Slide 5 text

Slide 6

Slide 6 text

B Created in 2011 v1: Desktop v2: Responsive v3: Mobile-ﬁrst

Slide 7

Slide 7 text

1ST

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Mobile ﬁrst?

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Global annoyances 1

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

// 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

Slide 17

Slide 17 text

Pixels or rems? 2

Slide 18

Slide 18 text

// 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

Slide 19

Slide 19 text

// 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

Slide 20

Slide 20 text

Responsive IE8? 3

Slide 21

Slide 21 text

1 2 3 4 5 6 7 8

Slide 22

Slide 22 text

Start small. 4

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Uncomment, comment. 5

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Border-box er’ything. 6

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Avoid overrides. 7

Slide 29

Slide 29 text

Be eﬃcient, for your sake, and for ﬁle size Document your overrides Don’t undo yourself

Slide 30

Slide 30 text

.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

Slide 31

Slide 31 text

// 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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Design like it’s 2005. 8

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Media query strategy. 9

Slide 36

Slide 36 text

Single ﬁle, or embedded? Ideal world would be both honestly We’re still ﬁguring this out

Slide 37

Slide 37 text

position: rough; 10

Slide 38

Slide 38 text

Android’s scroll is laggier than iOS iOS has problems updating ﬁxed elements Responsive navs in limited viewports

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Submenus are crap. 11

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

It depends. 12

Slide 44

Slide 44 text

No guideline ﬁts every situation This stuﬀ takes time and work Follow your heart