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

Mobile-First Development: How and Why

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.

Jesse Petersen

September 26, 2015
Tweet

More Decks by Jesse Petersen

Other Decks in Technology

Transcript

  1. WordCamp Tampa 2015 #wctpa :: @jpetersen
    Mobile-First
    Development
    why :: how
    Jesse Petersen
    @jpetersen

    View full-size slide

  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

    View full-size slide

  3. WordCamp Tampa 2015 #wctpa :: @jpetersen
    MOBILE-FIRST?

    View full-size slide

  4. WordCamp Tampa 2015 #wctpa :: @jpetersen
    THAT DEPENDS

    View full-size slide

  5. WordCamp Tampa 2015 #wctpa :: @jpetersen
    mobile-first design
    =
    designing with the smallest mobile
    experience in mind first

    View full-size slide

  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

    View full-size slide

  7. WordCamp Tampa 2015 #wctpa :: @jpetersen
    mobile-first

    graceful degradation of
    desktop design
    =
    progressive enhancement

    View full-size slide

  8. WordCamp Tampa 2015 #wctpa :: @jpetersen
    flatfull.com/themes/first/

    View full-size slide

  9. WordCamp Tampa 2015 #wctpa :: @jpetersen
    flatfull.com/themes/first/

    View full-size slide

  10. WordCamp Tampa 2015 #wctpa :: @jpetersen
    themeshifters.com/wp/omni/one-page/one/

    View full-size slide

  11. WordCamp Tampa 2015 #wctpa :: @jpetersen
    HOW DO YOU BEGIN?

    View full-size slide

  12. WordCamp Tampa 2015 #wctpa :: @jpetersen
    with the stylesheet

    View full-size slide

  13. WordCamp Tampa 2015 #wctpa :: @jpetersen
    there are two main ways

    View full-size slide

  14. WordCamp Tampa 2015 #wctpa :: @jpetersen
    if( wp_is_mobile() )
    maintain two stylesheets

    View full-size slide

  15. WordCamp Tampa 2015 #wctpa :: @jpetersen
    if( wp_is_mobile() )
    maintain two stylesheets

    View full-size slide

  16. WordCamp Tampa 2015 #wctpa :: @jpetersen

    View full-size slide

  17. WordCamp Tampa 2015 #wctpa :: @jpetersen
    WHY NOT?

    View full-size slide

  18. WordCamp Tampa 2015 #wctpa :: @jpetersen
    flip style.css on its head
    INSTEAD

    View full-size slide

  19. WordCamp Tampa 2015 #wctpa :: @jpetersen
    smallest viewports are not a media query
    largest viewport is the last media query

    View full-size slide

  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

    View full-size slide

  21. WordCamp Tampa 2015 #wctpa :: @jpetersen
    desktop-first
    mobile-first

    View full-size slide

  22. WordCamp Tampa 2015 #wctpa :: @jpetersen
    mobile-first

    View full-size slide

  23. WordCamp Tampa 2015 #wctpa :: @jpetersen
    coming this fall

    View full-size slide

  24. WordCamp Tampa 2015 #wctpa :: @jpetersen
    Questions?
    Jesse Petersen
    @jpetersen

    View full-size slide