White Space on Landing Pages

[Anonymous]

How can you remove white space from a landing page?

[Anonymous]

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]

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]

Hi Cathal

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

Thx
Belmond

[Anonymous · Accepted solution]

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;" /> 

Interesting reading containing examples of landing pages for mobile devices:
http://adpearance.com/blog/designing-mobile-landing-pages

iOS-specific
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/U...
 

[Anonymous]

Hi Breno

Thanks for the info. 

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

Thx
Belmond

[Anonymous]

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]

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]

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]

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