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

Mobile-First Design: How and Why Mobile Design Comes First

Mobile-First Design: How and Why Mobile Design Comes First

A complementary look at my WordCamp Tampa 2015 “Mobile-First Development: Why and How” talk, we’ll look at the design aspects of what mobile-first is and what it entails. We’ll look at examples of great designs and some pitfalls to avoid, as well as my pet peeves as a mobile consumer of content.

How many of us use services like Pocket to get a nice view of the content because the site owner didn’t account for mobile or did a poor job of it? I Pocket over 1.5 million words last year avoiding poorly-designed mobile sites. I believe the key to advancing our site designs is to emulate the best apps we use on our devices.

Jesse Petersen

November 14, 2015
Tweet

More Decks by Jesse Petersen

Other Decks in Technology

Transcript

  1. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    Mobile-First Design
    why :: how
    Jesse Petersen
    @jpetersen
    #wcorlmobilefirst

    View full-size slide

  2. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    I believe the key to mobile-first
    progress lies in good apps

    View full-size slide

  3. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    how many of you are
    addicted to your phone?

    View full-size slide

  4. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    when we consume news
    on mobile web…

    View full-size slide

  5. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  6. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    news sites suck, so…

    View full-size slide

  7. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  8. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    Pocket ALL THE THINGS

    View full-size slide

  9. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  10. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    consume rss feeds via apps

    View full-size slide

  11. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  12. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    good twitter clients can do everything

    View full-size slide

  13. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  14. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    keep popular actions down low

    View full-size slide

  15. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  16. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    full-featured email client

    View full-size slide

  17. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    work all day from a phone

    View full-size slide

  18. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  19. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    freaking LOVE BUFFER!

    View full-size slide

  20. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  21. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  22. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    keep your friends close

    View full-size slide

  23. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  24. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    last week was election week
    now for a website

    View full-size slide

  25. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  26. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    REALLY?

    View full-size slide

  27. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  28. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    MOBILE-FIRST?
    let's get on the same page

    View full-size slide

  29. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    what that is depends
    on your angle

    View full-size slide

  30. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    mobile-first design
    =
    designing with the smallest mobile
    experience in mind first

    View full-size slide

  31. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    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

  32. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    mobile-first

    graceful degradation of desktop design
    =
    progressive enhancement

    View full-size slide

  33. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    my mobile pet peeves

    View full-size slide

  34. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    hamburger menu icon

    View full-size slide

  35. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    hamburger menu icon
    http://mor10.com/hamburger-bad

    http://exisweb.net/menu-eats-hamburger

    https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus

    View full-size slide

  36. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    large font size, tall line height

    View full-size slide

  37. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    heavily indented nested comments

    View full-size slide

  38. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    embedded content that
    prevents scrolling beyond

    View full-size slide

  39. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    mobile-first beginnings

    View full-size slide

  40. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    http://deep.design/mobile-first

    View full-size slide

  41. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    FOR NINE YEARS
    WE HAVE KNOWN THIS
    DAY WAS COMING

    View full-size slide

  42. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    AT LEAST SOMEONE DID…
    (Luke Wroblewski)
    http://www.lukew.com/ff/entry.asp?933

    View full-size slide

  43. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    in 2009, he actually saw mobile as an
    enhanced experience, BACK THEN

    View full-size slide

  44. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    MY FIRST RESPONSIVE SITE:
    MARCH 2012

    View full-size slide

  45. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  46. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    MY FIRST MOBILE-FIRST SITE:
    3Q 2013

    View full-size slide

  47. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  48. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  49. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    where we are now

    View full-size slide

  50. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    how the menu button should be

    View full-size slide

  51. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    the header shrinks upon scrolling

    View full-size slide

  52. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    header gets out of the way

    View full-size slide

  53. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    how menus should work: easily

    View full-size slide

  54. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    let’s look at good sites
    in the wild

    View full-size slide

  55. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  56. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  57. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  58. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  59. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst

    View full-size slide

  60. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    now I want your questions
    Jesse Petersen
    @jpetersen

    View full-size slide

  61. #WCORL :: @jpetersen
    WordCamp Orlando 2015 #wcorlmobilefirst
    Jesse Petersen
    @jpetersen

    View full-size slide