Creating Websites in the HubSpot CMS

Deciding on a Structure

This is the first and most crucial piece and is going to set you up for success in your website build. You have to decide what content is going to live on your website, how it’s going to connect and how it will work together to build a comprehensive website.

Where to Start:

1. Understand Your Goals

In order to build a great website, you have to understand the goals of the site. A few examples of what that might look like are increasing awareness, improving customer experience, generating more leads, scheduling more visits, getting more quotes, etc. It’s important that you not only decide on your website goals, but make sure that they align with your business’ goals and needs too. From there, you want to make sure that everyone involved in this project is all on the same page moving forward.

2. Index All Pages

This step is mainly for those who already have a website and are looking for a redesign or restructure to their  website. There’s a chance that the ten page site you think you have may actually have over a thousand URLs connected to your domain name. This can actually hurt your ranking because all of those pages are being indexed by Google. 

We suggest using the tool Screaming Frog to crawl your website, but you can also use Google Analytics to do this. If you want to take a quick look at the pages associated with your domain you can do a Google search with “site:yourdomain.com.”

From there, you’ll want to take the master list of all of your website URLs and compare these to the goals you set for your site and how these pages fit into the goals you are working towards. Every page associated with your domain needs to be accounted for on the new site and all the old pages will either need to be redirected, repurposed, or redesigned.

3. Collect Available Data

You’re going to want to gather all available data on your website that you can. Analyzing the data from your website analytics can be extremely helpful in understanding what pages are performing well and why. You can look at things such as page views from the last year, bounce rates, incoming leads, etc. Our recommendation is first looking at the top ten most viewed pages on your current site. Looking at this data can help you understand whether these top pages are still relevant and aligned with your business goals or if they need to be redesigned or repurposed.

4. Ask!

Don’t make assumptions when creating your website. Instead, ask your team what is going to be the most accurate website for your users’ needs. For example, ask your sales team what the top ten questions they get asked everyday are, or ask your current customers how they engage with your current website. Your current customers may be looking for something to be easier to find or wish that something existed on your current website that exists on another. You can also talk to potential ideal buyers  and ask them what they might expect to find on a site with a product or service like your business’. 

5. Keep It Simple

It’s important to keep your website simple. Don’t overcomplicate the structure and page linking because it can get very messy to clean up. Not only will this help you but it will also help your users understand and navigate your website. You want your users to not have to waste energy trying to find out who you are and what you do or offer so keeping your website simple is key.

Navigation Do’s and Don’ts

Your navigation is a really important piece to your website's structure. Your navigation is the little menu at the top of your website with items of where someone can navigate to. This is really important not only for user experience but for SEO as well. Here are some do’s and don’ts to your navigation:

• Prioritize Consistency - Your navigation should be true north for your users. Your navigation also shouldn’t change when your users are exploring your site; they should always know where they are on the site and how to get back to where they were.
• Use Your Users’ Vocabulary - Don’t use your navigation to get cutesy or overly branded with your language. Consider what your users are searching for when you are labeling your navigation. For example, if you own a retirement community with assisted living called The Chateau, don’t list The Chateau in your navigation, instead put Assisted Living. Most users are searching for “assisted living” not your brand specifically. This allows you to introduce your brand that offers assisted living to that audience.  
• Make the Most Important Information Accessible - Don’t bury the most important information. Keep in mind the order of your navigation. For example, should your “About Us” section be first on your navigation? Chances are, before your users care about who you are as a company, they are going to want to understand your projects and services.
• Avoid Deep Navigation - One of our biggest suggestions is to avoid dropdown menus when possible. When your navigation is three, four, or five layers deep, it makes it complicated and messy for your users to understand the structure of your site. You also shouldn’t bury your keywords in your navigation, make it simple for your users to find exactly what they are looking for. Keep your navigation between 5 and 7 items so you don’t overwhelm your users as well. Overall, just keep it simple.
  
  

Traditional Website Design vs Growth Driven Design

Growth Driven Design is different from Traditional Website Design because it means improvements to the website are continuous and based on real user data versus making the website perfect before setting it live. 

Traditional Website Design is typically a 12-16 week process that is a top to bottom project. The goal is to make the website as close to perfect as possible. Growth Driven Design is a 6-8 week project that receives continuous web improvements based on the user data after launch. 

Choosing a Template

A template is the coded version of your website framework - the HTML and CSS that work together to make the pages of your site function and look a specific way. You can use HubSpot’s pre-coded templates as a starting point when building your site.  

A theme is a set of files for your website including coded templates, modules, global content, and theme settings.

