Skip to main content
Home  ›  Blog

Automatic Polymorphism for Multi-CSS-Frameworks and Open-Heart-Surgery

Polymorphism is much easier with 2sxc 11 - allowing you to do A/B testing, develop on a live system without breaking the output users see and targeting multiple CSS-Frameworks. 

What is Polymorphism?

It always starts with a unit (entity) of information like a blog-post or a combination of text and images. Then we want to display it in a nice way. In HTML this is achieved using a combination of html-tags, css-classes and data placeholders. This html-template has a specific shape (morph). Our goal is to provide many (poly) of these templates, depending on rules that we define. The most common are to vary the template by CSS-Framework of the theme. At other times we want to have a public template, and work on a private template which will still generate errors as we work. Here's a short video explaining how it's used in the content-templates: 

Polymorphism for targeting multiple CSS-Frameworks

Imagine your website is currently running on Bootstrap 4 but you're preparing a new theme using Bootstrap 5 (or Foundation 6, Materialize, UIKit or whatever). During this transition you have 2 critical challenges:

  1. How to test/develop your site with the new theme, without breaking the live output
  2. How to migrate only some pages to the new theme - showing stuff used in both old an new

Other scenarios are when you create redistributable templates or apps which should just look great on the target system. That's a common challenge we have with our Apps and Content-Templates which are installed on any DNN where we don't know what will be used there. 

So let me walk you through how this is done: Imagine you have a template showing something - let's call it /_Employees.cshtml and it's output is meant for Bootstrap 4. It's in use, so this is what people see as of now. 

The next step is to create a folder in this 2sxc-App (or Content) with the short-code of the CSS-Framework your targeting. The recommended list can be found on the Koi website, but you could also use your own code. In this example, we'll use "bs5". Then copy your file to it, so you'll now have:

  1. /_Employees.cshtml
  2. /bs5/_Employees.cshtml

You can now change the /bs5/_Employees.cshtml to output what you want, and now we just need to make sure that 2sxc will automatically switch to that, if the theme uses Bootstrap 5. To do this, let's follow this checklist:

You can verify that it works by writing something into the /bs5/_Employees.cshtml and using it in the Bootstrap 5 theme, and everything will work 💪.

Polymorphism for Open-Heart-Surgery

Whenever we work on a live site we call this Open-Heart-Surgery (OHS), because every mistake in Razor, WebApi or JavaScript results in users seing errors until it's fixed. But the truth is, we need to do this quite often - and I'm convinced so do you. 

So the solution is to use Polymorphism based on user roles instead of CSS-Frameworks. Basically end users should see the live, tested code while you're working in staging making changes which only you can see. Once you're certain it works, you can then copy the entire staging to live and it's in production. Here's how to set this up: 

Polymorphism for A/B Testing

A common marketing scenario is to test various pages (mostly landing pages) to see how convincing they are, aka which messages, Call-To-Action (CTA) buttons have the biggest impact. Usually the flow looks like this:

  1. Create two or more Marketing Campaigns (like A: "Agressive Marketing" vs. B: "Emotional")
  2. Assign website users to a group A or B - usually by setting a cookie to "mark" them
  3. Ensure that each groups sees what they should
  4. Measure their behavior / responses using Google Analytics
  5. Analyse the outcome (maybe the old audience liked A better, maybe B was always better, etc.)
  6. Decide what to optimize (maybe ditch "Aggressive Marketing" and keep "Emotional" and create two Emotional campaigns)
  7. Then start anew with this cycle

Each of these steps can be trivial or complex - mostly depending on your budget and amount of users. Because you need a lot of resources to do this, and you need a lot of traffic to really get useful analytics. 

Polymorphism can help in this process at the level of presenting the same content in different ways. Now there is no single way to do this, so we can only provide a general guideline here. 

As you can see this is just a very basic scenario. You can do a lot more, but A/B testing is hard and needs proper planning and implementation. 2sxc can help you organize your code and data, but you will still need to make all the decisions - so it's really not a quick-and-dirty thing. 

tl;dr

In summary - Polymorphism in 2sxc 11 is fully automated for CSS-Frameworks and Open-Heart-Surgery, but not yet for A/B Testing. Stay tuned - this too will get more automated soon 😉. 

With 💘 from Switzerland,
iJungleboy


Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see github), an open source module for creating attractive content and DNN Apps.

Read more posts by Daniel Mettler