Quick Guide to Desktop Landers with Adobe Muse (32)
For many of you making landers can be a real time sink... especially if you are new and have minimal experience coding and tweaking HTML.
I have recorded a video tutorial that runs through some basics for using Adobe Muse to make landers quickly and then tweaking them.
The password is 'stmrocks'. I have made the video un-private and added the 1080p option, load it at Vimeo directly and hopefully fullscreen will work - not sure where that annoying bug comes from!
Here's a screenshot of the very basic lander I'll be making:
Links relevant to video:
Creative Cloud - https://creative.adobe.com/products
Kraken.io - https://kraken.io/web-interface
SublimeText - http://www.sublimetext.com/
Button generator - http://www.bestcssbuttongenerator.com/
Google Fonts - https://www.google.com/fonts#
CSS Minifier - http://cssminifier.com/
GTmetrix - http://gtmetrix.com/ or use something like www.willpeavy.com/minifier/ if you want to cram your code.
Also, if you want to tweak CSS i.e. you change text, button colours, positions etc., do this via Firefox like I demonstrate - the live changes make it very easy to tweak.
Peace out! 
(Reserved for collating questions if they pop up!)
Just downloaded Muse, it looks great, never used it before!
word of warning to ppl using muse. they use margins or something my dev told me. I made a multi page review lander with lots of content and it looks a bit off on some browsers. so before you put alot of time in it always test along the way with diff browsers.
great tool tho. for single paged landers etc makes creating them a breeze.
Great vid so far zeno, thanks for making it !
full screen or linking out isn't working for me on chrome. anyway to get it to full screen?
cheers
edit: watching it anyways. ZENO!! the allign tools. omg i didn't even realize they existed haha that would have saved me sooo much time. I did it all manually haha.. awesome !
good point to show even when you think you have a tool mastered probably something you missed.
Thank you Zeno, this came right on time for me!
I downloaded Muse yesterday and am going to play with it today.
Originally Posted by Mr Green
Originally Posted by bshimmer
You can then adjust margins/padding on each page if you want but I tend to position things relative to the browser window anyway, making margins redundant.
Great vid!
Hi Zeno, great video! Got some ideas for my mobile landing pages too!
Would minifying mobile landing pages be a good idea? Trying to reduce my load time and I tried the second minifier, full lander in cdn etc. Not sure if it will pose loading issues with phones, loads fine with gtmetrix etc.
Minifying is definitely a good idea for mobile. With mobile you want to reduce the number of connections required so it is wise to inline all CSS, use minimal images, etc.
Just use tools that contract the code and you'll be fine.
Thanks Zeno, I used this that you linked (www.willpeavy.com/minifier/), inline css and all. The load speed went from 0.8 ish down to about 0.5-0.6. Quite significant I must say
ps. how do you get that desktop so neat? Is that a program or just a wallpaper with an overlay, and you manually keep the program that neat? Love it! Mine is a mess. I need to organize my desktop and...basically everything in life.
I use two tools which I consider invaluable: Stardock Fences and Bins.
Stardock Fences lets you make the boxes on your desktop for holding icons, folder portals and multiple desktop layouts that you can flick between.
Bins lets you aggregate icons on your taskbar so that you can, e.g. have a single icon to give access to all your design tools, e.g.
It also lets you use windows key shortcuts... so in this example if I hold the windows key and hit 2 2 it will open Chrome. Windows + 4 4 would open Muse. Can be handy!
Hey Zeno, I can't believe it took me until now to watch this! I have been using Muse to make LP's, but discovered so many new tricks when watching this. Thank you so much!! Just a couple of questions.
1. How important is the removal of non-essential css?
2. How essential is the swapping for google fonts?
Not skilled whatsoever code wise and wondering vital it is considering the time it would take someone like myself to find each piece of code to remove vs leaving it as is. Thanks!
1. Has a substantial relative impact on site_global.css filesize (e.g. 6 KB > 1 KB) but this will have negligible impact on page load for someone with a decent connection. For mobile every kB counts.
2. Not sure, haven't tested. I imagine the Google CDN is a bit faster, not sure what the 'musecdn' is served through, but you have a higher chance of people having a Google-hosted font cached than from the 'musecdn'. I would run Pingdom tests on the original lander and have a look at how the font loading speed differs before/after, and go with the Google font if in doubt.
Hey man legit thread. Thank you for this.
Quick update:
Adobe has just released "2014" versions of Dreamweaver, PS, AI, Muse and so on.
The live view + live code + inspect mode of Dreamweaver, and the CSS panel, is now awesome for doing CSS changes. I recommend checking it out rather than using Firefox to preview live changes.
Awesome guide mate, the Minify is golden not just for speed but to make your code look fucked to people who jack your lander!
Great video Zeno. Have you found Cedexis to be effective?
They work fine albeit better if running more volume - if you're only running 50 clicks a day to a lander then it can take a while to get decent plots.
I just like them because it's easy and free and encourages me to do research on connectivity in countries.
NewRelic is better but only works for pages hosted on your server that have been delivered by the PHP processor (you can actually make HTML files get delivered as if they were PHP files).
@zeno: Thanks a lot for that awesome tutorial. I have just subscribed to muse and getting ready to do my first mobile lander. Can I use the same technique that you use in the tutorial (anchoring the text to the edge and setting the background to "scale to fill") to make my lander work with a phone and a tablet? I saw your desktop looking "Responsive" like in the tutorial. Thanks Zeno.
The scaling with browser window effect doesn't really transition to mobile responsiveness.
In phone/tablet landers what you need to focus on is the lander displaying nicely, not just resizing to fit the window width.
This requires media queries and CSS voodoo to make font-sizes and layout changes for portrait/landscape orientation and for different device screen sizes.
There's no real shortcut that I know of here - best to design a portrait-style page and test it on many devices (using e.g. BrowserStack) and add media queries to fix devices who show things far too small or too big.
Originally Posted by bshimmer
had the same problem in chrome.
To watch in fullscreen just click the 'Vimeo' icon in the bottom right of the video. This will take you vimeo's site where fullscreen will work. for some reason it just doesn't work embedded.
Yeah it's a Vimeo problem that we can't fix.
Any chance you could make the video downloadable?
Nope. STM trademarked and classified for member eyes only! Doing it this way is our best bet to prevent people leeching and disseminating forum video content.
dynamite once again, just saw this. At first i was sceptical about joining the forum, and without doubt I can honestly say it is one of the best things I could have done to help out my IM career. Resources exactly like this helped answer some of the question that I had, and the feedback from others has been great. Thanks once again Zeno.
Awesome tutorial, thanks. I have been learning all that I can about Photoshop and I've been making some decent landers. Your video taught me a lot.
Quick update: we are hopefully going to fix the fullscreen Vimeo issue that plagues us. It seems to be something that we can't control so we are talking to a VB expert!
Hi zeno, thanks for the great tutorial. I was also wondering, as I have a LeadPages account, is it advisable to use LeadPages landing page for AM offers (am thinking to start with Gaming offers)? Will there be any security issue or any problems I will encounter? Or it's best to just use the basic DIY as you taught in the tutorial? Thanks.
Thanks very much!
Would you have the URL for the video? It is really small here. Or better yet, would you be able to upload it to YouTube (unlisted if you like)?
Is Muse still the best program for non-coders? Is it good for mobile-only landers as well?
Really awesome tutorial, thanks.
Home > Design - Imagery, Banners & Landers > Landing Pages