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.

16b4c5f853c17d7dedf86cc6e39441df?s=128

Jesse Petersen

November 14, 2015
Tweet

Transcript

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

    :: how Jesse Petersen @jpetersen #wcorlmobilefirst
  2. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst I believe the

    key to mobile-first progress lies in good apps
  3. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst how many of

    you are addicted to your phone?
  4. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst when we consume

    news on mobile web…
  5. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst

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

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

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

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

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

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

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

    can do everything
  13. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst

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

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

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

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

    from a phone
  18. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst

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

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

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

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

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

  24. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst last week was

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

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

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

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

    on the same page
  29. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst what that is

    depends on your angle
  30. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst mobile-first design =

    designing with the smallest mobile experience in mind first
  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
  32. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst mobile-first ≠ graceful

    degradation of desktop design = progressive enhancement
  33. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst my mobile pet

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

  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
  36. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst large font size,

    tall line height
  37. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst heavily indented nested

    comments
  38. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst embedded content that

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

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

  41. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst FOR NINE YEARS

    WE HAVE KNOWN THIS DAY WAS COMING
  42. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst AT LEAST SOMEONE

    DID… (Luke Wroblewski) http://www.lukew.com/ff/entry.asp?933
  43. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst in 2009, he

    actually saw mobile as an enhanced experience, BACK THEN
  44. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst MY FIRST RESPONSIVE

    SITE: MARCH 2012
  45. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst

  46. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst MY FIRST MOBILE-FIRST

    SITE: 3Q 2013
  47. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst

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

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

    now
  50. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst how the menu

    button should be
  51. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst the header shrinks

    upon scrolling
  52. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst header gets out

    of the way
  53. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst how menus should

    work: easily
  54. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst let’s look at

    good sites in the wild
  55. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst

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

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

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

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

  60. #WCORL :: @jpetersen WordCamp Orlando 2015 #wcorlmobilefirst now I want

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