-
Tips for Developing a Custom Design for HubSpot CMS
At NMC, we develop 95% of our projects on our own Content Management System. Our system gives designers total flexibility and is very intuitive for end users, so it ends up being a good fit for just about all of our clients. However, occasionally clients come to us with a strong backend preference for certain reasons. This has happened a few times with the HubSpot CMS, due to the system's helpful business analytics and supporting community.
The HubSpot CMS wasn't originally developed for custom designs and is more geared toward the company's templates. However, with some elbow grease, you can get a custom look on there that follows HubSpot's requirements. We have now designed a couple of custom HubSpot sites (including SLX for Sun Microsystems) and put together this brief tutorial on some shortcuts to freely developing on the system.
Developing on an unfamiliar platform has it challenges, most of which is relinquishing control. For me, not having control of front-end conventions is frustrating. As a web standards enthusiast I’ve established patterns during the build-out of sites designed to minimize browser errors and cut down on development time.
So when it came time to dive in and work with the Hubspot CMS for the Yamaha Music School of Boston and Sun Microsystems' SLX, I went into the projects with the mild hesitation of having no idea what my experience would be like. Thankfully, I was pleasantly surprised with what I was able accomplish through some tricks and ingenuity. Here are a few tips and recommendations I’ve learned from my experience from using the Hubspot’s Business Website Manager:
1. Utilize the Color Scheme Configuration settings

Hubspot’s system generates a CSS styles that are placed within thebodytags, taking precedence of entire styles sheets I load to the DOM. Since the design specs I had to work with matched one of the systems page templates I thought it would be best to work within the confines of the system. This turned out to save me a lot of headaches later.2. !important important important
Everything I couldn’t accomplish within the Color Scheme Configuration I wrote into a new CSS file based on some id and class selectors created by Hubspot’s templating system. After uploading a file through the system’s File Manager and linking that file into the header using the Website Setting, I noticed some of file’s declarations weren’t rendering in any browsers. After a few minutes of digging I realized the styles were being overwritten by styles loaded further down in the cascading order. Adding ’!important’ to the end of css declaration value give it precedence over all other ‘author’ and ‘user agent’ styles, or styles created by the developer and browser:h1{font-weight:bold!important;}3. Use HTML / JavaScript to add custom code

When you need to add static content or custom images, you need to add a new page Module. Given all Module options, I recommend using plain markup. You can create things with a fresh slate and not be tied down by the templating system’s css conventions and markup. When you’re configuring your new module make sure you select the options to not use the module title and to use plain formatting. With those two items selected, you now have that clean slate to work with.If any of you are charged with developing a site on HubSpot, hopefully these tips are helpful in tackling the project. While HubSpot's system isn't ideal for totally custom designs, with some extra work, you can still put together an attractive site.
-
NMC Goes 5-1 in Off-Year Online Campaigns
As a political website design firm, New Media Campaigns is happy to report that in 2009, an off year for elections, the company went 5-1. NMC built online efforts in 5 different states for city council, mayoral, and levy campaigns.






