Kogan.com are going through a responsive web design.

• Version three of their site (K3) has been around for ten years.
• Kogan had a really good, really light weight m-dot.
• The devs hated developing in two code bases
• Wanted:
  • Feature parity
  • Responsive design
  • Speeeeeeeed
• They started with the aim of a complete refresh.
• It became apparent that a full refresh was not the right approach
• After throwing out the full refresh, they took a step back and considered their site.
• The new approach: responsive, keep it working
• Coding is like Jenga: you change one thing a completley different Jenga tower collapses.
• Started small, bring in people once it gets big enough that they’ll notice
• On a narrow screen, you couldn’t see the add to cart button. <- important!
• Add code to be deleted once the site is switched to responsive (add a min-width and max-width, remove min-width later)
• Pick random breakpoints, they will change as the site develops.
• Add a test mode while working on the css but before the site goes responsive.
• Just because someone on the net says something is a hack doesn’t mean you shouldn’t use it. Floats Vs Flex-box for layout. Everyone on a team knows how the floats works

CSS is a hack

• Don’t make an overriding class, you’ll just need to add be twice as specific as you want to change things, eg body.k4
• Avoid nesting, use classes.
• Put Sass variables in the same file in which you use them.
• Know when to steal, eg steal @snookca’s accessible visibility code.
• In the early dev stage, don’t worry about poor performing selectors. Fix them later, they’re more performant than the 5 meg of ads on every page!
• Hide code, make it hard to change CSS file that are only intended to be deleted from.
• Use component media queries, nest the media queries within the component.
• Choose a naming convention, it doesn’t matter which one.
• Needed to build a theme for a new brand, we needed to change colours.
  • Turns out $red was not a great variable name
  • Went a themify mixin
• m-dot site was turned off a few weeks ago, no change to conversions.