9 Replies Latest reply on Feb 19, 2013 3:00 AM by 23314

    White Space on Landing Pages

      How can you remove white space from a landing page?
        • 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.
          • 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
            • 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
              • 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;" /> 
                • 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
                  • 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.


                    • 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
                      • 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
                              
                              
                             });
                              
                        • 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