We recently completed a web design project and found it to be particularly challenging due to the nature of the project. It was a bit different in it's own way, like many are, for specific reasons.
This project was to help redesign a blog using the Hubspot Content Optimization System (COS). It's called this due to the reference to a content management system (CMS) but allows optimization for digital marketing.
The project was challenging because the new design manager was recently rolled out. So we had to go through the learning process while we were designing the blog. Our first approach was to use a template already made and just make adjustments for branding. However, during the course of development things changed quiet drastically from the original plan.
We thought we were going to be able to save a lot of time with the design process by using something we felt was a good approximation to our vision. We found something that looked great to start with and set it up in the new design manager.
At first glance the design looked great. We started looking at the way the template was designed and cloned all the files for our branded template. The template had attached style sheets and javascript files. These had to be reassigned in the template itself so the original template wasn't referenced.
The template had one attached style sheet (style.css) which is a standard file to use for Cascading Style Sheets (CSS) styling. The thing to realize is every template has a unique style.css which is originally hand coded by a web designer. There are general standards for sections and structure but the nature of CSS is that styles override each other. So you may have a style for an H2 heading in one place but changed somewhere else in the code. The tools we use to view these styles are the Google Chrome and Firefox browser inspectors. These tools allow us to see how the browser parses all the code and how it's computed.
Even with these tools it takes time to decipher the code and find the places where we need to make updates to render the design we want.
The COS is built with shortcodes that are variables that can be used throughout the template. This is a proprietary language that only works on Hubspot. It is based on another language called Jinja but doesn't work anywhere else. So this must be learned if working on the COS for the first time.
Dynamic elements in the template may be coded with additional javascript to control behavior on the website. These files may be individually attached to modules in the template.
File manager keeps all the files used in the template. The underlying structure of pages are controlled by modules in the COS responsive grid. This allows the system to control the layout for fluid responsive modes. This is a fancy way of saying how the design works on different devices.
In addition to styles being code in style.css there may be other code lurking inside modules which are "inline" and affect the module design.
You can code HTML for the template itself. Although difficult to find creates another dimension for modifications.
The Hubspot COS design manager is a powerful tool that allows developers and designers ultimate control and extensibility for web design. It is however a very complex system that requires a high level of skill and experience to implement.
Starting with an existing template may be beneficial or it may be costly. Not knowing how the template was engineered and coded we may find that the template was coded badly, not following standards and best practices.
As a web designer who specializes in CSS coding I commonly find badly coded style sheets. It's the nature of the language I believe due to the way it is constructed. By having the code override previous declarations it's a rather messy process.