Which CMS is best? HubSpot vs. WordPress
(First written April 17, 2020) What is a blog? Is it a verb? Is it a noun?
Yes.
It's a "weblog," as named by Jorn Barger on Dec 17, 1997.
Peter Merholz chopped it into "we blog" as a joke in mid-1999. Before long Evan Williams (Yeah. THAT Evan Williams of Blogger, Twitter, Medium fame), while working at Pyra Labs (Yeah. That company that made Blogger and was gobbled up by Google in 2003.) used the word "blog" as both a noun and a verb...and here we are today.
What started out as an easy means to create a digital diary without knowing how to code has turned into the core of the internet for many businesses.
WordPress got its start as an open-source CMS—Content Management System—in 2003 and now nearly 61% of blogs are run on WordPress.
Ohhh, 61%?! Wow. Since they have so much of the marketshare, it's clear that in the WordPress vs. HubSpot, WordPress is the clear winner, right?"
Well, Windows has 87.44% of the OS Market Share vs. 9.74% of Mac OS, but does that make Windows "better?"
HubSpot Offers World-class Security
- Security firewall
- Intrusion Detection System (IDS)
- 24-hour security team
- SSL (Secure Sockets Layer) Protection (that little green thing up in the top left of the URL)
- Distributed Denial of Service (DDoS) Mitigation
- All included
HubSpot's Website Hosting is FAST
- Hosted on their content delivery network (CDN)
- Hosted on their Akamai Web Application Accelerator
HubSpot Offers No-Hassle Support
- Live, 24/7/365 phone support
- You can request that support calls you to eliminate waiting on hold
HubSpot's Web Design Is Built on the Twitter Bootstrap Grid
- Responsive websites
- 12-column grid
- But built for larger computer screens
HubSpot's Design Manager
- Drag and Drop visual system (powerful and intuitive)
- Rapid development platform for staging new content and testing styling
- Allows you to also develop in code (full HTML and CSS is supported)
- Two Parts
- Templates (The Template Builder): the frame of your site, provides structure
- Stylesheets (The Code Editor): like coats of paint on a house they make the structure attractive
- You can use code in the Template Builder, including:
- HubL tokens
- HTML
- Javascript
- JQuery library
- Or any combination
Creating a HubSpot Template, Coded File, or Module
- Select the one you want to use:
- Template Builder: drag and drop builder
- Code Editor: HTML, CSS, JS in a powerful IDE
- Custom Module (a re-usable, customizable module)
- Select what you want to create:
- Page: Website pages or Landing pages, include by default
- Logo
- Section Header
- Right column
- Social sharing
- Page footer
- Email module includes by default
- View As Web Page
- Logo
- Main Email Body
- Social sharing
- Footer
- CAN:SPAM
- Blog module includes by default
- Logo
- Blog Header
- Blog Content
- Blog Comments
- About this blog
- Blog Email Subscription
- Recent Posts
- Posts by Topic
- Page Footer
- System module includes by default
- 404 Error Page
- Subscription Preference
- Password Prompt Page
- Backup Unsubscribe Page
- Subscriptions Update Confirmation
The HubSpot Template Builder
- Open New Tab
- Back
- Actions Menu
- Edit Menu
- Group
- Layout / Preview
- Publish Changes
- Module Sidebar
- Workspace
Adding Modules to HubSpot Page Builder
- Choose from Built-in Modules
- Dynamic sidebar
- Only shows relevant modules
- Drag and drop them
Arranging Modules in HubSpot Page Builder
- To split a module simply hover over it and click on the "Split" button that appears
- To move a module simply drag and drop it
Edit Modules in HubSpot Page Builder
- Click on the gear icon in the top right of the module to access
- Edit Options
- Lock Module
- Edit CSS
- Swap Module
- Make Module Global
- Split Horizontally
- Add Module Below
- Delete Module
- Within the various options you can edit the styling of just that module, rename it, etc.
Group Modules in HubSpot Page Builder
- Global and Local Groups
- Used when the group or module must be used across multiple page templates
- Local groups are used to ensure specific modules always remain together. It also helps with styling a cohesive section
- Global Groups are ideal for
- Headers,
- Footers,
- Sidebar,
- Copyright or Privacy links since they remain the same across all pages.
- Grouping modules adds them to a parent div.
- When you attempt to Group a set of Modules that are not adjacent to one another, the Modules will turn red
- When you select "Group" and choose adjacent Modules they will turn green
- When the Group is actually created, a new Module Group heading will appear
- Use the gear icon on the top right of the new Module Group to make it a Globule Module if you want to reuse it throughout your site
- You'll know it's a Global Group because it will be green
Four HubSpot CSS Options
- Primary CSS file: Account-wide
- Domain Stylesheets
- Template Stylesheets
- Page-specific Stylesheets
- You have complete control over which stylesheets are or are not attached to the template.
- Ditto for the Page level
Building CSS files with the HubSpot Code Editor
- Within the "New Tab" window, choose "New Coded File"
- Choose "Code Editor" in the "Create New" window then click "Create"
- Give the stylesheet a name with the ".css" extension
- Select a folder and click "Save"
- If you've done it correctly, you'll be taken to the Code Editor in Editing Mode as shown below...
Pro Tip: Use custom classes instead of styling the built-in structural classes since the latter and their built-in attributes are subject to change.
Pro Tip: Use your browser's "Inspect Element" feature or a browser plugin like Firebug to identify the names of the structural classes.
How to Assign CSS Classes to HubSpot Modules
- Enter the name of the class or
- Add multiple classes to a module. (Just use a space vs. a comma in the CSS classes.)
- You can assign CSS IDs to existing stylesheets to make the migration of existing stylesheets much easier
- Add a CSS class or inline styling to your page template's <body> tab found within the Body CSS Options tool
- Edit the <head> section of your template for features such as attaching a stylesheet or linking to JavaScript libraries
Pro Tip: After editing your CSS stylesheets be sure to test your site's mobile responsiveness since CSS errors can disable it.
Pro Tip: Avoid using inline styling on a permanent basis. Use it as a tool for experimenting.
Email Pro Tip: Use inline styling for email styles.
Create Advanced Menus With HubSpot
Adding menus and sub-menus is easy with HubSpot.
Visit "Content > Content Settings > Advanced Menus" then select the Menu Tree you want to edit.
At the bottom select "Add a Page" and name the page. On the far right either enter the URL of the page or select the blue "CHOOSE" icon to be shown a list of your existing pages.
Begin typing the name of the page you want to add and you'll be shown a list of all of your pages with that name in the title.
Once you have selected the page you want to add simply click "Choose page" then "Publish changes" on the next page and your menu has been updated.
HubSpot Website Design Advanced Tactics
- Design a Master Template with all of your modules so you can see what your CSS will look like. It will also help you work more efficiently.
- HubSpot has a boilerplate CSS to show you some commonly used CSS selections.
- Use Custom Wrapping HTML.
- Use the Code Editor to build templates and leverage the "Clone to file" feature to speed up your work.
- Add JavaScript to the "Site Header HTML," the "Site Footer HTML," or "Raw HTML."
- The jQuery library is automatically referenced in all new templates you create in the Template Builder.
- HubL: a Python-based server-side language used to create COS Templates. It is based loosely on the Jinja language, but does not support all Jinja features. It can be used for creating logic or for simple tasks like importing the current date or user-specified colors.
- HubL Tags dynamically generate the HTML that creates your HubSpot templates.
- You can create Custom Modules in the Design Manager with HubL.
Create Engaging Website Pages With HubSpot
Creating website pages in WordPress is fine and dandy, but it will not be complete.
With HubSpot, analytics will flow properly, contact information will be populated automatically in your CRM, and things will just work.
While HubSpot can work with other CMS frameworks such as WordPress, Drupal, Joomla, it requires a bit of hacking and extra work to make it work well.
You'd also be missing out on the Smart Content feature of HubSpot, which empowers you to deliver relevant content to visitors, which increases engagement.
When you use HubSpot, there is no need to know PHP. You can do all you need with just a fundamental understanding of HTML and a tad bit of CSS. However, since using the HubSpot platform for my entire site since the fall of 2015 I can tell you that 95% of my coding questions and needs have been met by the 24/7/365 live phone support HubSpot provides. (What's that worth?)
Create Effective Page Templates With HubSpot
- Plan before you dive in
- Create clear, user-focused architecture and navigation
- Keep it simple (empty space is okay...it actually frames your information)
- Create a visual hierarchy (if it's in ALL CAPS...then nothing is in caps!)
- Entice visitors to scroll down "below the fold"
- Use as few templates as possible to keep the look and feel consistent
Best Practices For Homepages With HubSpot
- The purpose should be clear
- It should not be cluttered with modules
- It should engage visitors and help them navigate your content
- Convert visitors into leads with at least one CTA (Call to action)
- Rich visuals entice visitors to browse such as
- Logo
- Video with a play button
- Descriptive imagery
- Screenshots or product photos
- Limit your usage of image sliders. According to a usage study by the Nielsen Norman Group, only 1% of website visitors click on links in an image slider and 89% of those click on the first slide only.
- Provide space for eye-catching headlines. Visitors should know "what are you offering?" in 2-3 seconds.
- Feature a list of benefits so visitors can understand what sets you apart from the competition.
Best Practices For Landing Pages With HubSpot
Great landing pages are like employees who never take a day off, or have a bad day, or rub a visitor wrong.
- Use enticing headlines on your landing pages
- Include your logo to help build brand awareness and trust that the visitor is still on one of your pages
- Remove distractions to help keep the visitor focused (i.e. remove navigation menus)
- Leave room for a description and a bulleted list to help explain the offer on your landing page
- Embed a form to gather information on your visitors
Best Practices For Blog Templates With HubSpot
- Keep your visuals consistent, i.e. fonts and colors should match the rest of your site.
- Focus on readability first vs usability. Visitors are here for long-form content.
- Use clear, emphasized headlines
- Include whitespace
- Use legible fonts (serif or sans serif is fine)
- Keep mobile in mind
Best Practices For Marketing With HubSpot
- Customize the post for the blog author (HubL helps here)
- Use the sidebar to increase conversions
- Include a CTA module for the blog author
- Entice visitors to scroll down your page
- Promote the blog author as a leader in your industry
Designing a User-focused Experience With HubSpot
"Too many companies believe that all they must provide a 'neat' technology or some 'cool' product or, sometimes, just good, solid engineering. Nope. All of those are desirable (and solid engineering is a must) but there is much more to a successful product than that: understanding how the product is to be used, design, engineering, positioning, marketing, branding—all matter. It requires designing the total user experience." ~Psychologist Don Norman, Design and Usability Experience
Former VP of Apple and Author of "The Design of Everyday Things"
- Focus on the user
- A lack of focus yields complexity and complexity is the enemy of good design
"The argument is not between adding features and simplicity, between adding capability and usability. The real issue is about design: designing things that have the power required for the job while maintaining understandability, the feeling of control, and the pleasure of accomplishment." ~Don Norman, ACM Interaction, Vol 15, Issue 5
- The answer lies in the user, not in you
- Start and finish with the user
- Develop personas for the users / visitors by asking questions such as
- Who will use this?
- What problems are they solving?
- What is their level of expertise?
- What other websites are they referencing?
- What tools are they already using?
- Discover the problems with your current site design
- Create a basic prototype (low-tech is fine and even recommended)
- Test each prototype on everyone you can including friends, co-workers, and a few customers
- Iterate until the results no longer surprise you (Prototype, test, repeat)
- Continue the feedback loop indefinitely
Principles For User-Focused Design
- Be consistent. Reuse templates to help create recognition of where to find information. This helps the user spend more time browsing your content but they'll also be more likely to find the answers they're looking for.
- Follow existing design patterns and practices such as underlined words that are blue are hyper-links, and buttons look like buttons.
- Leverage a style guide so content creators know what their work should look like
- Suggestions include:
- Color palettes with hex codes
- Fonts and spacing
- Images and logo treatments
- Iconography and design accents
- Custom modules with instructions on how to use them
- Visibility.
- This ensures that the user can quickly locate and easily access the most important options
- Simplify your navigation at the top with major categories and expand the navigation in the footer instead of burying them under endlessly-unfolding menus
- Affordances / Signifiers: Visual cues that teach the user how something can be operated
- Button animation
- Navigation menu animation
- Not all animations work on mobile devices so test these
- Mapping: the principle of drawing connections between interface objects and their intended effects
- Turning a steering wheel, or
- "Hamburger Menu" with text stating what the button does
- Feedback: when a user completes an action, appropriate feedback will help them understand that the action was recognized and completed successfully.
- Red borders around incomplete forms
- Blue borders around optional fields
- Comment boxes on optional fields
- Create Thank You pages so the user knows they have input their information correctly and it can inform them what to expect next
- Constraints: purposeful limitations placed on an interface or device
- Use personas to create content sections that only show details that are pertinent to the person viewing them
- Customized, curated, and personalized content is what we're aiming for
- Do not create unnecessary constraints to block users from content. Avoid the overuse of modals, overlays, pop-ups, and slide-in assets.
Drafting Smarter Mobile Designs In HubSpot
- 80% of internet users own a smart phone
- The mobile experience is different, so your web design should be, too.
- Short browser bursts are common on mobile
- 47% of all email is opened on mobile (HubSpot 2014 Science of Email Marketing)
- Why not use Adaptive Design like Apple, eBay, and Amazon? (They are huge companies that can make it work.) Responsive design is fine for most in the key areas of:
- Content Management
- SEO
- Future-Proofing
- Optimize for
- Smaller screens
- Touch-based interaction
- User's intentions. This is an opportunity vs a constraint.
- Data networks (12.1 Mbps average download speed on mobile vs 25.9 Mbps on a desktop) Akamai's study found that 40% of people will abandon their search if your site takes more than 3 seconds to load!
- Data is expensive
Ready to take a closer look at HubSpot to see if it is right for you?
Let's talk.