How do I make my landing page mobile friendly?
Posted by The Team at Mindmatrix on 07 April 2016 11:30 AM
1. Follow these steps to create a new landing page template.
2. Under Setup > Asset Management > Templates, find your landing page and click on the image thumbnail to access the editor.
3. Once you are in the landing page template editor, click on the blue button on the top left. This is the page manager. It should display the name of the current page you have open in your display.
4. Click the check box on the page that you want to make into a mobile version and click on the "copy" icon.
5. Once the page is copied, click on the new page you have created. It should have the same name as the original, but include additional numbers or characters.
6. This new page you created will be your mobile page. Adjust this page layout to make all of your text, images and forms only 300px wide or select a width you would like the page to adjust to. The simplest way to do this is by using the "Size and Position" section in the text, image or form object windows. Configure each object to make sure the "x" value is "0" or close to "0" and less than "300" in the "w" or "width" field.
7. Once all of your text and images are set to the appropriate size and position, click on "Settings".
8. Adjust the "Page Width" in the settings to "300". Change the "Page Name" to "Mobile Page" and click "Save".
9. Click "Save" on this page on the top right.
10. Scroll up to the original page. This will be the "desktop" version of the landing page. Click on "Settings" on this page.
11. Under "Mobile Association" select your new "Mobile Page" you just created and click "Save".
12. You are now complete! Click "Save" on the top right and test your landing page on your mobile device to make sure the layout fits properly. Adjust accordingly.