Mobile-First Development: How and Why

Mobile-first is one of those phrases getting thrown around a lot now, but most often mistakenly as interchangeable with “mobile responsive.” Mobile-first is the holistic design and development approach of both designing for phones first and flipping the stylesheet on its head so media queries are for large mobile on up to desktop and CSS without media queries are for the phone viewport.

Transcript

1. WordCamp Tampa 2015 #wctpa :: @jpetersen Mobile-First Development why :: how Jesse Petersen @jpetersen
2. 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
3. WordCamp Tampa 2015 #wctpa :: @jpetersen MOBILE-FIRST?
4. WordCamp Tampa 2015 #wctpa :: @jpetersen THAT DEPENDS
5. WordCamp Tampa 2015 #wctpa :: @jpetersen mobile-first design = designing with the smallest mobile experience in mind first
6. 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
7. WordCamp Tampa 2015 #wctpa :: @jpetersen mobile-first ≠ graceful degradation of desktop design = progressive enhancement
8. WordCamp Tampa 2015 #wctpa :: @jpetersen flatfull.com/themes/first/
9. WordCamp Tampa 2015 #wctpa :: @jpetersen flatfull.com/themes/first/
10. WordCamp Tampa 2015 #wctpa :: @jpetersen themeshifters.com/wp/omni/one-page/one/
11. WordCamp Tampa 2015 #wctpa :: @jpetersen HOW DO YOU BEGIN?
12. WordCamp Tampa 2015 #wctpa :: @jpetersen with the stylesheet
13. WordCamp Tampa 2015 #wctpa :: @jpetersen there are two main ways
14. WordCamp Tampa 2015 #wctpa :: @jpetersen if( wp_is_mobile() ) maintain two stylesheets
15. WordCamp Tampa 2015 #wctpa :: @jpetersen if( wp_is_mobile() ) maintain two stylesheets
16. WordCamp Tampa 2015 #wctpa :: @jpetersen
17. WordCamp Tampa 2015 #wctpa :: @jpetersen WHY NOT?
18. WordCamp Tampa 2015 #wctpa :: @jpetersen flip style.css on its head INSTEAD
19. WordCamp Tampa 2015 #wctpa :: @jpetersen smallest viewports are not a media query largest viewport is the last media query
20. 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
21. WordCamp Tampa 2015 #wctpa :: @jpetersen desktop-first mobile-first
22. WordCamp Tampa 2015 #wctpa :: @jpetersen mobile-first
23. WordCamp Tampa 2015 #wctpa :: @jpetersen coming this fall
24. WordCamp Tampa 2015 #wctpa :: @jpetersen Questions? Jesse Petersen @jpetersen