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.

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