Branding & Inbound Marketing Blog

Hubspot CMS Mobile Version: Tips to make it look better!

February 5, 2013 at 5:35 PM

hubspot mobile cms resized 600As a Hubspot Certified Partner we've been asked about the pros and cons of Hubspot, while we're pretty adiment about Hubspot's Awesomeness, the fact that 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 reccomend 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 definate 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
  • Disect the CSS of the Mobile version of Hubspot: You can use some great css tools, 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 recomended 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 their 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!

 

370383 100001373553953 1878448838 nRemington is the CEO and Inbound Marketing Strategist for Impulse Creative, An Internet Marketing Agency in Fort Myers, Florida. You can connect with him using the following social networks: Google+, Twitter, Linked In & Facebook

Topics: hubspot, mobile, css

Like What You See? Share this now →
    

About the Author

Meet Remington Begg

Remington is the CEO and Inbound Marketing Strategist for Impulse Creative, An Internet Marketing Agency in Fort Myers, Florida. You can connect with him using the following social networks.

Connect with Remington Begg on , LinkedIn , , & Google+

Who is IMPULSE CREATIVE?

We are a branding and inbound marketing agency that leverages a strategic blend of marketing awesomeness to create a consistent message for our clients. Our diverse team helps clients outline and achieve their goals, grow their business, and Be Remarkable!  

⋆ Read More ⋆

Subscribe to Email Updates