jQuery
Code
Making Multiple Column Marketo Forms Responsive
By default, if you embed a multiple column Marketo form into a webpage the form will adopt a fixed width that will likely expand out of whatever container you put…
By default, if you embed a multiple column Marketo form into a webpage the form will adopt a fixed width that will likely expand out of whatever container you put it into.
You can restyle things, to a certain degree, with the custom CSS that Marketo allows you to edit, but this only gets you so far because of the built in html structure of the Marketo forms.
Because of this, I wrote a script that does a lot of the dirty work to make Marketo forms responsive regardless of viewport size.
The Script
The script will resize any Marketo form on the page upon rendering and on window resize. It does some math to calculate how many form fields there are per row and will apply an appropriate width to those rows for any viewport size.
One note is that you also have to include a simple media query for the mobile size. Don’t have time to get into that messiness in this post though.
After Running the Script
Desktop
Mobile
Conclusion
This is just one of the many things you can achieve with the Forms 2.0 api. I have a much more complete and fleshed out script that allows you to:
- Determine if you want the form styled
- Specifcy button alignment and text
- Strip out and entirely restyle the form
- Adapt the form for a dark or light background
- Alter radio and checkboxes styling
Comment below or contact me if you are interested in taking a look.
Code
How to Create Popups with Fancybox, jQuery Cookie, and Twitter Bootstrap
In this short little tutorial I’m going to show you how to easily create and implement popups that will help you drive awareness, gather emails, and all kinds of other…
In this short little tutorial I’m going to show you how to easily create and implement popups that will help you drive awareness, gather emails, and all kinds of other things that popups are used for without having to purchase something like OptInMonster.
Download and Include
Directions
Take a Look at the gist below. We have the popup HTML swiftly followed by the popup JS. You can cut and paste this code into you template once you’ve implemented the required scripts, but it won’t work until you replace the values in the double brackets -> {{ }}.
Line 1:
On the first line we have a hidden link that links to “#popup” which will be used later in a script to open the fancybox. You can ignore this for now…
Lines 3-22:
This is our popup with a picture on the left and a title / from on the right. Here is an example of what it looks like when implemented and opened in the fancybox. The id of this div is #popup which is the anchor used in the link on line 1. Notice that this div uses Twitter Bootstrap for the grid, and is hidden initially.
Line 24-53:
This is our script for opening the fancybox. What happens here is that:
- Line 29: We check to see the width of the screen. If it’s under 992px we don’t implement the popup (personal preference). You can take this out if you want, but popups are really annoying on mobile.
- Line 32: Next we have an if statement to see if the the popup we have implemented has already been opened. We achieve this by checking a cookie value “popup1”. If it is “viewed” we don’t open the popup.
- Line 34: If the “popup1” cookie is empty we then initiate a js timeout function to fire after 30 seconds.
- Line 35: After 30 seconds we use the FancyBox api open method to target the “#popup-up” link that we have on line one. That opens the popup div. After that we use the afterClose parameter to set the “popup1” cookie value to “viewed”.
- Lines 40 -46: These lines repeat the process in the lines above, but for a popup that is supposed to open after 10 minutes!
- That’s it!
Conclusion
That’s pretty much it. If you want to add other popups, or popups that open after various amounts of time it’s pretty easy to hack the code! Enjoy.
Questions below!
XebiaLabs Campaign Name & Tracking URL Builder
One of our challenges at XebiaLabs as our team has grown is that we’ve had to coordinate on things like tracking and analytics. This is very tricky because even the…
One of our challenges at XebiaLabs as our team has grown is that we’ve had to coordinate on things like tracking and analytics. This is very tricky because even the smallest problem like a capitalized letter can throw this off. To help our team coordinate I developed a tool that would allow us to have a source of record for our tracking and reporting efforts.
The URL builder pulls all of the resources on our website, and their associated information for the URL field. Once selected the resource it will automagically specify the content type in the Content field.
The following fields for Source and Channel have predefined options based on what we use the most.
As users select these fields the content on the right is updated. On right right we have our Marketo and Salesforce campaign names, a tracking link for the resource and the various UTM fields being used.
As users update the information there is a lot of magic happening in the background to turn all values into lowercase so you don’t have to set up filters in google analytics, although you probably should, in addition to a bunch of other fun things!
The Ultimate DevOps Tool Chest
The Ultimate DevOps Tool Chest was a derivative work of the Periodic Table of DevOps. In the process of gathering all of the info for the Periodic Table of DevOps…
The Ultimate DevOps Tool Chest was a derivative work of the Periodic Table of DevOps. In the process of gathering all of the info for the Periodic Table of DevOps I had to categorize, and arrange all of the tools into discreet groups, gather their images, and a hundred other things.
I started putting this into a visual representation so I could see my progress as I gathered the tools, and this eventually became the DevOps Tool Chest. It’s not really all that different from the periodic table. It just presents the information in a different, more complete, manner.
Take a look at the final product here.
Periodic Table of DevOps
The DevOps landscape is quite expansive. The depth and breadth of tooling available to us as companies is baffling…. All of this is compounded by the fact that many tools…
The DevOps landscape is quite expansive. The depth and breadth of tooling available to us as companies is baffling…. All of this is compounded by the fact that many tools overlap in their capabilities and are perpetually shrinking or expanding their offerings on a daily basis.
The Ultimate DevOps Glossary
One of the problems I routinely ran into at XebiaLabs was that not everyone knew the terms we would use in our webpages; terms like Continuous Delivery, Continuous Integration, DevOps and what those…
One of the problems I routinely ran into at XebiaLabs was that not everyone knew the terms we would use in our webpages; terms like Continuous Delivery, Continuous Integration, DevOps and what those terms actually mean in the context of what we are saying.
For this reason I created the “Ultimate DevOps Glossary” where my coworkers and I could define industry terms, provide video explanations, allow viewers to submit their own terms, and link to our related content to provide more context.
This part of our website, in addition to helping our potential customers, helped us to:
- Build our YouTube presence / increase links and traffic back to our site.
- Target common search queries for DevOps terms (What is Continuous Delivery?) in order to build traffic
- Provide educational content to be used throughout the site / blog to better explain our offerings
- Shuttle users to relevant content
Before we even began linking the terms within the content of our pages we noticed people reaching the terms from Google simply because we had included the published pages in our xml sitemap. We took this as a great indication of future success.
In its current form, the DevOps glossary is one of the most popular parts of our website.
XebiaLabs Product Diagrams
One of the biggest challenges XebiaLabs faces as a company is that when introducing our offerings to someone who doesn’t know of us they always ask how we fit into the…
One of the biggest challenges XebiaLabs faces as a company is that when introducing our offerings to someone who doesn’t know of us they always ask how we fit into the general devops environment. There is a really long and complicated answer to this depending on what tools the person is currently using, the processes / methodologies they embrace, and a number of other factors.
Therefore we decided to come up with an interactive visual that would convey the answer to this question, quickly, efficiently, and even take into consideration some things that we should touch on but don’t always when addressing prospects.
So far the response to these diagrams has been great. The only criticisms they have garnered are that they look static at first. In the future we may add a “pulsing effect” or some other indicator that the diagrams are interactive.
Challenges
The biggest challenge with this project was creating the lines between the individual integration categories, as well as gracefully making the diagrams responsive in a way that was still informative.
The diagrams all have a set width and height. The lines are all absolutely positioned divs with a 1px dashed border on the top or right depending on their vertical or horizontal orientation. The integration boxes are also absolutely positioned.
When the browser width shrinks to below a certain level, depending on the diagram we make the integration groups positioned relatively display block. This stacks them in a way that makes them still look appealing, and maintain functionality. Under a certain width we completely hide the lines.
For the main diagram the responsive version itself was a little too much. For this diagram we hid the diagram, and created a static fallback visual to maintain the meaning behind the diagrams.
Special Effects
For all of the visuals I used wow.js and animate.css to provide a “it’s all coming together” effect. When the diagrams come into the viewport the individual elements of the diagram fade in from all directions. I think it’s a pretty cool effect!
XebiaLabs Webinar Landing Page
I just finished a new webinar landing page template for XebiaLabs. This page was prompted by a webinar on Microservices hosted by some of the industries most famous thought leaders…
I just finished a new webinar landing page template for XebiaLabs. This page was prompted by a webinar on Microservices hosted by some of the industries most famous thought leaders on the topic. I was given a day to put a custom template together.
I think this template is a good representation of my ability to put together a visually appealing, functional, and integrated hub for a campaign on very short notice.
The page has a Marketo form, custom sharing button integration with integrated links, a custom jquery countdown widget, as well as a ton of other cool features that I pulled together at the last moment.