Crazy Idea
Hi everyone, I'm planning on executing a crazy idea with the company I work for. Basically, we want to launch a site that will change its CSS and JS every day. Meaning, the content will be the same but the look and feel of each version of the site will be completely different. I'm still trying to wrap my head around it all and considering if something like this would even be remotely possible with Webflow. My main concern is around content, how can we keep the content in all different sites synched with one another? I know services like whalesync exist but that's only for CMS content as I understand it. Any kind of guidance opinions on how to achieve this would be SO helpful 🙂
10 Replies
This sounds really cool! I have a couple questions that might help me answer some more:
1. Would this be on rotation? Or are we talking about 365 new designs a year
2. Is this a marketing site? A store? What kind of content is going to be displayed? (Static marketing content, or like changing product offerings)
3. When you talk about changing the JS, how much javascript changes are we talking about here? Like are you just changing a couple of animations from slide-up to slide-down or are you dynamically loading svelte components?
1. Not 365 but will want the ability to let’s say change the design for a day just for fun or for a specific activity.
2. It’s a marketing site, right now it’s not robust at all. It will probably start having mostly static content but will quickly get dynamic content in a few months.
3. Tell me more about svelte components. The idea is completely different js animations. One might have page transitions while another lots of scroll triggered elements
So svelte components were just an example of something advanced I could think of but basically you would create slots in your website where you would load dynamic content. Svelte is a cool javascript framework that lets you define html css and js all in one file (or module) that you would then load into your main app, similar to other frameworks (really high level description)
If i was going to do this I think what I would do is define as much of the content you'd want to change frequently in a cms item (could call the collection pages, and then each item would be a 'page', and you'd have 60 fields to put in data you'd want to change easily).
From there, build out the different versions of the pages (NOT CMS PAGES THOUGH, Just regular pages [home v1, home v2, etc]), but wrap the entire page in a collection list wrapper, and limit it to just one item and filter to the version of the page data you want to use. That way throughout your multiple pages, all of your data can come from a single cms item, so if you need to make updates it can just be in one place instead of across every version of the page.
To control which home page is active at a time, because you made them separate pages, not part of a collection list, you can just assign the different pages to be the 'new homepage' whenever you like
Cool ideas from @AtomicZBRA - do you already have designs done? And how drastic are the design changes?
Some low stakes and fun ways to change the look of the site could be altering css styles based on time/day… I’m thinking things like hue rotation, fonts, etc. If you want to go more big and drastic then Patrick’s ideas with components and slots probably make more sense.
You could also look in to an AB testing tool like VWO. They have a pretty cool chrome extension that lets you alter lots of css and then ab tests on it. You can customize how those tests are run too. So you would basically have a default site but ship design changes managed by VWO.
I’d recommend making sure you have a system locked down in your design phase (before development) otherwise your site will likely become complicated to manage … but maybe not 🙃
Oh A/B testing is so smart! Humblytics also have a cool and easy to implement AB tool as well! I haven’t used it but he’s a fellow Webflow dev and it looks dope
Wow thanks a lot guys! two great options I had not considered! for @AtomicZBRA idea:
1. Keeping everything in one project has a lot of benefits but are there any implications when it comes to all the CSS JS and fonts I will have to load into the webflow project for every version of the homepage?? imagine having 40 different of this versions
2. If the entire page is a CMS item, how would I control things like blogs or careers items that need to be CMSs? Think it starts to get complicating if we have to support all that
@Web Bae I do not have the designs yet but the changes will be drastic! The best way I can describe it is: imagine a design competition where 10 different designers have the same html structure, but everything else is up to them to decide. That's kind of how different each version of the site would be.
Def looking into AB testing though! thanks a lot 🙂
So you would just have separate cms collections for blogs or careers, similar to the page collection.
With the styles and fonts though, like @Web Bae mentioned, this will require a strong style system in place to try to minimize the amount of complication as much as possible! Basically combining all those website styles into one, I would try to find overlap as much as possible.
Kind of like, if you have 3 pants and 3 shirts, you can make 9 unique outfits. Really depends on how different the designs are though
Okay yeah I get the different cms collections but what if I had an About Us page where I want to display the careers??
Like the about page would also have variations right? You could have a multi reference field in your pages collection that ties it to other collections, that way you could nest a collection list inside your pages and pull that reference data
Yeah I think nesting would work but I can see it getting really messy at some point! Thanks a lot for the insights 😄