GRAB OUR MONTHLY NEWSLETTER

HubSpot's design manager combines all the tools that are needed to build state-of-the-art websites, while still giving marketers the flexibility that they desire when creating content. It’s also one of many reasons why devs love the CMS Hub. 

 

"Our goal is to try to help marketers be able to just do what they need to do to get their work done easily and joyfully, without the need of a developer and having to jump between all these different systems." ~ Luke Summerfield

Tools included in the design manager:

• Finder: a space to create and organize your files, templates, modules, and folders.
• Layout Editor: a drag and drop editor for structuring your page, blog, email, and system templates.
• Inspector: this is where you can edit the properties of a layout, module, or group. 
• Code Editor: an Integrated Development Environment (IDE) for all your front-end code (CSS, Javascript, or even your own HTML templates).
• Module Editor: reusable custom modules that you can set up to add advanced functionality to your site that can still be managed by non-technical users.
• File Manager: a file hosting system for all of your site's assets and media. 

Hubspot CMS templates control the layout, style, and function of your pages. Hubspot provides built-in templates from CMS developers. You can also download pre-made templates from the HubSpot Marketplace.

Modules are the building blocks of templates. These blocks of content, which include images, forms, CTAs, rich text, and more make up your templates.

HubSpot allows a one-to-many relationship. The same module can be used across many templates. Your templates can be added to many unique pages.

There are three types of modules that can be added to templates:

• Default modules:  33 available for templates in the design manager tool. Each type of module can be customized with styling and content options in the inspector.
• Special modules: in addition to the standard HubSpot modules, each type of system template has a special module that can only be added to that type of template. For example, a password prompt module is only available when creating a password prompt template.
• Custom modules: you can create custom-coded modules to add custom or advanced features to your blog, pages or emails. The module editor has three editor panels for writing HTML and HubL, CSS and JavaScript. Custom modules offer a wide range of functionalities so that content can be fully customized within the page, email, or blog editor. 

HubDB is a way to create dynamic, data-driven content that's easy for marketers to manage, much like a spreadsheet. Retrieval of data can happen in many different ways, depending on what you need to accomplish, and you can query the data externally via the HubDB API. Or you can use HubSpot’s HubL markup tags to pull data into the CMS.

Luke explained that there was a real need for this.

They were talking to customers that needed solutions for creating a digital product catalog, event calendar and listing, or there was a franchise, with 250 locations, and they needed to manage all those different franchises online.

"For marketers, HubDB is a spreadsheet on steroids" ~ Luke Summerfield

• Website pages: are the building blocks of your company's website and advanced menus. 
• Blogs: it's never been easier to create compelling content that educates your audience about your business. You can also host multiple blogs on the same subdomain if needed.
• Landing pages: display content offers that attract new visitors to convert on your forms. 
• Forms & Pop Up Forms: create a form and use it to collect information about your visitors. 
• Landing pages: display content offers that attract new visitors to convert on your forms. 
• CTAs: a call-to-action is a button you can use on your HubSpot content to drive prospective customers to your website, where they can then convert on a form and be added to your contacts database.

*TIP: You can also A/B Test anything in the above list!

A/B testing is a marketing experiment where you "split" your audience to test a number of variations of a website page, CTA, email, etc. to determine which performs better. 

To run an A/B test, you need to create two different versions of whatever you want to test, with changes to only a single variable.

Then, you'll show these two versions to two similarly sized audiences and analyze which one performed better over a specific period of time. The key here is that you want the test to run long enough to make accurate conclusions about your results.

With smart content and personalization tokens, HubSpot helps you deliver intelligently personalized content to your customer’s needs; tailored to where a prospect is in the buying process, or content targeted to people the very first time they visit your website.

Smart Content lets you target content based on anything you know about your contacts, for true relationship-driven marketing. Basically, any data stored in the CRM about a specific contact can dynamically change the customer experience. 

This is possible in enterprise CMS solutions like Adobe or Sitecore. However, with HubSpot, you don't need a developer to set it up: Marketers are able to do it.  

You can use it to tailor your website pages, landing pages, emails, CTAs, and forms based on specific criteria you have stored about your contacts in the HubSpot CRM. 

*For HubSpot Professional and Enterprise level only and it comes with the stand-alone CMS as well. 

"Smart content and personalization is something that's quite unique to HubSpot CMS, and really opens the door to a lot of powerful things that marketers can do without having to go to a developer. It's an area that we're looking at doing a lot more with for building and optimizing websites." ~ Luke Summerfield

HubSpot has adopted the topic cluster SEO methodology because search engines today reward websites whose content is organized by 'topics' not just 'keywords.' This is an easy task to accomplish now in HubSpot’s content strategy tool, where you can discover and rank for broad Pillar Page topics and more specific, niche subtopics.

These analytics are game-changers!

You can think of the HubSpot reporting and website analytics tools as your guide and how you prove ROI. 

You can use HubSpot's default reports to design dashboards for everyone in your organization. These can be the same for everyone, or you can create custom ones for up to 200 people, so they can focus on the analytics they need to know about. 

These reports allow you to dig deep into any metric from the marketing, sales, or service tools, any record from the HubSpot CRM, or data from any integrated apps you may be using via the HubSpot App Marketplace.

You can also build customized reports using HubSpot's library of reporting templates, or build your own custom report from scratch using the reporting add-on tools.  

With the web analytics tools, you can get deeper insights into how visitors are finding and engaging with your content, and moving from visitor to customer.

