HubSpot Templates: the Good, the ¯\_(ツ)_/¯, and the Complicated
AJ LaPorte#Design Advice, #HubSpot
Note: This article has been updated to reflect the new release of the Design Manager Version 2 (referred to as DMv2 in this article).
The HubSpot marketing automation platform (MAP) and Content Management System (CMS) provide some great tools for creating website pages, landing pages, emails, and much more. They've worked to make their systems easy and intuitive to use, while still providing robust tools that developers can take advantage of. With the new release of the DMv2 HubSpot has taken templating to the next level.
In a previous post, we discussed the pros and cons of using premade templates vs coding your own templates inside of Hubspot's COS for email. Today, I would like to take a top-level look at the HubSpot Templates by shining some light on the good, the “meh”, the complicated, and everything in between when it comes to templating in the HubSpot CMS.
AVAILABLE TEMPLATES IN HUBSPOT
Let’s begin by looking at the options available to you when creating a new template in HubSpot. Similar to the older Design Manger (DMv1) when clicking “New > New File” option in HubSpot you brought to popup that allows you to create various kinds of files inside of the HubSpot DM. Today, we are going to focus on the “Drag and Drop” and “HTML & HubL” options.
The Drag and Drop Template Options
When beginning to create a template using the drag and drop editor, you will be given options of choosing which template type you want to begin building. These include your basic templates of Blog, Email, and Page while also including System Templates of Error Page, Password Prompt Page, Email Subscription Preferences Page, Email Backup Unsubscribe Page, Email Subscriptions Confirmation Page, and Search Results Page (Did you know HubSpot has their own built in search now?).
In the old DMv1, the types of pages we could build was displayed for us in the first step of the creation of the template. Because of the new updates HubSpot has done, they have broken this step out a bit more. If you haven’t explored (or upgraded) to the new DMv2, I highly suggest doing so. This will give you way more flexibility in the templates you build and will make your development processes much more streamlined.
Let's talk Page Templates (Page, Blog, and System)
The Good
In the past DMv1, you didn’t really get much flexibility when using the drag and drop templates to create your site. With this, the best option was always to roll your own template but using coded files (or in DMv2 – HTML & HubL Template type). With the new DMv2 (and the ability to build some amazing custom modules) you are really at a coin flip as to which is the best one to use. Both options offer many ways to customize the templates and tailor them to your site’s needs. The best option really depends on your choice of layouts and how may breakpoints you are looking to leverage in your responsive design (more on this next section). One nice addition to the pages is the ability to view all the options of the page in the right-hand pane of the DMv2. This is covered more in our review of the DMv2.
The ¯\_(ツ)_/¯
We’d love to say that the items we mentioned in this area have been bumped to the good, however, with all the new updates in HubSpot, their scaffolding system is still using the old foundation of Twitter Bootstrap Version 2. Updating this to the newest bootstrap is still being asked/discussed, but no new developments have been made in the area yet. If you’re looking to use a more fluid and responsive layout (with multiple breakpoints) your best option is to create page templates using the “HTML & HubL” option.
On this same note, the issue of the Blog Comments Module having no options to configure is also still persistent. We would love to see the ability to see this module broken out much like the “blog content” module which shows you the loop used to output the information on the page. This would give users the ability to further customize the comments and not be stuck in a (what I would call) outdated style of showing comments.
What we said in 2016...
While the drag and drop builder allows you to create a responsive layout with ease, the responsive scaffolding framework is based on Twitter Bootstrap. Granted, while this should be considered a “Good” point, the fact that it is based on bootstrap 2 holds back the full potential of their scaffolding. Unfortunately, the chances of HubSpot upgrading to the newest scaffolding of bootstrap do not appear to be likely, as the move from the
<div class="span*">
classes of bootstrap 2x over to the
<div class="col-md-*">
classes of bootstrap 3x and up would require additional options to be added to the modules in the drag and drop for users to configure.
It is possible when coding your own template to make use of your own scaffolding system (or a prebuilt framework like bootstrap or zurb’s foundation).
When looking specifically at the Blog Layout template, we are drawn to another “shrug your shoulders” moment in the Blog Comments Module.
This module doesn’t allow any real way to go about customizing the blog comments unless you use CSS. While the comments are laid out in a simple fashion, the capability to create different comment styles isn’t readily available. One nice feature would be the ability to style author comments separately, as can be seen on many blogs, including HubSpot's inbound.org site.
The Complicated
Much like the ¯\_(ツ)_/¯ section, our complications have not changed much. HubSpot still applies additional wrapping html to modules and changing up layouts to the blog loop which still requires heavy knowledge of HubL and HTML/CSS.
One other point we do want to add to our complicated section is the lack of documentation to HubL and how to use it properly. While the Designer Docs for HubL are informational, they leave out some really cool options or even tricks you can use to accomplish whatever you are trying to do.
What we said in 2016...
When adding modules onto the page in the drag and drop builder, HubSpot automatically wraps these elements with their own elements and classes (and sometimes styles as well, depending on the CSS files you attached). This often generates additional unnecessary code. When using HubL, you have the option to include a no_wrapper tag onto a module to remove this. Adding this as a checkbox in the “Edit Options” area of modules could help to remedy this feature.
The next complication points us back to the Blog Template and the Blog Content Module in particular. While this module is great to be able to quickly add a traditional blog loop to the template, changing elements inside of this blog loop can become very cumbersome and tedious. This is because in order to make changes to either the blog loop or post layout, you need to have a firm understanding of HMTL/CSS and HubL. Editing either of these sections brings up a code editor to make the changes, which would be very confusing for someone who has little to no experience in HubL.
Email Templates
There really isn’t much of an update on the email template front and everything we had mentioned in our previous article still applies.
The Good
Email still renders nicely across majority of email clients and if you have knowledge of HTML/CSS you can do additional styling to the templates in order to solidify your branding more.
What we said in 2016...
HubSpot's email template system provides an easy way for marketers to create simple and effective emails that render nicely across a majority of email clients. Marketers who know their way around basic HTML and CSS can add additional styling and elements to the email either by using the module options or through the use of the HTML module by itself.
The ¯\_(ツ)_/¯
While the emails render nice, the drag and drop still has the “boxed look”. While this is alright, the boxed email style can viewed as outdated and is being replaced by truly full-width emails.
What we said in 2016...
While HubSpot's email templates (using the drag and drop builder) render nicely across common email clients, they do not create a truly responsive email experience (including when using Gmail on mobile). In order to achieve this, you have to create your email using the code editor view, which would require you to know your way around HubL coding, as well as having knowledge of best practices when creating HTML emails. There are many great articles out there about creating responsive emails, such as one from Stig Morten Myre about coding mobile first emails.
The Complicated
RSS emails are still a bit complicated as you can’t use conditionals when targeting outlook clients. So you may have some issues if you want to change up your layout from the standard RSS Feed Layout.
What we said in 2016...
HubSpot's email creation is very straightforward and easy to understand. However, there are a few types of emails that can be problematic when creating them as templates. One example of this is the creation of an RSS email. In order for your template to also be used as an RSS email, the body of your email template needs to be wrapped in the following HubL statement:
{% content_attribute "email_body" %}
<!-- Your content here -->
{% end_content_attribute %}
When an RSS email is selected, this area is swapped out, and an RSS Module is put in its place. The RSS email allows you customize the layout of an rss.xml feed (such as a blog feed from HubSpot or Wordpress). While this is an amazing feature of HubSpot's templates, there is one major flaw in the RSS Email choice (note: this error also occurs in the Blog Notification Emails that can be generated in HubSpot). When you want to use IE Conditional Comments (used primarily to target Outlook Email Clients), these emails will not render properly on Outlook clients in a Windows Environment (Microsoft Windows Operating System).
This complicates things when wanting to have a consistent look to templates across email clients, and it forces templates (that want to make use of the RSS and Notifications Emails to make things easier) to instead opt for either a mobile or desktop look for common email clients.
Really there’s nothing new in the email templates?
The only major update is that there is a new “Drag and Drop” email builder. Currently it's in Beta and this functionality allows you create emails using a builder for the layout instead of having to stick to one layout and making changes in the DMv2 constantly. We’re currently reviewing this builder so be on the lookout for a post from us and our evaluations of this Beta.
to sum it all up...
Overall, you can see the biggest update to HubSpot was the introduction of the DMv2 which changed up the way we now build pages on the platform. If you have any questions about HubSpot templates, please feel free to contact us, or share your own templating tips in the comments below.
Related Posts
3 Pro Tips to Make Your HubSpot Workflows Successful
HubSpot's workflows are a powerful tool for connecting with your customers. We share 3 pro tips for getting the most out of your workflows.
Transforming Content Management for Marketers with Optimizely SaaS CMS
Transform your digital strategy with Optimizely SaaS CMS. Discover unmatched flexibility, efficiency, and innovation for superior content management.
Results Matter.
We design creative digital solutions that grow your business, strengthen your brand and engage your audience. Our team blends creativity with insights, analytics and technology to deliver beauty, function, accessibility and most of all, ROI. Do you have a project you want to discuss?
Like what you read?
Subscribe to our blog "Diagram Views" for the latest trends in web design, inbound marketing and mobile strategy.