Mobile-First Development: How and Why

16b4c5f853c17d7dedf86cc6e39441df?s=47 Jesse Petersen
September 26, 2015

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.

16b4c5f853c17d7dedf86cc6e39441df?s=128

Jesse Petersen

September 26, 2015
Tweet

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