cPanel is well-known as the web hosting industry's most reliable website management system and "control panel". Our team was challenged with the task of creating a basic page builder, allowing new customers to easily create a basic webpage right out of the gate. We wanted to have the process of creating a page to be simple, as in up in running in seconds without even needing much of any data, while still feeling personalized and visually appealing.
To help ensure the design was streamlined, we focused on only the most essential components that would appeal to a diverse group of niches. With ease of use and simplicity in mind, we decided to create three basic templates to introduce cPanel's new product: coming soon countdown, vCard, and an agency page.
Check out the project in more detail here!
We designed the backend variable system just as much as we did the frontend visitor-facing views; a product that served both cPanel's customers and their customers' customers. Each feature was focused on creating an easier user experience. To help establish our distinct styles, we put context in the designs. We used real life examples in order to help users visualize what their site could be from the start. For instance, a vCard for a developer, a countdown page for the grand opening of a restaurant or a simple landing website for a fitness center. By swapping colors, hero images, and fonts, users are able to completely change the look of their site and achieve a personalized look. We created a comprehensive photo library that would appeal and apply to many people in various fields.
The UI Framework
We wanted to create an extensible framework for cPanel that allowed for multiple themes and would choose sensible defaults when information was not provided. We built a React component library containing all required functionality to help boostrap the project. It contains things such as buttons, links, JavaScript functions, and more to streamline building out web pages.
The framework was written with “themeability” in mind. It uses the provided configuration file to dynamically generate relevant templates. The framework allows for a creation of hierarchy of themes with child themes that are able to override parts of their parents without needing to redefine everything in the parent theme. The styling for the framework's components is calculated with Javascript at runtime. Each component gets a unique hash assigned to it, along with it's styling, which allows for Javascript to correctly handle cascading of the styling between parent and child themes. This also allows Javascript to dynamically control styling, providing a richer user experience. An abstraction of a “condition” was created for when stateful or conditional styling should apply. This allows conditions to be applied based on any React props or state. For example, to make a button big, the big condition would be applied. These conditions are intentionally defined in a style file to allow child themes to create conditions without having to modify or override a parent’s component.jsx file.
We composed the framework's components into custom components for the cPanel project. Slide components were used to remove the need for a page manager and allow users to enjoy a single page application experience with animations.
The Templates
To simplify future feature additions and create an extremely performant experience for users, we used React, a Javascript framework created by Facebook, as the basis of the framework we created. React was chosen because it declaratively defines user interfaces. This means that you can declare what you want the page to look like at any moment in time and React will handle modifying the current page content to be what you declared. Choosing React simplified the dynamic and interactive user experience and allowed for the framework we created to be easier to maintain. We used Webpack, a module bunder, in order to create Javascript bundles for each theme. This reduced the overall size of the content without changing functionality, allowing for a quicker load time.
A configuration file is read in by the resulting theme and used to generate the entire user site. This configuration file is generated by the cPanel site builder and allows the information about the user’s site to be used when generating pages. The goal was to have each component and page make sensible assumptions whenever possible, in order to simplify user configuration of the site.
It was a pleasure working with cPanel and our team not only enjoyed the challenge that was laid out to us but the process to the final solution as well.
