Incremental Responsive Redesign at Kogan.com

Incremental responsive rewrites allow sites and web apps to transition from desktop-only, without the need for ever stopping existing development. A speed-run on some techniques we used in deprecating m.kogan.com; tips, tricks, and grievous errors we made while becoming responsive.

slides [https://psimyn.com/talks/respond-16/#/]

Incremental responsive rewrites allow sites and web apps to transition from desktop-only, without the need for ever stopping existing development.

 

A speed-run on some techniques used in deprecating m.kogan.com; tips, tricks, and grievous errors made while becoming responsive.

 

Kogan.com, a site that sells household and lifestyle products, was on its third version in 10 years with a desktop version and an m.dot version.

 

After a couple of false starts, a plan was devised to make the site responsive incrementally, changing little things over time.

 

That allowed business to continue while the developer worked towards a responsive outcome.

 

Work small. Identify specific pieces of code you that need to be changed, and change them.

 

Aim to work undetected so you can just get on with it.

 

Add conditions and comments to your code to accommodate current and future needs.

 

When choosing breakpoints, there is no “best”. Just use some figures and work with them.

 

Do what works, whether people say it’s a hack or not. CSS itself is just a series of hacks.

 

Steal, adapt, variablise and mixinify.

 

Don’t ask for permission.

 

Even small changes can have big effects.

 

Those breakpoints you set? You’re probably going to change them.

 

Everything has flaws and quirks, including Flexbox.

 

You still have to test, and check for accessibility.