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.
4 Comments
Do you have examples I could see? Thanks!
Hi Ben, Unfortunately, due to client confidentiality and ownership, we are unable to show you any real examples of our Marketo responsive design work.
Jason, I’m in the same situation as you were when you wrote this. Am I right in thinking that you can produce responsive landing pages for Marketo but you cannot then drag and drop assets because they are absolutely positioned. Did you find away around this or are you creating the pages custom each time with the assets?
Thank you. When I wrote this blog post, Marketo hadn’t introduced its new WUSIWUG mobile landing page editor. You should now be able to drag and drop content into the new landing page builder. I did find a way to build around Marketo’s previous landing page builder, but it was quite extensive. If you want to learn how I built the pages before Marketo released its new builder, you can email me at j.getz@globalhma.com.