HubSpot finally made their New Design Manager public. We've actually been using it for awhile now while it was still in closed beta. We've built a few sites now using it and have learned a lot of best practices and new ways of doing things.
The new design manager is one of the biggest changes HubSpot has implemented in a long long time. It's not just a new paint job, it changes how we build sites.
What are the core differences?
- Folder and file structures are now fully customizable - organize things in the way that makes the most sense to you.
- Custom Modules
- They now have their own CSS and JS.
- Repeatable fields, and groups.
- New field types like color, number, page, blog, and more.
- fields can be conditionally shown.
- There is a new version of the design previewer which allows you to test the individual fields and the module out of the context of a template.
- Templates
- hubl modules are no longer a thing, custom modules have to be used instead.
- individual custom module options can be edited at the template level.
- All css and JS is combined and minimized together in 1 file for css and 1 file for JS.
What we've learned
Our best practice for Custom Modules
We've always been developing our custom modules in a way that made them easier to pull over to other sites and re-implement but the new custom modules make this a whole lot easier.
The way we design custom modules: We build them first with a basic, somewhat generic design. We focus on the functionality. We keep all of the core CSS and JS inside the module. Then we use a site wide css file to modify the generic design to fit the clients look and feel.
This allows us to focus our attention on the details of the styling rather than the functionality, every time we use the module. This approach also allows us to take the same base module and continue to update it, adding features over time, allowing it to continuously improve. We also get the peace of mind that browser compatibility tweaks were taken care of at the earlier functionality focused stage. So we can be faster toward the end of a project when checking browser compatibility and fixing any differences.
This methodology has enabled us to significantly cut our development time, and put more energy into making each module higher quality and more useful.
The new Design Manager beta is still in beta
“The new design manager adds a lot of time saving conveniences, especially on the developer end. It could use some improvements and continuous de-bugging.”
Having built a few websites now using the new design manager, I can say the new design manager is still in beta. The new design manager adds a lot of time saving conveniences, especially on the developer end. It could use some improvements and continuous de-bugging. We are very excited for the production version. Nearly every day when working on the sites we were building with it, I discovered a new bug. The bulk of the issues aren't developer facing, they're marketer facing, which needs to be addressed. When us developers see issues, we find ways to work around them and are likely to report the issue pretty quickly. Marketers see issues - they assume it was the developers made a mistake, and often they wont report the issue, or won't know whether the issue should be reported to the developers or HubSpot. That being said, these are the risks we developers run when running beta programs.
Some of the issues we encountered:
- Renaming modules that have already been added to templates or pages, often will cause the modules to display the wrong name creating client confusion.
- Sometimes saving modules will completely break the editor making it so you can't take any actions without refreshing.
- Copying custom modules to different portals sometimes carries extra baggage along that it shouldn't, like domain level css files.
- Strange caching issues where editing css and js files and publishing your changes, you may not see your changes for several minutes sometimes longer.
- Converting a page from a design manager 1 template to a design manager 2 template - had a pretty big issue where you'd actually cause the page to somehow not have a template associated with it.
- Content staging - swapping a page template from a DM1 to DM2 template would do the above AND cause the page to not be staged but be a new copy of a page at a live URL, possibly overwriting a real page if you're not careful.
- There have been some other smaller issues with the editor as well.
We felt the positive benefits of the new Design Manager outweighed these temporary issues in our case and continue to build new sites using the new Design Manager, as we want our clients to be using the best tools possible.
Our stance overall on the new design manager
Developers and Agencies - If you don't have an ongoing agreement to maintain the site for your client, you may want to consider waiting until the new design manager is out of beta. Most of the bugs I mentioned, I reported and HubSpot was quick to patch. We knew going in that it was still in beta, we're used to using betas, and the projects we used it on we planned to continuously support long term.
If you are a company and already have a HubSpot site, consider waiting for the new design manager to launch. If you're ready for a full redesign of your site or are ready to dedicate several hours making your site and modules compatible then the new design manager could be used.
Overall, we love where the new design manager is headed, and think HubSpot will work out the kinks rather quickly. Having talked with their developers I know they are just as excited about it as we are. Given the new features and capabilities, we are excited to make the transition over to the new version.
In fact we have a good idea from a good source - when HS expects to release it to everyone:
“[Design Manager 2 will rollout to everyone] Most likely in Q2 2018”
Understand this quote while it is from a good source, it's not to be taken as an official HubSpot announcement. It is not law, and subject to change, it's just what their internal goal is.
Looking for developers that stay ahead of the curve? Contact us.
