What does it take to bring an existing web platform the likes of Agent Studio and its 50+ different themes into the modern mobile first era? Quite a lot as we discovered. But with a solid plan of attack and the right tools we were confident we would not only get the job done, but deliver a experience our users would love.
Prior to breaking ground on the Agent Studio mobile project, we wrapped up work on the Agent Studio: Marketing Center. For that project we had set out to design and build it from mobile first perspective. Ideally with any mobile web project that you want to be starting from a blank slate. Unfortunately with Agent Studio we were starting with an established platform. The news isn’t all bad though as we were able to tap into the knowledge we had gained from working on the Marketing Center and apply it to Agent Studio.
But what do you with with sites that already exists and using many themes that again, already exist? We could have just started from scratch with a small set of brand new themes that were mobile friendly, limiting our users to those specific themes for their mobile needs. We believed that approach was not good enough.
Luckily for us we had spent some time months earlier converting our CSS into SASS and building what I like to call the “Agent Studio Templating Engine”. The primary driver behind that shift was to make maintaining our many themes much more streamlined. However, an intended side-effect of that shift was the ability to more easily add in mobile display rules.
The general premise is that in our SASS code we have a certain amount of business logic that is controlled by the theme’s configuration file. Depending on what variables are set in that file determines the final output of the CSS. The upside to this approach is that we can populate changes down to our many themes without having to update countless individual CSS files. This allowed us to more quickly plugin our mobile rules and populate them down to all the different themes.
The move to SASS has opened the door not only to mobile but to more possibilities down the road. If you have any questions feel free to leave them in the comments!