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

Responsive Web Bloopers - CSSConf Asia 2015 by Aysha Anggraini

C10dcb7b950404a39e682478155aee14?s=47 Ren Aysha
November 18, 2015

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.

C10dcb7b950404a39e682478155aee14?s=128

Ren Aysha

November 18, 2015
Tweet

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...
  13. None
  14. None
  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

  38. None
  39. None
  40. None
  41. None
  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