The five winners were Stephanie Miner for Mayor of Syracuse, Luke Ravenstahl for Mayor of Pittsburgh, Bonner Gaylord for Raleigh City Council, the Hamilton County Library levy, and the Five Rivers Metroparks levy. Unfortunately, the Joe Merrill for Mayor campaign was unable to unseat Binghamton’s incumbent mayor, but he ran a spirited and professional campaign that we were happy to work with.
Each campaign brought a unique set of challenges and goals to the table, and the NMC team was eager to assist them.
We were proud to assist Romanelli Communications help Stephanie Miner become the first female mayor of Syracuse, and build an online fundraising infrastructure that helped raised tens of thousands of dollars online.
The Ravenstahl mayoral campaign website design was successfully launched in just one week’s time – a very rare feat for a website of any kind, especially for such a high profile race. This re-election helps the mayor continue his mission of moving Pittsburgh forward, which was featured in the NY Times this week.
Bonner Gaylord put together a sophisticated web effort that is rarely seen with local campaign websites. He used his site to register and organize hundreds of supporters. Furthermore, the fresh design and feel of the site helped differentiate the political newcomer from other candidates.
The two levies had the unenviable task of asking voters for money in a tough economy. They were able to both be victorious by building a strong coalition of supporters. Both campaigns successfully used social networks to broaden their message and engage younger voters. Furthermore, the library levy was able to recruit dozens of donors through yard sign and bumper sticker promotions hosted on the campaign site.
NMC has already began lining up clients for 2010 and will begin revealing its client list, including several statewide campaigns, over the coming weeks as the new campaign sites launch.
Thanks again to our partners and clients on a successful 2009 election and congratulations!
-
How we made a jQuery Events Calendar for The Salvation Army
New Media Campaigns recently developed and launched http://www.keepthebellringing.org for the Salvation Army of Wake County. Springboard Eydo, an agency partner, provided the excellent layout design that we incorporated into our content management system. Although the Salvation Army's website features are many, I want to focus on one feature in particular — the calendar.
Overview

The Salvation Army of Wake County website includes a monthly calendar that may be paginated into the past or future. Each calendar cell (representing one day of the current month) contains a list of events, similar to Apple iCal or Google Calendar. When you click an event link, a modal window appears featuring details about the selected event. This calendar is the result of carefully woven design, HTML markup, CSS styles, and jQuery scripts.
The Markup
We developed The Salvation Army website using the XHTML 1.0 Transitional DTD. In most cases, the markup will validate as XHTML 1.0 Strict. However, we opted for the Transitional DTD since a majority of the website's content is provided and controlled by the client. Here is a sample of the calendar's markup.
<ul id="full-calendar-legend"> <li class="all" id="all-events">All Events</li> <li class="orange" id="community-center-events">Community Center</li> <li class="blue" id="church-events">Church</li> </ul> <table id="calendar"> <thead> <tr class="calendar-heading-days"> <th title="Sunday">Sun</th> <th title="Monday">Mon</th> <th title="Tuesday">Tue</th> <th title="Wednesday">Wed</th> <th title="Thursday">Thu</th> <th title="Friday">Fri</th> <th title="Saturday">Sat</th> </tr> </thead> <tbody> <tr> <td class="calendar-cell calendar-cell-weekend first"></td> <td class="calendar-cell"><span class="calendar-cell-date">1</span></td> <td class="calendar-cell"><span class="calendar-cell-date">2</span></td> <td class="calendar-cell"><span class="calendar-cell-date">3</span> <ul class="calendar-cell-events"> <li class="all orange"> <a href="/page/summer-basketball-registration" title="See details for this event" class="thickbox calendar-event-orange">Summer Basketball Registration April 6-June 5</a> </li> </ul> </td> <td class="calendar-cell"><span class="calendar-cell-date">4</span></td> <td class="calendar-cell"><span class="calendar-cell-date">5</span></td> <td class="calendar-cell"><span class="calendar-cell-date">6</span></td> <td class="calendar-cell calendar-cell-weekend last"><span class="calendar-cell-date">7</span></td> </tr> </tbody> </table>
Yes, we used a table for the calendar markup. A calendar is, in fact, tabular data. Week days (Sunday, Monday, Tuesday, Wednesday, Thursday, Friday and Saturday) are table columns, and days of the month are table cells. We added meta annotations to the calendar markup in the form of class attributes. For example, we annotated table cells with classes like
calendar-cellandcalendar-cell-weekend.The CSS
Our CSS is clean and easy to understand. This simplicity is the result of well-annotated HTML markup. By annotating our HTML markup, we can quickly and easily isolate and style the appropriate calendar elements.
#calendar{ width: 800px; font-family: helvetica, arial, verdana, sans-serif; font-size: 0.917em; margin: 40px 30px 0 30px; } #calendar thead tr.calendar-heading-days th{ text-align: center; font-weight: normal; } #calendar tbody tr td{ width: 100px; height: 80px; border-top: 1px solid #b8b096; border-right: 1px solid #b8b096; } #calendar tbody tr td.last{ border-right: none; } #calendar tbody tr td.today{ background: #b8b096; } #calendar tbody tr td ul{ margin: 0 0.5em; } #calendar tbody tr td a{ color: #fff; text-decoration: none; font-size: 10px; color: white; line-height: 11px; display: block; width: 100%; margin: 2px 0; padding: 1px 2px; } #calendar tbody tr td a.calendar-event-blue{ color: blue; background: blue; } #calendar tbody tr td a.calendar-event-red{ color: red; background: #bb2f2d; } #calendar tbody tr td a.calendar-event-orange{ color: #d53b27; background: #FF6600; } #calendar tbody tr td span.calendar-cell-date{ display: block; text-align: right; padding: 0.25em 0.5em; }The Javascript

