Hubspot CMS Mobile Version: Tips to Make it Look Better!

As a HubSpot Certified Partner we've been asked about the pros and cons of HubSpot. While we're pretty adamant about HubSpot's awesomeness. It's not always the best fit for some companies who aren't ready for "inbound marketing." But it goes without saying it's an amazing all-in-one marketing platform.

One of the core parts of HubSpot is the CMS or Content Management System. This portion of the platform is everything you'd see as a viewer of the website. HubSpot's CMS also has a Mobile Version that you can enable/disable. With mobile site viewing up in recent months, we recommend that our clients take advantage of the "mobile revolution" by making the website mobile friendly. There really isn't much documentation on how to modify the HubSpot Mobile Template, So here goes!

By Default the Mobile Version of the HubSpot CMS is somewhat limited. But after a more detailed look there are definite opportunities for customization.

Here's a step by step on the basics:

• Render a Mobile version of HubSpot's CMS on your domain: add this string to the end of your url ?mobilePreview=true&testMobile=true&Preview=true
• Dissect the CSS of the Mobile version of HubSpot: You can use some great CSStools, but we're fans of Firefox Web Developer Toolbar, or Google Chrome's Developer Extensions.
• Take note of the container div's. Use "inspect element" to do some digging to find the DIVs that you want to modify.
• HubSpot has a variety of template layouts, Foxboro & Brighton are two popular layouts. We use Foxboro, and here's some container divs we modified to make the layout match.
• #header
• #header .logo
• #outer
• #inner
• #content
• Add the updated CSS to the bottom of the custom.css file in the HubSpot File Manager (This is not recommended if you are unfamiliar with CSS, You can effect and tragically modify your css for your entire website...)

One of the biggest issues we see with people who create or modify the HubSpot Templates, is they don't pay attention to the how the website renders on a mobile device. You need to ensure that the "non-responsive" elements in your template act responsive in some form on your mobile device. If it doesn't look acceptable, i'd turn off the mobile functionality.

Once you have the DIVs that need to be adjusted, you can set CSS rules for the interior elements and tell them how to react. This could be Menus, CTAs, Images, Even your logo above the main menu of your template.

If you'd like some assistance on modifying your HubSpot template, or would like to hire us to make these change we are more than happy to help!