Have you ever published a blog post on WordPress, LinkedIn, or Atlassian Confluence? Perhaps you’ve used IBM’s Web Content Manager or IBM Connections? If so, you have used Ephox’s web-based rich-text editors. Not that you would know it: part of the appeal of both TinyMCE and Textbox.io is that they blend seamlessly into their host environment.
Unfortunately, the customization process has been far from seamless. TinyMCE’s skin creator required the integrator to set 86 variables. While Textbox.io asked that you locate and adjust 133 color variables sprinkled throughout 3000 lines of CSS. Luckily, this has changed in Textbox.io 2.0, released this week.
The new Textbox.io skin creator
The new skin creator in Textbox.io 2.0 allows you to customize the editor’s appearance by setting only nine color variables (not 133). It is without any doubt the simplest and most powerful skin creator in the editor market.
Textbox.io 2.0 ships with over a dozen pre-built themes. We designed these to complement popular apps and reflect modern, minimalist colors. The hardest choice will be deciding whether to have Textbox.io blend in or stand out!
How did we manage to pack all that power into just nine variables?
Frankly, it was hard.
As with a lot of codebases, Textbox.io’s CSS organically developed into a mammoth spanning more than 3000 lines. Before we started the project, the CSS contained 606 selectors with 133 hard-coded references to colors. Despite committing some heavyweight brainpower to the problem, we couldn’t reason with code that proved too complex to develop an abstract model. Imagine 3000 lines of this …
Yet, we got it done. Our first breakthrough came when we approached the problem from an unexpected perspective. Instead of trying to understand the CSS itself, we examined the effects the CSS had on the UI. This process simplified the problem space by orders of magnitude.
From the outside looking in
The nuances of the relationship between CSS selectors and colors were too hard for us to get our heads around—even with the support scripts we developed to automate the parsing of the CSS structure. The bottom-up approach was leading to a dead end.
From the perspective of the UI, however, the number of user-facing elements (and thus colors) was finite and relatively small. So we switched to a top-down approach and created an inventory of all the UI elements in Textbox.io. We designed a system of “index cards”, showing essential information for each element. Here’s an example of one of our index cards.
On completing the cataloging process, we discovered we were using a few too many shades of gray! Seeing the whole range of unique colors we used in our UI in a single grid (below), helped us to arrive at our next breakthrough.
Collapsing shades of gray
Recognizing that slight color variances between the range of “dark grays” or “light grays” in our CSS were not perceptible to the human eye, we decided to collapse similar colors.
Initially, our focus was to get the number of colors down to the absolute minimum required. We reduced 40 unique colors down to a core set of five key colors. You’ll see the reduced set below.
A well-executed collaboration
With the breakthrough we needed and a robust conceptual model created, it was time to rewrite the CSS. 3000 lines of CSS.
Our success refactoring the code and simplicity we achieved in our new skin creator was in part due to the close collaboration between our teams. We found the right solution (UX), implemented change (development), and adjusted tests (QA), in parallel during each sprint.
The close collaboration resulted in rapid development and higher quality code that would otherwise have been possible.
As an example, we discovered the previous (specific) choice of color masked visual (styling) bugs. On “interrogating” the color, problems in the CSS structure came to light. By bringing QA and UX into the conversation, we reduced iteration time and maintained the project’s rapid momentum.
Ridiculously good looking
It is with great excitement we bring you Textbox.io’s new skin creator. We hope you have fun making your personal editor ridiculously good looking …
I will be presenting some of the UX lessons learned during this process at the YOW!Connected Conference in Melbourne, Australia (October 5-6, 2016). Stop by and say hello if you are down there!