HubSpot's website analytics provide information on activity like sessions, traffic, engagement, device types, sources, and more. Below is a list of the reports that appear on the web analytics dashboard by default:

• Sessions
• Traffic Metrics
• Engagement Metrics 
• Session Sources
• New Visitor Sessions by Source
• Session Engagement Rates by Source
• Device Breakdown
• Session Country

HubSpot reporting has pretty much everything you need, but the platform can easily be integrated with Google Search Console for even more data to mine.

HubSpot has what Luke likes to call a 'light-weight' content staging area, where you can take any page on your website, clone the page, and make changes in a non-live staging environment. 

In this staging environment, you'll get a preview/staging URL that you can share with people -- allowing them to interact with whatever you've built, make any edits behind the scenes, and then publish whenever ready. 

It basically takes your existing page, swaps it for the new page, and then archives the old stuff. So, it doesn't delete it. It just puts it in an archive, in case you need to reference it later.

This gives you the ability to make more complex changes, site-wide changes, or redesigns a lot smoother.

"For someone like myself (a non-developer) I love our current content staging, because I can do what I need to do, like flip pages around and update things. It also makes my life a lot easier when I'm working with a team to send out preview links, gives them easy access to it, and then with one click...I'm live." - Luke Summerfield

With that said, Luke admitted there is still room for improvement here, as it's not as robust as it could be.

The good news: This is something that the product team has on their radar. Eventually, they'd like to move towards a world where they have a true workflow of development environments, staging environments and a production environment that's live.

"The first step towards this was creating a local development tool, that's now in BETA."
~ Luke Summerfield

The cool thing with the local development tools, is that you can actually create an entire site locally on your computer now, a staged site, just in your own local environment.

This can't be shared, virtually yet, but again, it's the next step. And there's a kind of secret workaround. A little hack, you could say.

For folks that want to do a staged site, I would only recommend this if it's a developer who's good with the local development workflow. You can take the local development tools and connect them to multiple portals.

What makes this valuable is that you can manage assets, templates, and modules and apply changes across however many portals you want. You can do this very quickly, with one command.

So developers can get CMS accounts that are free. This is a sandbox account that's got the full CMS features and functionality, the CRM, and all the free tools. It doesn't let you connect the DNS records and turn the site live, but you can do everything else. 

So the hack is this. If you have your live HubSpot portal, you could then use the local development tools to pull down all the assets into your local environment and do whatever changes you want. Then push it up into one of these sandbox portals that you could share preview links to.

The preview links are then a type of staging area, like a QA area, and then you can pull it back down, and eventually push it into your live portal. 

Luke again admitted that there's improvement to be made here, and reminded us of as of 2019, they have a full time staff of people dedicated to making developers lives better now. So this time next year, development at HubSpot will be on a whole new level.

To learn more about the local development tools and the HubSpot CMS from Luke himself at Inbound 2019, watch the video here.

And and last, but definitely not least, I couldn't end a discussion about the HubSpot CMS without bringing up Luke's popular, website building and optimization methodology called Growth Driven Design (GDD).

Basically, the main idea behind GDD is that...

"TRADITIONAL WEB DESIGN IS BROKEN." - Luke Summerfield

Whether you take the certification course or hire a GDD-fluent agency (like CMO), HubSpot makes it easy to build and optimize a peak-performing website that drives business growth.

In the course, you'll learn how to develop a strategy, build a launch pad website, implement data-driven continuous improvement, and gain access to a global GDD Slack community, where you can ask questions and collaborate with the instructors and thousands of GDD practitioners.

(With CMO, we do it all for you .)

Speed

Visitors will leave your website if it loads slowly. So HubSpot's CMS is designed to load FAST! INDY 500 fast.

HubSpot has built its own global Content Delivery Network (CDN) infrastructure. They’ve optimized it so that your pages load quickly no matter what device is used or where a visitor is located.

The CMS optimizes image sizes and compression so they look great on devices and load quickly. Hubspot has tweaked how CSS and JavaScript load to ensure fast-loading pages.

Security

Security breaches are bad for PR. So HubSpot CMS has SSL baked right in. Do you know that lack of security can hurt your search rankings?

HubSpot’s global CDN automatically prevents DDoS attacks. And the Web Application Firewall prevents hackers from accessing data. If that wasn’t enough, HubSpot has a security team that constantly monitors the network.

Reliability

There’s a 99.999% uptime with Hubspot CMS. If a data center ever goes down, the system can switch to a redundant system and keep your site live. Downtime doesn’t just cost you revenue. It hurts a visitor’s perception of your brand.

HubSpot’s CRM has been voted the #1 CRM for SMBs. And it integrates with the HubSpot CMS. You can track contact details, build contact lists, and follow a user from visitor to satisfied customer.

"The way to build a great web experience that converts is all about tailoring the experience for the individual" - Luke Summerfield

This was the mindset at HubSpot from the very beginning, which is why they knew it was important to eventually couple the CMS tightly with the CRM and the other free tools they offered.

This means that as a marketer, you have all the data that's going into your CRM: pages viewed, clicks, downloads, funnel stages, contact owner, and a lot of other really rich data to help you make impactful improvements on a website and actually tailor the experience.

These two tools working together are the marketing dream team you've always wanted.

This means you now have all your lead and customer data in the same place as your website, so you can easily leverage it to personalize communications and content to them through email, your blog, your social media channels, and more. 

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.