At globalHMA we use various tools to help develop and maintain a client’s brand and generate brand awareness. Tools like Google Analytics, Excel, Adobe Creative Suite, Buffer, Campaign Monitor and Marketo help us work harder for our clients, simplify a lot of mundane processes and make reporting important metrics easier. One advanced marketing tool we use, Marketo, allows us to not only build email blasts and landing pages, but also to create, collect and manage possible leads. As with anything, there are some things in Marketo that are a little trickier to learn then others.

While we expect everyone on the globalHMA Marketo team to know the Marketo basics, we each play a key role as contributors. I primarily work with Marketo’s design studio and marketing program divisions to build custom email blasts, landing pages, marketing programs and smart campaigns. One thing I initially found challenging was learning to create fluid, responsive webpages in Marketo.

Fluid, responsive landing pages are webpages created to react or appear on many different browser window sizes and devices. In fact, the number of devices continues to rise, making responsive design even more critical. As designers, we choose to make a landing page responsive to serve users easy to read pages on smaller mobile devices like iPads, tablets or cellphones.

Marketo provides the average user with the ability to design and build some handsome-looking landing pages with its user-friendly, drag-and-drop landing page builder. Marketo’s user interface, however, makes creating fluid, responsive landing pages a bit trickier.

The issue isn’t necessarily the actual coding of these pages. Instead, the key to implementing a fluid, responsive landing page is getting Marketo to read my code the way I wanted it to read it. After a decent amount of time, research and experimentation with tokens and stylesheets, I was able to find a way to bypass their editor and create my own handsome-looking landing pages.

The drag-and-drop landing page editor uses absolute positioning to create landing pages. Absolute positioning arranges assets, such as forms, boxes, text and images, exactly where you want them on a specific set page size. Since these assets in the editor are absolutely positioned to one specific location on a page, it makes building fluid, responsive landing pages nearly impossible.

For example, if a rectangle is positioned 400 pixels from the left side of a webpage, depending on the browser size, this rectangle is hidden after your browser window’s width is smaller then 400 pixels. Instead of covering up assets when a browser window decreases in size, a fluid, responsive landing page either moves or resizes these assets. This way all the page’s elements are viewable and positioned exactly where the designer wants them to be. In addition, the user is able to view the entire page without missing the carefully crafted call-to-action.

By implementing fluid, responsive design on our clients’ Marketo landing pages, it allows our clients to capture anonymous web viewers and hopefully convert them into named leads. There is no horizontal scrolling or zooming required. Overall, fluid, responsive Marketo landing page produce a much enjoyable user-experience.

Jason Getz

Inventive designer, creative concept builder, and out-of-the-box collaborator

See author's posts