XebiaLabs Website V3 and Associated Projects

---

January 1, 2015

XebiaLabs Website V3 and Associated Projects

This post was written as an update post for XebiaLabs’ intranet. I will eventually get around to making it sound correct, but for now I’m unable to dedicate the time.

The website has been up for a couple of weeks now, but up until this point I’ve been too busy to put out and update post. This is the official high level overview of the work that has been done the past couple of months to make our new website happen.

Please take a moment to read through a couple of the sections to learn more about how we constructed the site, what it took to pull everything together, and how we successfully recreated our brand.

There are several parts included here that may not relate specifically to the website, but nonetheless played a huge roll in getting the website up and running.

New Website Environment

To get started here are some of the awesome tools that we are using the power the website. We have a number of custom solutions, but below you can view some of the fun toys that we are using to make the website chug along.

*I tried to list everything, but I’m sure I’m missing things. This is more of an overview.

CMS / Frameworks

Modx Revolution

WordPress

Twitter Bootstrap

jQuery

CSS

Animate CSS

Font Awesome

Zetta Menu

PHP

Marketo Client Library

Freegeoip.net

Mobile Detect

JS

WOW

Owl

jQuery Cookie

FancyBox

FitVid

MixItUp

ScrollToFixed

Stroll

Counter Up

Munchkin.js

Forms 2.0

Typekit

AddThis

Other Tools

Some tools we will be using soon enough will possibly include.

Node.js

Gulp

Bower

Yeoman

Beanstalk

Responsive Website

Our website now supports 4+ Devices / 4+ Browsers. It also caters its appearance to other device sizes, but for all intents and purposes it fully supports 4+ device sizes.

We have tested our website in BrowserStack many many times, and there are always issues, but for the most part our website is killing it on most device, browser, operating system combos.

Blog, Updates, Support, and Docs

Something that often times get overlooked during a website redesign is the satellite sites like the blog, support portal, intranet, and docs site. To date I have provided updated designs for all of these sites, or at least attempted to make them look similar to the main website for a consistent web experience.

Blog

Our blog now looks like it’s part of the main website. there are still some navigational challenges, but we’re working on those. FUN FACT about the blog… we currently have the header and footer pulling form the main website using php. This is great because when we make changes to the main website the navigational changes propogate to the blog immediately and this makes coordinating changes between our websites a breeze.

Updates

The updates site, like the blog, pulls it’s header and footer from the main website. Updates also uses the same theme as the blog. The theme is called wp-clear for any of those interested in checking it out.  We chose this theme because it is stripped down, doesn’t have many bells and whistles like many of the modern day themes are plagued with, and is optimized out the butt.

Zendesk

To update the support site we needed to choose a predefined them in their library and cater it as closely as possible. WE achieved this by changing many elements to match our color scheme, background images, and typographic elements. It looks like a stripped down version of our website, but gets the job done.

Docs

Right now I’m in the process of updating the styling for the docs site. It will involve many of the alterations that I implemented on the support site. Colors, images, typography, and general styling elements that will soon be coordinated for all to view here .

Email Templates

Like with the satellite sites, if you do a website you obviously have to redo all of the other collateral alongside it otherwise your brand gets all out of whack. For us this involved crafting 5 distinct templates for all of our 300+ emails in Marketo.

Then, we had to manually recreated those emails, update Marketo flows, and test the emails to make sure they rendered correctly. Heleen was a rockstar in taking care of this work, and deserves a medal!

Making sure all of the emails looked nice was also challenging. For those of you familiar with responsive email design you’ll feel my pain in this section. Designing a responsive email template the equivalent of designing a website in the early 90’s with all the bells and whistles of the modern day.

In the process of recreating the email templates we had to make sure they were compatible / tested against over 96+ device/ browser / client combos using Litmus. I will try and find the Litmus report to link here when I get the chance.

For those of you interested you can view the evolution of our email templates to the right.

Social Media

With the new look and appearance of the website, we had to update all of our social properties to better reflect this. They all now look uniform, clean, and our message is very clear.

The main challenge in achieving this was that we have a ton of social media outlets, and each one of these outlets requires creative assets in difference dimensions and resolutions. We had to generate many images to take care of this.

The other challenge was that all of our social media outlets had different messaing and creative so we had to come up with something that was new, clean, and effective.

In the future we will be doing fun things like creating branded intro to YouTube videos, Slide covers for Slideshare, etc. to bring a more branded experience to our social profiles.

Content Migration

Three months ago about 75% of our website was housed on Marketo. This included all content related landing pages, images, etc. This was obviously bad for SEO, didn’t integrate with our website well, and posed quite a few restrictions.

Dave and I took 2 days, migrated all of our content to the main website, formatted it appropriately and manually updated links.

Now, since we have access to all of our landing pages in MODx we can programmatically output content for our users dynamically based on their geographic region, industry, etc. We also have responsive landing pages that are far more optimized on the SEO front.

To make all of this work, we had do some extensive retooling of Marketo, but it was well worth it. Read about it in the next section!

Marketo Revamp

In the process of re-doing the website we migrated all of our landing pages, made drastic changes to permalink structure, and made extensive messaging changes.  These changes essentially broke everything we had set up already in Marketo.

In order for our Marketo instance to work properly Heather, Heleen, Dave, Necco and I had to recreate  everything from the ground up AND get it to play nice seamlessly with our existing instance so that when we flipped the switch on the new website nothing malfunctioned.

