Here are the instructions as promised, and after receiving a number of requests asking how to make the Mobile Web Landing Page on the HubSpot platform. Anyone using another platform such as WordPress, I have a notation at the bottom. The header CSS I’ve supplied is what you’ll need for any platform, without the “#foxboro_” of course.
Select the Create Landing Page button
Select the simplest layout
You can follow through the steps if you know exactly what modules you’ll be using, but I’d suggest skipping the landing page wizard at this point.
Select Page Properties and fill in all the details as if you were creating a static page on your website.
Be sure to include your search engine tricks and tips to be found by Google
Select the Show advanced options link
Select the following options: Viewable by public and Hide navigation
Deselect Show in menu
Select the Layout option of One column. This will enable you to include any module you wish. Plus, one column helps with the simplicity of managing the page. Too many columns require more time to control the look and placement of your graphics.
The HTML Head Tag Text along with Custom CSS for the page is very important! Detailed below.
For this example, I’ve chosen to create a form mobile web landing page. So when visitors scan a QR Code, opt-in to an event contest, or sign-up for a blog/newsletter, they have the form fields show immediately. You can also set up buttons to take them throughout your website or redirect them to your YouTube channel. No matter what you choose, the data is being monitored and you have live updates on the information you’re collecting.
<meta name=”viewport” content=”width=320″>
This tag sets content for the device. The 320px is a standard setting for smartphones, and you can make it any size you choose, the phone will then adjust the graphics accordingly.
The next group of tags is CSS typed into the header of the landing page; remember to include <style> to tell the browser what to do. You can also have a custom CSS file in the file manager if you wish. Since the page is basic, I chose to keep the tags in the header.
Foxboro is the name of the template I use, and this layout will work on any template.
The width and height are important because Blackberry phones seem to lose the tail end of the landing page if left open. So set the height accordingly
overflow: hidden !important;
(Keeps the screen from scrolling left and right on a phone, you want the screen to fit perfectly side-to-side)
display: none !important;
(If you don’t need a header, but if you do, leave this out and create a custom header to size. You’ll need the background-image: url() tag for setting a header)
background: #E20303 !important;
(Your background color and height)
width: 320px !important;
(The width of the container holding the form module)
display: none !important;)
(This is so your footer is hidden. To keep the footer, set the width of the footer as with the container)
After you’ve completed the mobile web landing page, remember to use the Quick Preview when checking your work. The Add Module buttons push the graphics around a bit and distort the page.
The best part of this layout is you only have to duplicate the completed page when you want another mobile web landing page. Then go into the Page Properties and configure for the next campaign.
Below is an example of what you should see when viewing through your standard web browser, but when viewing through a smart phone, you’ll only see the colored area with form contents.
The difference in setting up a Mobile Web Landing Page on a platform such as WordPress compared to HubSpot is you’ll need to find the names of the template tags, which control the page. My suggestion is to set up a basic HTML page on your server using the configuration I have here. Then use FTP access when making changes. Using any number of text editor apps or full paid programs such as Coda, Dream Weaver, BBEdit, etc., will give you the same results, and in some cases, you’ll have greater flexibility.