The calendar behavior was created using jQuery and Thickbox. Here is the relevant snippet from the HTML markup above.
<a class="thickbox calendar-event-orange" title="See details for this event" href="/page/summer-basketball-registration">Summer Basketball Registration April 6-June 5</a>
We annotated the hyperlink with the
thickboxclass. When the link is clicked, a Thickbox modal window appears and loads the referenced resource with AJAX. We also provided a mini calendar that is used throughout the rest of the Salvation Army website. You can see this mini calendar on the home page in the left column.
Like it's larger version, the mini calendar provides a small color-coded link in the appropriate table cell for each event. Each event link's color represents a specific calendar, as described in the calendar legend. When a color-coded link in the calendar legend is clicked, all relevant events in the mini calendar are shown; events with other colors are hidden. We relate events visually with colors and programatically with class annotations. For example, each link in the calendar legend has a class attribute similar to
<li class="blue">...</li>. Each event link in the mini calendar has a class attribute similar to<li class="all blue">...</li>. Class annotations create a parent-child relationship between calendar and event; class annotations also establish calendar view states using the following jQuery script. We referenced the color class attribute in our CSS style sheet to customize the calendar appearance. We also referenced the color class in our Javascript (see below) to customize behavior.function showMainEvents(eventClass){ $('.calendar-cell-events .all').hide(); $('.calendar-cell-events .' + eventClass).show(); } $('#full-calendar-legend li').click(function(){ showMainEvents($(this).attr('class')); });Merging design and programming
The Salvation Army website and calendar demonstrates how New Media Campaigns merges design and programming to create stellar user experiences. Head over to our portfolio to view more of our work.
-
Launching a Political Campaign Website in Just One Week
This post is meant to shed some light on the NMC process and how we're different from many other web firms out there. As a web design firm that works with dozens
of political campaign websites, we've noticed candidates are already eager to gear up for the 2009 and 2010 cycles. This trend can probably be attributed to the campaigns witnessing the success of President Obama's online campaign.Over the past couple weeks, we've launched several online campaigns and had numerous others contract with us to begin building their sites.
However, one recent campaign website stands out as unique among them, because of the way and speed with which the site was planned, designed, implemented, and launched. The site is for Pittsburgh Mayor Luke Ravenstahl, and the entire process took only seven days!
We pride ourselves on our service philosophy and quick turnaround, but this site really takes the cake for speed and results. Much of the credit, however, is owed to the Ravenstahl campaign for their great feedback and timely deliver of necessary content.
What's most striking is that this turnaround is not some unattainable goal, as many people believe. Much of the credit goes to the amazing campaign staff for helping out by getting us all the information and feedback we needed in a timely manner.
Here's a timeline of how the Ravenstahl for Mayor campaign website took shape:
- Monday, March 13 - The campaign fills out our standard Creative Brief. The CB is the document that guides us through the creative process by giving us into the campaign's themes, aspirations, and ideas. The campaign answered all of the questions and got us the necessary materials such as their logo, candidate headshot and pictures.
- Wednesday, March 15 - We returned the first draft of the design to the client. Thanks to their great answers on the CB, we very nearly nailed it with the first draft.
- Thursday, March 16 - We work with the campaign to iterate on the design based on their feedback. Mostly small changes pertaining to minor layout and menu changes. We also draft the interior page design based on the latest iteration.
- Friday, March 17 - The campaign approves the design and we begin coding it onto our Content Management System. We code each of our sites in CSS onto our system, ensuring that the custom design is completely controlled by the CMS.
- Through the weekend - Our team worked over the weekend to finish the coding and get the site up on our test server by Monday morning. The campaign was awesome and sent us great content throughout the weekend, allowing us to load it into the site through the CMS as we tested across browsers and hooked up interactive features.
- Monday, March 20 - Final proofing by the campaign and we launch the site in time for the Mayor's noon announcement. The whole process took just seven days and we owe a lot of the credit to the campaign for being so helpful.
The site has been well received so far. We plan on continuing to build out new features and the campaign will continue adding content through the CMS, but it's a great starting point for an important race.
We were very excited when we were first selected to be involved with such an awesome race, and have only got more exhilirated as we've seen how truly awesome the campaign is to work with. In case you haven't already, be sure to check out the site.
I hope you found this post interesting to learn more about our process and how we work with political campaigns around the world (we recently just signed our first two international clients, so we can now say that). Do you have any exciting launch stories of your own that you want to share?
-
Helping Ronald McDonald House Charities of North Carolina Share a Heart
Launching a non-profit online marketing campaign to engage donors around the Carolinas.
Ronald McDonald House Charities of North Carolina has run a Valentine's themed campaign for the past couple years known as "Share Your Heart." It has been a point of purchase campaign where shoppers at selected stores can donate a dollar after making a purchase and then give a paper heart to someone close to them.
This year, their PR Firm, McKeeman Communications and marketing firm, Grace Strategic Marketing, thought it would be great to add an online element to extend the reach of the campaign to those who may not see the point of purchase promotion.
The team came to us, knowing that we act as a web development partner for PR firms and have launched dozens of non-profit website designs to implement the design and set up the design for the new rmhcnc.org as a portal to this campaign.
We also had the idea to let people send virtual hearts to friends from the site, in order to establish it as more of a destination and to refer other people to the campaign.
The team loved the virtual heart idea, and we were off to the races.
After coding their design, we designed the Virtual Heart feature, which allows visitors to personalize a heart (seen above) and send to up to 10 of their friends. The friends get an email that refers them to both the heart and the main site.
This site is a great example of how to take current campaign, move it to the web, and add an online touch that encourages usage. By building in the Share a Heart online feature, the campaign automatically gains legs and expands its network of visitors/donors far beyond the original visitors.
Please join the movement and visit the site to share a heart this Valentine's season.
-
Growing (Staches) With Our Clients
For the second year in a row, we built the website for the Charlotte Chapter of Mustaches for Kids. The group was started by Joe Romanelli, president of Romanelli Communications, one of our ad agency partners that uses our content management system for designers. While we worked on the site last year, we did not participate in the event.
However, Joe used his superior salesmanship this year to get Joel and myself involved in the organization as growers. So, for the past 4 weeks, we've subjected ourselves to public shame as we grew mustaches. Joel's could best be characterized as a "trash stache" while mine would more aptly be described as non-existent.
It was a lot of fun to be involved and the organization was extremely successful. This year the growers raised over $50,000!! That's not even including matching funds from institutions around Charlotte. By being the most successful chapter in the nation, M4K Charlotte also won an additional $75,000 from the Knight Foundation to distribute to schoolroom charities around Charlotte.
Not only did we grow staches for the organization, but we also built out some custom features to help engage and excite the growers. Each grower had the ability to create their own profile on the website. With the profile, they could easily edit their information and post pictures of their stache's progress.
By integrating with DonorsChoose, a non-profit aimed crowdsourcing funding for projects posted by teachers around the country, visitors were able to visit the M4k website, view growers' profiles, and easily donate to their favorite participant.
The website was a great hit and allowed growers to have full control of their web personas, leading to some very funny profiles.
Congrats again to Mustaches for Kids Charlotte and to all of the "talented" growers and wonderful donors!
-
Troubleshooting large vendors
We recently launched http://trailwear.saranac.com and http://schultzanddooleyonline.com for Saranac Beer. Both websites are custom Shopify ecommerce stores. After two weeks of successful store operation, however, shoppers reported that both Shopify-driven stores were suddenly inaccessible in Internet Explorer 6 and Internet Explorer7. Until this point, both stores operated and displayed perfectly in all major browsers including Internet Explorer 6, Internet Explorer 7, Firefox, and Safari.
We first triple-checked our own code, and we concluded that nothing was wrong with our Shopify template's HTML or CSS. Next, we browsed the official Shopify forums. According to recent forum posts, Shopify performed maintenance on their web and statistics servers the previous day to optimze their servers before the expected holiday rush. These changes unexpectedly interrupted many customers' Shopify stores the following day. We emailed the Shopify technical support team alerting them of our own situation, and they confirmed our issue was likely due to the maintenance issues and that they would correct the issue within two or three hours.
Several hours passed, and our client's two Shopify stores were still inaccessible in IE6 and IE7. We emailed Shopify technical support once more alerting them that our issue persisted, even after they had fixed the previous day's server issues. Their response: our templates may be requesting a resource that did not exist. But wouldn't this return an HTTP 404 Not Found error code? We again checked our template's HTML and CSS calls for non-existant resources, and we were confident this was not the issue. Our HTML and CSS were fine. After all, the two stores were working perfectly for two weeks before this issue arose.
We knew it was not an HTML or CSS issue. We knew the error was an HTTP 406 Unacceptable error (when a web browser receives the content but does not recognize the content). This led us to believe the content returned by Shopify did not have the correct mime-type. We searched through our HTML and CSS once more until we found the resource in question.
We referenced a file called "csshover.htc" in our IE6-only CSS stylesheet to enable the :hover psuedo-selector for all DOM elements in IE6; by default, IE6 only recognizes the :hover psuedo-selector on elements. Many web developers use the "csshover.htc" technique to enable semantically correct dropdown CSS menus in IE6. Shopify's nginx web server served the "csshover.htc" file with the "www/unknown" mime-type causing IE6 and IE7 to diplay the 406 error. Instead, Shopify's web servers should serve ".htc" files with the "text/x-component" mime-type.
A quick Google search found http://support.microsoft.com/kb/306231. This URI provided the solution for this issue. We emailed this solution to Shopify and are awaiting their official response.
This brief case study demonstrates the depth of our technical expertise and our desire to provide detail-oriented services to our clients. We also try our best to find answers to and provide proactive solutions for the problems we face, even if the problems are caused by large and reputable vendors like Shopify that we have come to use and trust for our day-to-day needs.
Please note that this case study is not a negative criticism of Shopify. Instead, this case study is a critical analysis of a large vendor's technical issue that we experienced and the proactive process we took to solve the problem. Shopify's customer support is top-notch. All of our support emails were answered within 15 minutes, and Shopify's designers and engineers have been alerted of this issue. We stand by Shopify's steller service and support, and we will continue to use them for our future ecommerce needs.
-
Congratulations to All of Our Candidates
As a campaign website designers, we had our eyes glued to the TV last night, monitoring elections in numerous states where we had candidates. Overall, it was a good night for our team, winning 12 out of 17 races that we were involved in, which is over a 70% win rate. The wins ranged from Congressional down to local judges; we think each of our candidates did an exceptional job in their races and we were honored to be involved in each of these races.
One accomplishment that pops out is that we won in every levy or ballot issue that we were involved in. We had ballot issue websites in Arizona, Florida, and Ohio, winning a total of 6. These victories pop out to me, because I think frequently ballot and levy issues overlook the importance of having a strong web presence. However, I think it can really make the difference when educating people on what can sometimes be very complex ballot language and mobilizing supporters from across the state. Vote Yes for Polk County and the hometax Amendment in Arizona are two campaigns that really embraced the web as a medium to educate and mobilize voters from around their state.
One race that didn't turned out as we hoped, but I still think deserves praise is Larry Joe Doherty's campaign in Texas. LJD ran in a district that no Democrat was ever supposed to be competitive in, and he was able to make the race extremely close, losing 52-48 (UPDATE: LJD Actually ended up losing 54-43 after all votes were counted. Thanks to Bob for the clarification). The campaign embraced the website by putting a priority on having us design a robust and attractive campaign website (as verified by www.votethesite.com's results). They leveraged email marketing techniques, pushing people to their site, raising tens of thousands of dollars online, and signing up hundreds of volunteers. While the race didn't end up in the W column, we want to commend the campaign for doing an amazing job and catching the attention of politicos from across the country.
We're thankful that we were able to work with such a great bunch of candidates and wish the victors all the success in their new positions.
-
Financial Services Firms Online Marketing Not Up to Par
A new article at MarketingVOX based on surveys from MarketBridge and SourceMedia reveals that financial services firms lag in digital marketing. The survey found that financial services firms have been slow to embrace key new online marketing strategies such as Search Engine Optimization, Search Engine Marketing, and Social Media.
The results show that financial services marketers are certainly aware of digital media, with half of those surveyed expecting digital marketing "to be an integral part of the marketing mix within the next two years." However, even with this anticipation, the shift of their marketing resources to digital mediums has been slow and hesitant. A MarketBridge Senior VP summed it up by saying:
"These findings show that the foundation is in place for marketers, but they are not shifting budgets fast enough to fully understand the value and impact of these new tools and platforms"
These results are extremely surprising to me, as I view digital marketing to be a key step for financial services firms. More and more financial services are moving online, meaning that people are seeking out vendors from that medium more often than ever before. Think about it - when was the last time you waited for your bank statement to come in the mail rather than just looking it up online? Or when you were searching for a good interest rate, you most likely Googled for different rates and banks interest policies.
When an industry is naturally trending to a medium, it only makes sense that it's marketing should follow suit. One of the first rules of marketing: be where your customers are. The financial services needs to catch up and get to where their customers are - search engines, social media, and online in general.
We were lucky enough recently to design a financial services website for a new firm in Charlotte, NC. The firm, XBS Global, has a focus on electronic payment services. They understand that many of their clients will find them online - so they prioritized a website as one of their first marketing expenses and are now launching an aggressive Search Engine Marketing campaign. From SEO to PPC, they're working to get where their clients will find them. We've helped them with their SEO and are currently building landing pages for their PPC campaign.
We're definitely lucky to have XBS as a client and it's great to see them outfoxing their industry - I'm just surprised that so many other financial services firms haven't figured it out yet. Thoughts on why they haven't or other industries that have some catching up to do?
-
Improving Saranac Beer's Website and Moving Them to a Content Management System
I wanted to take the time to write about one of our recent projects that we're really proud of. We recently implemented a new site for Saranac, a nationally distributed and absolutely delicious beer company based in Utica, NY. The site was designed by Romanelli Communications, one of many firms across the country that use NMC as a strategic web partner for advertising agencies.
Sarnac's previous site was cumbersome to navigate and nearly impossible to edit content. They knew that they wanted a streamlined navigation structure and the ability to constantly refresh content. After seeing a demonstration of our content management software, Saranac management instantly knew that this would be the best way to frequently update their web content.
Romanelli provided us with a beautiful design and we set about putting it onto our Content Management System. Every area of the site is completely controlled by the system, allowing Saranac to highlight new contests, popular brews, and breaking news on their homepage. Also, by incorporating some web 2.0 tools to enhance their site, Saranac has been able to start a conversation with their consumers. Whether it's the ability to comment on interior pages or sign up for the latest events, Saranac visitors are able to use the site to easily communicate and interact with the brand.
So far, the site has been a success. They've been able to use the Content Management System completely independent of assistance from us, have registered numerous visitors for different contests, and received dozens of comments on the interior pages of the site.
We're really proud of Romanelli Communications' design, our team's implementation, and Saranac's embrace of content management and web 2.0 tools. Let us know your thoughts on the site.










Network with Us