Hi Brice
Thank you for sharing your solution. Our solutions are essentially the same. Use Javascript to munipuldate the DOM in order to achieve RWD. Following your instruction, I try to imagine the steps you had to go through creating a RWD Marketo LP. So correct me if I am wrong about anything below.
I imagine you save each block of content in a text or HTML element, and use the name of element as the unique handler for a particular piece of content. The more complex the page, the more "container" you will have to add to the page because your solution relies on the name of the element as the unique identifier. When the page gets large and more complicated, there will be a lot of blocks to manages, and essentially more Jquery code map the content to the page. I do like there is no set up involved with jQuery on Marekto LPs. You can get into it right away. However personally I don't think jQuery is the answer for complex LPs and large marketing campagins.
Using jquery to move content on page load works for human eyes, but I am interested to find out if it works for the search engine. Google claims to index JS generated content but that only applies to Ajax generate content. I am interested to find out how Google reads your LP, if your LP relies on organic traffic to generate business, and Google ignores jQuery generated content, all the hard work is for nothing. I couldn't try your LP in webmaster tools. So if you can please try it out and share the result that'd be awesome.
I work with non-technical people. So my goal was minimum drag and drop in Design Studio and centrialized content managment. I put the Anjular.js code that takes care of the mapping is all in the template, so there is no set up involved when the LP inherits the template. The content manager only has to create one HTML element in Design Studio to store the content, and if the content manager has basic HTML kownledge he/she can include HTML or even JS in the code making it more flexible. I believe your solution works with static content swapping, but it's limited when it comes to HTML and JS code because Marketo's WYSIWYG editor auto generate HTML code to warp your custom content ( ie. a part of <p></p> ). It may break your content if it includes HTML or JS.
I chose Angular.js becuase its MVC concept. It's exetremly handy when if I want to loop through a data set to populate a table or repetitive content that follow a specific pattern. Instead of writing something like this in jQuery
numbers= array['1', '2', '3'];
$('div').each(function(i){
$(this).html(numbers[i]);
})and this in HTML
<div></div><div></div><div></div>Angular.js let developers handle it in much more managable fashion.
<div ng-init="numbers=[1, 2, 3]">
<div ng-repeat="number in numbers">{{number}}</div>
</div>Performance wise Angular.js beats jQuery although human eyes can hardly tell the difference, but Angular.js genreated content is indexed by Google, so the SEO part is taken care of. Again, if Google is not reading it, all that hard work is for nothing.
After all, thank you taking the time to read my post and share your thoughts. Hopefully Makreto will come up a UI sooner to support RWD. Mainchimp has a pretty elegant solution for their WYSIWYG email editor, may be they can buy it.
Cheers,
Desmond
.png)