Style Designer: How We Did It

Overview

What is the Style Designer?
The Style Designer is a new feature in Yola’s SiteBuilder that allows you to easily configure the look of your entire site from a single panel. It allows you to set parameters on nearly every element of your site that will get applied to all pages. This saves a lot of time and frustration since you no longer have to go to every element on every page to make modifications.

How did we do it?
There are three major parts of the Style Designer:

1. The property framework. These are the properties that we store when you change the look of your page, for instance “Main Heading Font Color” or “Paragraph Text Font Family.” With the Style Designer, we introduced over 60 individual properties that can be set by the user.
2. The UI/widget framework. This is the how you interact with the properties. We created color selectors, sliders, dropdowns, and more so you can set the properties. It just wouldn’t be very pretty or useful if we gave you a bunch of text boxes to fill in.
3. The stylesheet (CSS) that lets us apply your style to your site. Once you set all of your properties, we have to apply them to your site. We created a special stylesheet, using the LESS framework that gives us a lot of flexibility when it comes to styling your site.

Properties

When you create a site with Yola, we populate it with several properties that keep track of data specific to your site. These properties include things like site name, font selection, banner image, and much more.

In creating the Style Designer, we added a lot of base properties to sites with which we could store all of your site’s style information. Some of these properties include “Main Header Font Family,” “Paragraph Text Font Color,” “Second Header Letter Spacing” and many more.

With the first release of the Style Designer, this list of properties is static. This means all sites receive the same properties, and we control those properties with the predefined widgets. As the Style Designer evolves, we will be adding additional properties, as well as style-specific properties.

Style-specific properties will allow our style authors to create custom functionality on a per-style basis. For instance, if a particular style has a landing page, you could potentially turn the landing page on or off. If a style has the option of vertical or horizontal navigation, we will give an option to configure it accordingly.

This will ultimately give our users nearly limitless customization options for their site.

Widgets and UI

Design Decisions
Once we had our properties configured, we needed a way to present them to our users. Many discussions were had over how to present them:

• Should we show them vertically or horizontally?
• What should our color picker look like?
• Should we show a “Close” button?
• What happens when a user clicks outside of a widget?

We also prototyped several variations before deciding on a vertical layout. The vertical design gave us a lot of flexibility in presenting our widgets and provided a good base on which to build a potentially limitless property list.

Widget Design
As we were having the high-level discussions on what we want the Style Designer to look and feel like, we needed to make some technical decisions. One of the bigger decisions was choosing a widget framework or rolling out our own.

We did a lot of research into different widget frameworks and decided on the jQuery UI Widget Factory. jQuery is an immensely popular JavaScript library known by nearly every JavaScript developer out there, so it will help with getting new developers onboard for further development the Style Designer. The UI Widget Factory provides a great set of base functionality that gave us everything we needed to hit the ground running.

All of our widgets are derived from a base widget. This allows us to add and improve functionality across all widgets by only modifying a small piece of code. In practical terms, this kind of inheritance allows us to develop and enhance widgets in minutes that would normally take hours to do individually.

Our widget system is still in its first revision, and it is already performing admirably. We have some exciting changes coming up that will take it to the next level.

Stylesheet

One of the more difficult problems to solve during the development of the Style Designer was how to be both useful and unobtrusive with our design. We had to make sure that we didn’t break sites that our users have spent time building. This proved to be quite difficult, as it is nearly impossible to account for all circumstances in CSS design.

Our solution was to craft a stylesheet that would cover the majority of our customers’ sites and refine it over time. We went through many revisions of our override stylesheet and tested it against users’ sites to see what broke. This was a very difficult and time-consuming process.

Unfortunately, even after refining our stylesheet as much as we could, it could still cause problems on our users’ sites, and that was unacceptable. We added the ability to disable the Style Designer so as to not affect the site at all. We now give all sites created before the release of Style Designer the ability to enable or disable the feature.

The Future

The Style Designer is an innovative project, and it is just getting started. We now have a solid framework to build on and a lot of ideas for where it is going. We’re watching how our users are using it and learning how we can improve interaction and customer satisfaction.

We’re really excited to see what our users are creating with the Style Designer and some creative uses of it that we never thought of originally. Keep an eye on the Style Designer, as we are constantly updating it and adding new features.