For example, a flow that stated:

“If filled out form on webpage containing /xl-resources/whitepapers/…”

had to be changed to…

“If filled out form on webpage containing /resources/whitepapers/….”

AND

Both of these flows had to function in tandem so that when the website switched over and permalinks changed we didn’t completely lose control over our Marketo setup.

This is a VERY TAME EXMAPLE…

In the process of doing this we collectively retooled over 2,000+ Marketo flows . After the launch we had to removed the overlapping flows, and test them to make sure the new ones worked.

For all of you that send me angry messages about things not working in Marketo please keep in mind that we collectively retooled our entire Marketo instance, a tool that we’ve invested 5 years of work into, over the course of several weeks.

Marketo Integration (One-to-One)

To be short, our website now has access to every single bit of “lead” related info on a lead-by-lead basis which allows us to cater almost every single aspect of our website based on the individuals.

I achieved this by writing a custom MODx plugin utilizing a PHP Marketo client for their SOAP API.

There were several major challenges with this relating to:

Inability to always access to Marketo cookie data

Caching / load time issues related to perpetually making SOAP calls to Marketo

Bad lead data. Many values are spotty at best across our entire database. First name, country, state, and company are some of the only well populated values

Disparities between region, industry, etc. values being used in Marketo, Salesforce, and other systems.

For many of these issues we have some pretty awesome solutions. For others we couldn’t really do much.

NOW, we can use lead related data to pull related resource, output industry / location / activity related data, and much much more. We could have an entire post related to this.

Multilingual Websites

Coding the website from the ground up allowed me to code with “multilingual” in mind. Doing this was infinitely more difficult, but also forced me to concentrate and code the website in a way that would allow us to scale out our presence to many many different languages down the line.

Our website will soon be in:

English

French

German

Spanish

Dutch

Currently we are using a combination of a plugin called Babel , built in MODx capabilities like lexicon entries, and other methods for achieving a fully multilingual website.

Something to keep in mind is that there are many aspects of our website that are constricted by our decision to make the website multilingual.  Web update now have to be made with 5 languages taken into consideration in addition to other facets of the website such as the responsive elements etc.

For more information on just the multilingual related challenges faced by web admins see this post .

Content Creation / Consolidation – Images, PDFs,

Our website has thousands of images. Some of these images existed on our old website, but most of them didn’t. In order to make our website look nice I had to break out photoshop, fireworks, or illustrator, and produce new creative. About 1,200+ times to be exact.

Necco and I painstakingly went through most of the images on our site, generated high resolution jpg images, and plugged them into our website.

All of our collateral is now in a central location and includes:

Customer Images

Plugin

Partner Images

Press Images

Whitepaper Covers

Case Study Covers

Video Covers

Template Components

etc. etc. etc.

APIs & Integrations

Our website currently integrates with a flotilla of APIs, 3rd party components, and tools that provide functionality. Below is a list of how we are currently using some of these tools, what we use them for, and how they interact with the website.

FreeGEOIP – For geolocating / enriching lead data.

TypeKit – For web typography etc.

Google Maps – For contact page / event pages that are coming soon.

Google Analytics – General analytics in addition to event tracking for a number of elements across the website, most notably the download buttons on the top of every page. We can also do A/B testing using GA, but have not yet implemented.

Disqus – Disqus provides all of the commenting functionality on our website.

AddThis –  AddThis is what we use for sharing buttons, and gives us amazing data on our sharing activities. We have this integrated with the Marketo munchkin.js tracking code so that we get sharing data in Marketo.

Zapier – Zapier will sync blog post information to main website, will send sms messages to remind users of webinars, and a couple of other fun things in the future.

HipChat – The blog sends HipChat notifications when users publish new posts.

Discover.org – Marketo will soon pull  info from Discover.org to enrich leads every time someone visits our website.

Full Contact – Marketo currently pulls info from Full Contact to enrich leads every time someone visits our website.

Litmus – Litmus helps us monitor email marketing effectiveness and make sure all of our correspondence looks pretty across devices and clients.

Olark – Olark currently works on the website, and is something we would like to rollout when we have time.

Twilio – Twilio will hopefully be used in the future for mobile marketing efforts based on what we are currently doing with webinars and Q&A

Optimizely – We have configured optimizely for A/B testing but may go with a built in MODx solution.

Other Fun Tools

While working on this web project a number of fun tools evolved that we will hopefully be able to use soon. Please take a quick glimpse at some of the ones that are in progress.

Online Style Guide  – Place where we can keep our brand style guidelines updated and consistent.

Signature Line Generator – For creating our signature lines. GETTING A FACELIFT SOON

Dossier – For viewing lead activity / data across Marketo, salesforce, and social. STILL VERY MUCH A WORK IN PROGRESS.

DING – For real time activity notifications.

Conclusion

We’ve come a long way with the website, and it will continue to grow and evolve as we move forward. We now have an eextremelypowerful platform on which to really grow our content including:

Plugins 50+

Customer Stories – 80+

Manuals, Guides, Documentation Etc. 30+

Support Materials

Blog Content

and once we’ve added / marketed  this content subsequently explode our traffic, downloads, and wallets.

Easter Egg

Add the class “hue” to the opening body tag while viewing the site, and it will get funky!