White Space on Landing Pages | Community
Skip to main content
A
Anonymous
January 31, 2013
Solved

White Space on Landing Pages

  • January 31, 2013
  • 9 replies
  • 2173 views
How can you remove white space from a landing page?
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by
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;" /> 

9 replies

A
Anonymous
January 31, 2013
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.
A
Anonymous
January 31, 2013
I am trying to create an LP which can used for Iphone devices so I want to reduce the background/active area.

Thx
Belmond
A
Anonymous
February 1, 2013
Hi Cathal

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

Thx
Belmond
A
Anonymous
Accepted solution
February 4, 2013
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;" /> 
A
Anonymous
February 5, 2013
Hi Breno

Thanks for the info. 

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

Thx
Belmond
A
Anonymous
February 5, 2013
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.

A
Anonymous
February 7, 2013
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
A
Anonymous
February 7, 2013
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
 
 
});
 
A
Anonymous
February 19, 2013
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
Terms & ConditionsAccessibility statement

Loading footer...