WordCamp Tampa 2015 #wctpa :: @jpetersen
Mobile-First
Development
why :: how
Jesse Petersen
@jpetersen
Slide 2
Slide 2 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
The 411 on this guy
WordPress 2005
married 2006
solopreneur 2009
foster dad (28 since) 2012
3 Treehouse courses since 2014
adoptive dad (1) 2015
@jpetersen
Slide 3
Slide 3 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
MOBILE-FIRST?
Slide 4
Slide 4 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
THAT DEPENDS
Slide 5
Slide 5 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
mobile-first design
=
designing with the smallest mobile
experience in mind first
Slide 6
Slide 6 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
mobile-first development
=
coding in such a way that mobile assets
are loaded first with bonuses to ignoring
desktop assets on mobile devices
Slide 7
Slide 7 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
mobile-first
≠
graceful degradation of
desktop design
=
progressive enhancement
Slide 8
Slide 8 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
flatfull.com/themes/first/
Slide 9
Slide 9 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
flatfull.com/themes/first/
Slide 10
Slide 10 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
themeshifters.com/wp/omni/one-page/one/
Slide 11
Slide 11 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
HOW DO YOU BEGIN?
Slide 12
Slide 12 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
with the stylesheet
Slide 13
Slide 13 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
there are two main ways
Slide 14
Slide 14 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
if( wp_is_mobile() )
maintain two stylesheets
Slide 15
Slide 15 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
if( wp_is_mobile() )
maintain two stylesheets
Slide 16
Slide 16 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
Slide 17
Slide 17 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
WHY NOT?
Slide 18
Slide 18 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
flip style.css on its head
INSTEAD
Slide 19
Slide 19 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
smallest viewports are not a media query
largest viewport is the last media query
Slide 20
Slide 20 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
the bulk of your stylesheet is mobile
therefore, it has a lot of 100% width items
smaller font sizes and less pizazz first
Slide 21
Slide 21 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
desktop-first
mobile-first
Slide 22
Slide 22 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
mobile-first
Slide 23
Slide 23 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
coming this fall
Slide 24
Slide 24 text
WordCamp Tampa 2015 #wctpa :: @jpetersen
Questions?
Jesse Petersen
@jpetersen