Putting Mobile First

Putting mobile first is no longer optional, it's a necessity. Originally presented at Lift Interactive during a Monday meeting.

Transcript

1. PUTTING MOBILE FIRST a presentation/talk by Colby Ludwig
2. THE IDEA OF PUTTING MOBILE FIRST IS MORE RELEVANT NOW THAN EVER. 88% of U.S. adults own a cell phone of some kind, and 55% of those owners use their phone to go online. 64% of cell-mostly internet users mention convenience and availability as to why they primarily browse with their phones 74% of mobile users won’t wait more than 5 seconds for a page to load
3. device screen fragmentation A LOT OF ISSUES WHEN DEALING WITH THE MOBILE WEB. carrier network latency page file size processor limitations UI fluidity and native experiences prioritization of content how to deal with ads maintaining visual hierarchy on smaller screens length of content engagement paradigms
4. device screen fragmentation A LOT OF ISSUES WHEN DEALING WITH THE MOBILE WEB. carrier network latency page file size processor limitations UI fluidity and native experiences prioritization of content how to deal with ads maintaining visual hierarchy on smaller screens length of content engagement paradigms
5. TYPICAL WORKFLOW
6. TYPICAL WORKFLOW 1. Wireframe desktop layout
7. TYPICAL WORKFLOW 1. Wireframe desktop layout 2. Mockup desktop layout
8. TYPICAL WORKFLOW 1. Wireframe desktop layout 2. Mockup desktop layout 3. Sketch mobile layout
9. TYPICAL WORKFLOW 1. Wireframe desktop layout 2. Mockup desktop layout 3. Sketch mobile layout 4. Develop desktop prototype
10. TYPICAL WORKFLOW 1. Wireframe desktop layout 2. Mockup desktop layout 3. Sketch mobile layout 4. Develop desktop prototype 5. Discuss
11. TYPICAL WORKFLOW 1. Wireframe desktop layout 2. Mockup desktop layout 3. Sketch mobile layout 4. Develop desktop prototype 5. Discuss 6. Iterate how things should scale back
12. TYPICAL WORKFLOW 1. Wireframe desktop layout 2. Mockup desktop layout 3. Sketch mobile layout 4. Develop desktop prototype 5. Discuss 6. Iterate how things should scale back DOESN’T WORK
13. HOW? WE CAN’T DESIGN FOR EVERY DEVICE.
14. LET CONTENT DICTATE BREAKPOINTS. ! BREAK UP CONTENT NATURALLY, NOT BASED ON SCREEN SIZE.
15. THINK OF A PAGE AS AN OBJECT, AND PRIORITIZE THE CONTENT INSIDE OF IT. ! Title Author Comment Count Content Author Detail Related Posts Comments Blog Post
16. DO: INVOLVE DEVELOPERS IN THE DESIGN PHASE AND LET THEM GET THEIR HANDS DIRTY TO SKETCH OUT A MOBILE LAYOUT.
17. 74% of mobile users won’t wait more than 5 seconds for a page to load
18. 74% of mobile users won’t wait more than 5 seconds for a page to load CRAZY.
19. MOBILE NETWORKS ARE SLOW. ! MOBILE DATA IS EXPENSIVE. 1MB ~$0.65CAD
20. CONSERVE DATA.
21. HOW?
22. TECHNICAL, CODE-BASED WAYS ! 1. Minifying – jscompress, minifycss 2. Caching – CloudFlare, Varnish servers, etc. 3. Compression – gzip, ngx_pagespeed, ImageOptim
23. OR 1. SVG-based artwork 2. CSS3 graphics
 (buttons)
 (logos)
 (R2D2) 3. Be trendy and utilize flat design!
24. 88% of U.S. adults own a cell phone of some kind, and 55% of those owners use their phone to go online.
25. 88% of U.S. adults own a cell phone of some kind, and 55% of those owners use their phone to go online. NOT ALL THAT CRAZY, BUT IMPORTANT.
26. MAKE EXPERIENCES AS NATIVE AS POSSIBLE. ! FOLLOW MOBILE PARADIGMS.
27. MAKE EXPERIENCES AS NATIVE AS POSSIBLE. ! FOLLOW MOBILE PARADIGMS.
28. MAKE EVERYTHING BUTTERY SMOOTH. 1. Conditionally load all the things! 2. Remove tap delays with polyfills.
 (https://github.com/ftlabs/fastclick)
 3. Lazy load images.
29. whiteboard.is
31. PROGRESSIVE ENHANCEMENT ON STEROIDS. 1. Lightened content load on mobile 2. Smaller background GIF on mobile 3. Less images
32. GREAT EXPERIENCE, NO MATTER WHAT DEVICE.
33. LET’S RECAP.
34. device screen fragmentation A LOT OF ISSUES WHEN DEALING WITH THE MOBILE WEB. carrier network latency page file size processor limitations UI fluidity and native experiences prioritization of content how to deal with ads maintaining visual hierarchy on smaller screens length of content engagement paradigms
35. content prioritization IT’S NOT AN EASY TASK. device sizes page file size device limitations page speed more involved design process mobile network latency ever-changing mobile technologies client-side rendering mobile-first layouts
36. BUT IT’S NO LONGER OPTIONAL.
37. FIN.