SOLVED

Re: White Space on Landing Pages

Go to solution
Anonymous
Not applicable

White Space on Landing Pages

How can you remove white space from a landing page?
Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Anonymous
Not applicable

Re: White Space on Landing Pages

The average screen size are (in pixels):
 
480x320 (iPhone 1st, 2nd and 3rd generation)
800x480 (generic Android, Samsung often much higher)
1024x768 (iPad 1st generation)
 
iPhone5, iPad2/3 and most Android tablets have resolution close or better than many traditional computers. 
Quick comparison: Toshiba Tecra M1, built a decade ago: 1024x768. iPhone5: 1136x640.
 
Mobile devices use the HandHeldFriendly tag as an indicator that the page is mobile-friendly and the web document should be displayed without scaling.
<meta name="HandheldFriendly" content="true" /> 
That tag is not suitable for landing pages intended for mobile and computers. 
 
The Viewport meta tag is a safer approach:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 

View solution in original post

9 REPLIES 9
Anonymous
Not applicable

Re: White Space on Landing Pages

Do you want to provide a link to your landing page so that we can get a visual idea of what yo want to achieve?

If it's just background space then you might consider the dimensions.
Anonymous
Not applicable

Re: White Space on Landing Pages

I am trying to create an LP which can used for Iphone devices so I want to reduce the background/active area.

Thx
Belmond
Anonymous
Not applicable

Re: White Space on Landing Pages

Hi Cathal

This is my LP that I am working on:http://info.regalix.com/Mobile.html

Thx
Belmond
Anonymous
Not applicable

Re: White Space on Landing Pages

The average screen size are (in pixels):
 
480x320 (iPhone 1st, 2nd and 3rd generation)
800x480 (generic Android, Samsung often much higher)
1024x768 (iPad 1st generation)
 
iPhone5, iPad2/3 and most Android tablets have resolution close or better than many traditional computers. 
Quick comparison: Toshiba Tecra M1, built a decade ago: 1024x768. iPhone5: 1136x640.
 
Mobile devices use the HandHeldFriendly tag as an indicator that the page is mobile-friendly and the web document should be displayed without scaling.
<meta name="HandheldFriendly" content="true" /> 
That tag is not suitable for landing pages intended for mobile and computers. 
 
The Viewport meta tag is a safer approach:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 
Anonymous
Not applicable

Re: White Space on Landing Pages

Hi Breno

Thanks for the info. 

The steps mentioned here are they for Marketo or non Marketo LPs.

Thx
Belmond
Anonymous
Not applicable

Re: White Space on Landing Pages

In Marketo landing pages you would set the complete meta name="viewport" in Landing Page Actions - Edit Page Meta Tags - Custom head HTML

In a non-Marketo landing page it is added to page headers.


Anonymous
Not applicable

Re: White Space on Landing Pages

Thanks Breno, this worked for us..

Is there a way to redirect the page to a larger layout in case you access the page through a desktop instead of a mobile device?

Thx
Belmond
Anonymous
Not applicable

Re: White Space on Landing Pages

The simplest method is a JavaScript to identify the device. 
Another option is search "mobile" within the user agent (browser ID).
 
Safari on iPad running iOS 5.1 is identified as 
 
Mozilla/5.0 (iPad; CPU OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3

 
The script can be as simple as
 
jQuery(document).ready(function ($) {
 
    var $is_mobile = false;
 
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
        $is_mobile = true;
        // you can redirect directly from this point
        // use one of the methods only - uncomment the chosen method
 
        // similar to HTTP redirect
        // window.location.replace("http://your_mobile_friendly.com");
 
        // similar to clicking on a link
        // window.location.href = "http://your_mobile_friendly.com";
 
    }
    // keep processing the full landing page or do anything else if is_mobile = true
 
 
});
 
Anonymous
Not applicable

Re: White Space on Landing Pages

Hi Breno

This worked for us, however we see a lag before the mobile page loads.

The web page loads completely and it is then directed to the mobile LP. Any thoughts? The code is placed in the header of the web page.

Thx
Belmond