• Coded templates: a set of templates for your website, including a homepage, about page, landing page, and blog templates. These templates are custom coded by a developer, but the content and layout can be customized in the drag and drop content editor. 
• Modules: a set of unique theme modules you can add to content using that theme. 
• Global content: content repeated on multiple pages, such as a website header or footer. You can edit global content directly from the drag and drop page editor.
• Theme settings: style settings for templates using a theme, including fonts, spacing, and colors.
  
  

Marketers can use themes to create and manage their website's content and layout without touching code.

Pros of Using a HubSpot Template

Using a HubSpot template to build your website allows you to get a head start in many different areas of website development.

Saves You Time and Money

When you start your site build with a pre-coded template, you don’t have to spend time or money on setting up the basic aspects of a site to get it to look and function the way you want. Instead, you can get straight into customizations and content to make it feel like your site. You don't have to spend time on the initial set up of the style and functionality of your site because that's exactly what a template provides.

Already Coded to be Responsive

HubSpot templates are already coded to be completely responsive, meaning you don’t have to spend your time, money, or energy worrying about manually coding the tablet and mobile versions of your site. As users are increasingly using the web on their mobile devices, it’s important that your website responds and adapts to various screen sizes so that the text and images of your website are not the wrong size.

Built-in Security to Protect Your Site

HubSpot websites come with a built-in SSL certificate. SSL certificates keep user data secure, verify ownership of the website, and prevent attackers from creating a fake version of the site.

Things to Take Into Consideration

Whether you’re choosing to use a HubSpot Template or a HubSpot Theme, it’s important to keep in mind which modules you will need to use.

What is Your Brand’s Style?

Whether your style is modern, classic, traditional, techy, organic, etc., you need to know what the style is before you start building your site. The HubSpot Marketplace is going to have a variety of templates and themes to choose from to fit your brand style needs.

What Pages Do You Need?

In addition to the usual homepage, about us, and services page, what additional pages do you need? Do any of the page templates fit your needs?

What Modules Do You Need?

What types of modules does your content lend itself to? Do you need photo galleries or accordions? Or compare and contrast modules or tables? If you have an idea of how you want to lay out your content you can choose a template that already has some of what you need set up.

What is Your Budget?

The HubSpot Marketplace has a lot of pricing options from free to $1,500 (one time fee), making them accessible for different budgets.

Setting the Foundation

Every successful website has these three things: Call to Action, User Driven Messaging, and On Page SEO.

Calls to Action

A call to action creates an obvious invitation for prospects to do business with you. Whether the action is buy, register, sign up, schedule an appointment, order, or call, it needs to be very obvious for your users that this is the first step to doing business with you. 

User Driven Messaging

Successful website copy makes it easy for the visitor to understand why they should want your offer and how it can help them achieve their goals. Here are some things to keep in mind:

Clarify Your Message

Make sure the very first text users see on your site is a clear and concise explanation of what you offer and how it can help your visitor. You want to make sure they understand your offer as quickly and easily as possible so they don't need to waste brain power trying to figure it out.

Simple, Relevant, and Repeatable Copy

You’ll want to make sure the copy throughout the rest of the site is simple and easily digestible as well. If your users have to sift through too much information it makes it more difficult for them to get to the core of your message. By repeating the same core ideas it helps make it extra clear what you offer. Try to make it as easy as possible for them to see how your product or offering can make their life better. 

Organize Information in a “Story” Framework

Think of your website as a story about how your offering can help the user accomplish their goals. Keep in mind as you are writing your messaging to always keep the user at the center of the story. 

Both of these websites are talking about Lilly’s Pet Care but one is following the StoryBrand Framework. The StoryBrand website has a clear and concise header text that clearly states what they can offer the visitor. It’s not too wordy and makes it about the visitor. There is also a clear next step about how to do business with them - the user doesn’t have to work hard to figure out what to do next and has multiple opportunities to engage with that call to action. 

On-Page SEO

On-page SEO is the process of optimizing various front-end and back-end components of your website so that it ranks in search engines and brings in new traffic. This is a very important piece to your website because even if you do everything right, if users can’t find your website then all those customer opportunities are missed. HubSpot makes this easy with an SEO recommendation report. 

If you’re looking for ways to improve your website, check out our free website grader tool and get recommendations on performance, SEO, mobile responsiveness, and security. 

Your website is where people go to find out all about your business. Your visitors should be able to find everything they are looking for and be able to easily convert when they are ready. If you are looking for a website redesign, contact us to get started.