Responsive Web Bloopers - CSSConf Asia 2015 by Aysha Anggraini

How hard can responsive web be? It sounds simple: design for a number of screen sizes and just throw in several media queries and your website is now "responsive"! Unfortunately, this is not the case and responsive web hasn't made our job easier. Adopting responsive web design will force you to change your design, development, and testing workflow. Problems may also arise in different stages of the workflow. In this talk, we will talk about responsive web blunders at Viki, how we overcome it, and some tips on how you can avoid it.

Transcript

1. Responsive Web Bloopers @renettarenula Aysha Anggraini CSSConf Asia 2015
2. renaysha.me codepen.io/rrenula @renettarenula
3. Motion design Physical Computing HTM, CSS,JS Designers & Developers Workflow Working Together Testing & Debugging Strategy Writing Code Testing Site
4. Lack of collaboration between designers and developers Blooper #1 - Working Together
5. Designer Developer High-fidelity design mockups PROBLEMS FOUND!
6. Designer Limitations Fancy animations Big images Beautiful, intricate layouts
7. Developer’s Expectation Large screen devices Small screen devices
8. Large screen devices Small screen devices Designer’s Expectation
9. Mockups Performance Interaction types
10. “The Correlation between screen size and input type is quickly blurring. There is no longer any guarantee that small screens equal touch and large screens equal mouse.” -Tom Maslan
11. Developer Shortcomings Discovered problems late Hacks, shortcuts, library..ugh Last minute feature
12. Design Mocks A lot of time loss here Feature Request? No time for it Test & Validate Develop & Test Beta Test Bug fixes, etc. Rollout! Previous Workflow...
15. Collaborative Workflow!
16. Designer Developer Low fidelity mockups/sketches Prototype! Feedback (What works/What doesn’t) High-fidelity design mockups
17. Prototype Not necessary to prototype everything Build Fast, Build Ugly
18. Design Mocks A lot of time loss here Test & Validate Develop & Test Beta Test Bug fixes, etc. Rollout! Prototype Less time loss Feature Request
19. Blooper #2 - Writing Code Lack of planning on development
20. Nested media queries Un-nested media queries Inconsistent ways of writing media queries!
21. Non-mobile first CSS Mobile-first Inconsistent paradigm in writing CSS
22. Coding Style Guides Naming Conventions Nesting levels File Organizations Media Queries
23. Naming Conventions BEM OOCSS SMACSS
24. CSS Guidelines by Harry Roberts http://cssguidelin.es/
25. Sass Style Guide by Chris Coyier https://css-tricks.com/sass-style-guide/
26. Sass Guidelines by Hugo Giraudel http://sass-guidelin.es/
27. Beware of frameworks CSS Bloats Rigid styling Unsuitable frameworks
28. Browser & Device Issues Target Browsers & Devices Design within constraints Device specific issues
29. Device Bugs by Scott Jehl https://github.com/scottjehl/Device-Bugs
30. Blooper #3 - Testing Site Testing late on devices and relying too much on emulators
31. Device Testing Bugs & Quirks on Mobile Testing Interactions
32. Device-specific bugs
33. Build all UI components Deploy to staging QA Test Previous Workflow.. Deploy to Staging Trivial Bugs!
34. Better Workflow.. Build a UI component Connect local env to device Repeat Staging & QA Test Trivial Bugs! Reference: http://stackoverflow.com/questions/11005540/localhost-running-on-mac-can-i-view-it-on-my-android-phone
35. Localtunnel ProxyLocal
36. Ghostlab
37. Synchronize testing FTW! GIF credit: Addy Osmani
42. Lazy loaded items False Positive Slow
43. Lazy loaded items & False Positives Slow Increase Timeouts Browser Heights Limit Testing
44. We’re not completely done yet... …but thank you! renaysha.me codepen.io/rrenula @renettarenula