Because Marketo’s editor has the HTML elements in the order in which they are created, it is easy to become confused about the order of elements. For this reason, there needs to be established best practices for naming conventions of these elements. Dragging and changing the order that elements appear in the editor does not change the order that they exist within the DOM.
Let me dive into some details on how we organized this.
Twitter Bootstrap has its own organization and naming conventions for creating websites. We decided to use this for our example landing page because it is in wide use, and many people are familiar with it. As a responsive framework, Bootstrap uses rows to organize content. Within a row, there are other elements which take up a certain percentage of the width. At a certain point (mobile), these elements stack upon each other vertically instead of just shrinking horizontally.
We have organized our named elements by their row. The first row has “1” preceding the element name. If the HTML element open up a specific span within the row for another element (which can be dynamic, like a form), then it has “open” next to the row number. This way, we can keep the element (in this case, a form) with the correct name/CSS class.
“1close” element closes the span that was opened in “1open,” and it also marks the end of that Twitter Bootstrap row.
“2tiles” marks the second row, and because it does not have “open” or “close” in the element name, we know that it is its own self-contained HTML row.
You can see this in action on our example of a responsive Marketo landing page.
Leave comments if you have questions or suggestions for better naming conventions! Because this is pushing Marketo’s editor to its limits, there are many things that are still being worked out. Let me know if you have any improvements in the comments below!