At New Breed, we’ve spent a lot of time with HubSpot’s Content Optimization System. Back in May of 2013, we built and launched newbreedmarketing.com, which was one of the first websites to ever be built on the platform. A lot has changed in the last 16 months, and we’ve been lucky enough to see the COS evolve into a robust content management system that not only rivals, but outperforms other CMS platforms in many ways. And as the platform has grown, we’ve also grown right along with it, learning all sorts of tips and tricks, and ‘optimizing’ our use of the HubSpot COS.
Since switching to the COS, we’ve been able to reboot our sales, marketing and design efforts, and have experienced incredible results. Between building and maintaining our own website, having the first ever COS certified designer on our team, and building 20+ customer websites on the COS, we’ve learned a thing or two about the Content Optimization System.
And as much as we’d like to, we don’t feel right keeping all of these insights to ourselves, so we wanted to share the wealth. Read on for the thoughts, opinions and tips from Chris Mathieu, Robin Earle, and Eric Levine, resident designers/developers (and COS superstars) here at New Breed.
Alright, let's jump right into it!
What’s your best advice for learning how to design on the COS?
Robin Earle:
Play around on it. I also listened to a couple webinars before the COS launched to learn more about the tools. It’s like the Adobe products in that one of the best ways to learn it is to explore and get used to how it works. Knowing CSS and HTML helps, but at the same time, the COS can help immensely in providing a framework to better understand the language.
Eric Levine:
Start with the basics, coding comes down to the language. Learn the language first, then start learning the COS.
Chris Mathieu:
First things first, take a step back from any platform and learn HTML, CSS and basic design principles (composition/layout, typography, contrast, color theory, etc.).
Once you have the “fundamental design & development basics” down, you’re ready to begin your journey. Using HubSpot Academy is really helpful, especially the practicum under the COS Certification. Understanding how things like Bootstrap (a responsive design framework) and HubL (HubSpot’s proprietary markup language) work will really advance you along the way. The COS is actually a great tool for people new to web design/development since using the template builder is a visual experience (versus some purely code-based platforms).
Are there any stand-out features on HubSpot’s Content Optimization System?
Robin Earle:
HubSpot’s customer service. They’ve got all hands on deck to help fix any problems; both to troubleshoot any issues we run into and to develop new features and solutions on their end. They’re flexible with customer suggestions and use them to help build and advance their product. The users are the product testers, and because it’s so dynamic there really is no “final product”. It’s like a Swiss Army knife that spontaneously grows more tools as you need them.
Eric Levine:
The usability and efficiency. You can be very productive in a short amount of time because of the template builder. You don’t have to hardcode every element on your site which is a huge time-saver.
Chris Mathieu:
The Visual Template Builder. The COS exceeds the competition when it comes to visually based layout work. It just plain makes sense. The other killer feature is Smart Content, which gives you the ability to serve different users different content based on past site interactions.
From a design standpoint, why use the COS over WordPress?
Robin Earle:
It’s fast, helps make sites responsive without having to code nearly as much, and has a more intuitive structure. I can’t tell you how many times I’ve gone through the back end of a WordPress site looking for the controls for a minute feature.
Chris Mathieu:
The COS offers good segmentation and ease of use for, what I refer to as, “the 3 pillars of website aesthetics”. These are the template (or layout), the style, and the content.
1 - Templates (columns, rows, positioning, etc)
The Visual Template Builder sets itself apart from WordPress. Although you can essentially complete the same tasks using WordPress, you need to code the templates themselves in HTML and PHP which can take much longer - especially for junior developers.
The COS lends itself to our strategy and planning phase; the template builder is almost like a wireframe. Drag and drop features help us go from a wireframe to creating the templates directly in HubSpot. This increases our speed and efficiency.
2 - Styles (colors, typography, spacing, etc)
The styles are all created in the Code Editor, which is a separate component of the Template Builder. These files control all of the desktop and mobile styles for a given website.
3 - Content (paragraphs, lists, photos, etc)
You can add content in the page editor, but another great feature of the COS is the ability to add default content. This feature helps others to get an idea of what the ideal content should look like. It’s also helpful in the development phase to give you something to reference while you’re writing the associated styles. Ultimately, this helps in drafting and flowing content, and keeping pages uniform.
Any tricks of the trade?
Robin Earle:
Learn CSS, brush up on your Google-fu, and as you work in the COS, learn and perfect shortcuts that will speed up the design process. It’s hard or impossible to institute every shortcut on a system level while keeping it uncluttered, which HubSpot has managed to balance very well. But, as a user, you’ll come up with your own shortcuts as well. I still use Notepad and a pen/paper when I’m developing.
Eric Levine:
Use the resources around you. I have great co-workers that have years of experience developing... I bother them a lot. The internet is also an endless resource to find answers. And HubSpot also has tons of resources for you to use at your fingertips.
Chris Mathieu:
Use global modules and global groups. For example, you could use a global group for something that appears more than once, such as a footer.
Use Custom modules which make it easier to develop and maintain separate modules included in one group. For example, a quote area could be made up of separate modules - the name, the title, the picture, the quote itself, etc - but can be included under one custom module; which keeps the look in tact from page to page, but also makes it easier for the end user (usually a marketer without much coding experience) to keep updated and prevents from having to manually apply styles and such.
Also, by using a custom module, you can easily clone it to make similar variations without having to start from scratch.
What other tools do you use to aide your work?
Robin Earle:
Adobe Photoshop and Illustrator, Google Chrome, Firefox, Stack Overflow (to answer CSS questions), Notepad, pen and paper, and coffee.
Eric Levine:
Adobe Suite, Google Chrome Inspector, and Google to look up code tricks.
Chris Mathieu:
The Adobe Suite (specifically Photoshop, Illustrator, Dreamweaver, Kuler and Bridge). Sublime Text 2 (and extensions like Tidy HTML), W3C tools, Icomoon for vector-based icon fonts… and the list goes on. Also BrowserStack is super helpful for doing cross browser/platform testing all from one machine.
How do you make the COS more robust?
Chris Mathieu:
Using custom fonts. Not everyone needs Helvetica - which is a beautiful font, but variety is the spice of life.
We also use HubL and custom jQuery (which is already included in the COS). When used in conjunction, these two can REALLY extend the capabilities of what’s possible in HubSpot.
Another great way of customizing on the COS is to repurpose the blog functionality for non-blog content. For instance, you can create dynamic pages like we’ve done here on Edison Partner’s team page. On top of that, you can use the RSS Listing Module to feature dynamic content on non-blog pages.
Robin Earle:
Proactively reaching out to HubSpot. The more contact we have with HubSpot, the more we can fill in any gaps. Everyone works as a team. We’re fans of HubSpot’s ideas section.
Any last thoughts, or tips you’d like to share?
Eric Levine:
For a new developer, such as myself, you have to be patient and persistent. You can't learn it all in one week, but if you keep searching for the answer, you'll find it. And next time you will be that much quicker.
Chris Mathieu:
You gotta have passion. I LOVE what I do. If you don’t think it’s fun to design and code, it’s going to be a tough road for you. You can’t force yourself to enjoy this stuff, it has to come from within.
That’s all we have for now folks, we don’t want to give away all our secrets! But stay tuned - we’ve got more in-depth posts coming your way!
Find more information on our blog, where you’ll learn design tips as well as inbound marketing and sales strategies and advice.
About the Designers:
Robin Earle
Robin Earle is a Designer/Developer at New Breed, where he designs anything from print pieces to COS websites. His passion for grammar and the English language is an uphill battle, but it helps him maintain his tenuous grasp on his sanity. When he’s not designing, he’s swimming, listening to Pink Floyd and taking photographs.
Eric Levine:
Eric Levine is a Junior Designer/Developer at New Breed. He recently graduated from Champlain College with a degree in Graphic Design, and has fully embraced the world of development in his time at New Breed. When he’s not designing, he’s outdoors, taking photographs or watching sports.
Chris Mathieu
Christopher Mathieu is the Vice President of Product at New Breed, where he oversees the creative strategy behind our web projects. His unique ability to combine his fine art background with his technical web expertise has lead Chris and his team to produce countless sales-ready websites. His passion is to educate and empower customers to leverage technology to reach their inbound marketing and sales goals.
