{"id":18461,"date":"2020-03-11T15:44:46","date_gmt":"2020-03-11T10:14:46","guid":{"rendered":"https:\/\/email.uplers.com\/blog\/?p=18461"},"modified":"2020-10-28T17:31:09","modified_gmt":"2020-10-28T12:01:09","slug":"quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/","title":{"rendered":"Quintessential Mobile Landing Page Tips (that no one is going to tell you)"},"content":{"rendered":"\n<p>A well-designed landing page can drastically change the course of your business. Whenever you are creating a landing page, you should always focus on drawing the user&#8217;s attention and converting them. Instead of having tidbits of important information inconsistently spread over the <a href=\"https:\/\/email.uplers.com\/infographics\/landing-page-best-practices\/\">landing page<\/a>, you should be able to convey its purpose and the unique value proposition.  <\/p>\n\n\n\n<p>With marketers struggling to adapt their websites to mobile visitors, enticing someone to fill out a form on a small screen while on the go is no simple task. Put that lead generating page on mobile and you\u2019ll see those differences expand and even test the limits of what you thought was possible for mobile.<\/p>\n\n\n\n<p>From designing to deliverability, these tips will guide you towards a better performing mobile landing page.<\/p>\n\n\n\n<div class=\"banner_wrapper\" style=\"\"><div class=\"banner  banner-17425 bottom vert custom-banners-theme-default_style\" style=\"\"><a class=\"custom_banners_big_link\"  target=\"_blank\"  href=\"https:\/\/email.uplers.com\/landing-page-design-coding-services\/\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"200\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/02\/landing-page.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/02\/landing-page.jpg 800w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/02\/landing-page-300x75.jpg 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/02\/landing-page-768x192.jpg 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/02\/landing-page-624x156.jpg 624w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Layout<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Design to achieve mobile goals<\/h3>\n\n\n\n<p>Desktop visitors usually\nhave more time and a 10 times bigger screen, so they\u2019re able and willing to\nlook around your site in search of what they need. Some of them may even be\nwilling to scroll to the very bottom of your page, even if it\u2019s a long one.<\/p>\n\n\n\n<p>With mobile users, the\nsituation is quite the opposite. People usually use mobile devices when they\nhave only one goal in mind. They\u2019re browsing for it on a much smaller screen\nand seeing it crowded with useless information is a big turn off. If they sense\nthat the search will take forever, they\u2019ll simply give up.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Stay above the fold<\/h3>\n\n\n\n<p>On mobile devices,\nputting all the information you want your users to know will always seem like a\nlot. There\u2019s no way around it, but you can ask yourself if they really need all\nthe information in the beginning.<\/p>\n\n\n\n<p>You can get out of this\nsituation by utilizing the newspaper concept called \u2018above the fold.\u2019 It is\nquite a simple one &#8211; important news needs to appear on the top half of the\nnewspaper, meaning above the point where it was folded. This concept can easily\nbe translated to a mobile landing page, where the fold is the bottom of the\npage which can\u2019t be seen without scrolling.<\/p>\n\n\n\n<p>A\nstudy done by Google on viewability insights revealed that content below the\nfold had 30 percent drop from the 73 percent viewability of the content above\nthe fold.<\/p>\n\n\n\n<p>This landing page by Hulu\nis a perfect example of keeping important content above the fold.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"473\" height=\"1024\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/1-473x1024.png\" alt=\"\" class=\"wp-image-18462\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/1-473x1024.png 473w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/1-139x300.png 139w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/1-768x1662.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/1-65x140.png 65w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/1-624x1350.png 624w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/1.png 924w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/figure><\/div>\n\n\n\n<p>In the background of their free trial landing page, the most popular current TV shows are on display, instantly compelling users to sign up to get access. Also, note that the CTA is designed in such a way that it stands out and captures the user&#8217;s attention.  <\/p>\n\n\n\n<p>Keeping your best content above the fold is key. But that doesn\u2019t mean you can\u2019t have a longer landing page.<\/p>\n\n\n\n<div class=\"banner_wrapper\" style=\"\"><div class=\"banner  banner-17426 bottom vert custom-banners-theme-default_style\" style=\"\"><a class=\"custom_banners_big_link\"  target=\"_blank\"  href=\"https:\/\/email.uplers.com\/dedicated-team-price-model\/\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"200\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/01\/Web-Banner-J_V1.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/01\/Web-Banner-J_V1.jpg 800w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/01\/Web-Banner-J_V1-300x75.jpg 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/01\/Web-Banner-J_V1-768x192.jpg 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/01\/Web-Banner-J_V1-624x156.jpg 624w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">3. Use a single column layout<\/h3>\n\n\n\n<p>Phone screens are\nessentially a single vertical column and breaking away from this can be\ndistracting. That said, there are times when you want to jar people\u2019s attention\nso the occasional section of columns or misaligned content can be more powerful\nthan an otherwise single-column design.<\/p>\n\n\n\n<p>Since\nthat is one of the most important limitations how visitors interact with a\npost-click landing page, make sure that your leads don&#8217;t have to pinch in and\nout on the screen.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"1000\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/2-ZOHO.jpg\" alt=\"\" class=\"wp-image-18465\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/2-ZOHO.jpg 600w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/2-ZOHO-180x300.jpg 180w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/2-ZOHO-84x140.jpg 84w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p>This mobile landing page\nexample from Zoho has a concise headline at the top of the page. It tells you\nexactly what you need to know and nothing more. And the content below is in an\ninverted pyramid structure. This will lead the reader directly to the CTA.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Optimize for mobile viewing<\/h3>\n\n\n\n<p>How many times have you arrived on a landing page that clearly hadn\u2019t been optimized for mobile? It\u2019s one of the biggest blunders a marketer could make. <\/p>\n\n\n\n<p>Take a look at these\nexamples of a landing page before and after optimizing.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"255\" height=\"378\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/2-1.png\" alt=\"\" class=\"wp-image-18466\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/2-1.png 255w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/2-1-202x300.png 202w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/2-1-94x140.png 94w\" sizes=\"auto, (max-width: 255px) 100vw, 255px\" \/><figcaption> Before <\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"255\" height=\"374\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/3-1.png\" alt=\"\" class=\"wp-image-18467\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/3-1.png 255w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/3-1-205x300.png 205w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/3-1-95x140.png 95w\" sizes=\"auto, (max-width: 255px) 100vw, 255px\" \/><figcaption> After <\/figcaption><\/figure><\/div>\n\n\n\n<p>Keep any font on your mobile landing page at least 16 pixels in size to make it readable. This will ensure that the layout is mobile-friendly and could avoid a massive turnoff to a prospect.<\/p>\n\n\n\n<div class=\"banner_wrapper\" style=\"\"><div class=\"banner  banner-17419 bottom vert custom-banners-theme-default_style\" style=\"\"><a class=\"custom_banners_big_link\"  target=\"_blank\"  href=\"https:\/\/email.uplers.com\/interactive-email-templates\/\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"200\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/07\/rich-media.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/07\/rich-media.jpg 800w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/07\/rich-media-300x75.jpg 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/07\/rich-media-768x192.jpg 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/07\/rich-media-624x156.jpg 624w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">5. Design for touch<\/h3>\n\n\n\n<p>One of your biggest\nchallenges with mobile post-click landing page design is making sure it\u2019s as easy\nas possible for visitors to take action. That action could be a form submission\nor a simple tap on a button. You would expect most people are going to make\nsome adjustments, but that\u2019s not always the case. Adjusting the size of any\ntext element that is hyperlinked is particularly helpful. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Implement scrolling cues<\/h3>\n\n\n\n<p>If your landing page is longer in size and requires scrolling,\nthen don\u2019t forget to aid your visitors with scroll cues. When there\u2019s nothing on the screen indicating\nthat you need to scroll to see more content below, clicking the back button and\nleaving your landing page is easier.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"2000\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/4-1024x1024.png\" alt=\"\" class=\"wp-image-18468\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/4-1024x1024.png 1024w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/4-150x150.png 150w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/4-300x300.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/4-768x768.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/4-140x140.png 140w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/4-624x624.png 624w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/4-24x24.png 24w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/4-48x48.png 48w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/4-96x96.png 96w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/4.png 2000w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/figure><\/div>\n\n\n\n<p>This Snack Fever landing page ends with a CTA on the first page\nbut has a pointer which indicates there is some more content you can view.<\/p>\n\n\n\n<p>Don\u2019t assume that the customer will take your desired action, like\nscrolling down, automatically. You can hint the user\u2019s eyes for more content by\ngiving a sneak peak of the next section. Or giving a directional arrow to guide\nthem.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Visualization<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1.&nbsp;Plan your copy<\/h3>\n\n\n\n<p>The ideal length of the\ncopy will depend on what you\u2019re selling and who your audience is, only then you\ncan test to determine the length of the copy that converts best. However, once\nthe content has been condensed into a mobile format, you\u2019ll need to especially\nconsider how much your users will be willing to read and how far they\u2019ll scroll\nbefore you lose the opportunity for a conversion.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2.&nbsp;Skip the small talk<\/h3>\n\n\n\n<p>Mobile landing page copy plays\nan important role in lead conversion. The copy should be short yet impactful. It\nshould be immediately obvious what a visitor is supposed to do there. <\/p>\n\n\n\n<p>It\u2019s far better to be clear, direct, and descriptive than to litter your site with vague and meaningless language. Avoid obvious \u201cclickbait\u201d headlines. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3.&nbsp;Use bullet points<\/h3>\n\n\n\n<p>Using bullet points on\nboth mobile devices and regular landing pages makes the copy easy to read,\ncommunicate marketing messages effectively, and specifically hone in on\ncustomer\u2019s wants and needs.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/5-512x1024.jpg\" alt=\"\" class=\"wp-image-18469\" width=\"463\" height=\"926\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/5-512x1024.jpg 512w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/5-150x300.jpg 150w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/5-70x140.jpg 70w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/5-624x1248.jpg 624w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/5.jpg 640w\" sizes=\"auto, (max-width: 463px) 100vw, 463px\" \/><\/figure><\/div>\n\n\n\n<p>This landing page by\nCampaign Monitor has included bullet points which creates more white space (as\ncompared to paragraphs), so that the pages look less cluttered. White space is\nimportant as it reduces cognitive load and allows visitors to make buying\ndecisions more easily.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.&nbsp;Go easy on the visuals<\/h3>\n\n\n\n<p>It is important to add\ninteractive elements and at the same time you should not overload with\nexcessive visuals. Firstly, using too many images means the loading time of the\npage is going to be longer. The second reason is, like excessive copy, using\ntoo many images can make your landing page feel cluttered and overwhelm\nshoppers with visual stimuli.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/6.png\" alt=\"\" class=\"wp-image-18470\" width=\"365\" height=\"650\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/6.png 393w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/6-168x300.png 168w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/6-79x140.png 79w\" sizes=\"auto, (max-width: 365px) 100vw, 365px\" \/><\/figure><\/div>\n\n\n\n<p>This Landing page by Zero Financial uses video but doesn\u2019t auto play.\nCall to action is on top of the page. They have used minimal images, yet they\nconvey the message. They have balanced the white space and imagery excellently.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Experience<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1.&nbsp;Ditch the navigation<\/h3>\n\n\n\n<p>When it comes to landing\npages, the navigation menu should only be included when the website is already successfully\nconverting visitors into paying customers. If the landing page is merely there\nas a bonus element, then it\u2019s not a big deal if visitors want to backtrack to\nthe site.<\/p>\n\n\n\n<p>Take, for instance, this\nsweepstakes giveaway on the Martha Stewart website:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/7-1024x1024.png\" alt=\"\" class=\"wp-image-18471\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/7-1024x1024.png 1024w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/7-150x150.png 150w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/7-300x300.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/7-768x768.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/7-140x140.png 140w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/7-624x624.png 624w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/7-24x24.png 24w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/7-48x48.png 48w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/7-96x96.png 96w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/7.png 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>This clickable\npromotional element takes visitors to the lead capture page where the\nnavigation element has disappeared and only the logo remains:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/8-1024x1024.png\" alt=\"\" class=\"wp-image-18472\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/8-1024x1024.png 1024w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/8-150x150.png 150w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/8-300x300.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/8-768x768.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/8-140x140.png 140w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/8-624x624.png 624w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/8-24x24.png 24w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/8-48x48.png 48w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/8-96x96.png 96w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/8.png 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>In general, if you need\nthis lead gen offer to truly be a vehicle to grow your email list, refrain from\nadding any navigation or competing links. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2.&nbsp;Be creative with the CTA <\/h3>\n\n\n\n<p>Mobile users are\nconditioned to scroll, but 80% of a mobile visitor\u2019s attention is still spent\nat the top of the page, before the first, instinctual scroll. This is where you\ncan use your CTA to increase conversions by wrapping it in the copy. You need\nto be smarter about the psychology of your conversion<\/p>\n\n\n\n<p>This landing page by\nTodoist is perfectly optimized and has a CTA along with the supporting phrase.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/9.png\" alt=\"\" class=\"wp-image-18473\" width=\"302\" height=\"538\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/9.png 393w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/9-168x300.png 168w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/9-79x140.png 79w\" sizes=\"auto, (max-width: 302px) 100vw, 302px\" \/><\/figure><\/div>\n\n\n\n<p>Scrolling down a lengthy landing page means you must scroll all the way back up to find the CTA you saw above the fold. Trello understands the struggle of scrolling back up and uses sticky headers with a static CTA. No matter how far you scroll, Trello\u2019s header with logo and a \u201cSign Up\u201d CTA will always be at the top allowing the user to convert whenever they feel ready.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/10-473x1024.png\" alt=\"\" class=\"wp-image-18474\" width=\"267\" height=\"578\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/10-473x1024.png 473w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/10-139x300.png 139w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/10-768x1662.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/10-65x140.png 65w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/10-624x1350.png 624w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/10.png 924w\" sizes=\"auto, (max-width: 267px) 100vw, 267px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">3. Contrast CTA button<\/h3>\n\n\n\n<p>Never have the CTA as the\nsame color as your rest of the layout. Having a CTA button in a contrasting\ncolor will help your mobile landing page visitors follow whatever conversion\ngoal you\u2019ve got planned for them. It\u2019s also easier to link important copy and\nyour CTA together if they\u2019re given a contrasting color.<\/p>\n\n\n\n<p>This CTA on the landing\npage of Drift is hard to overlook. They have added a supporting statement to\nthe CTA and have a balanced the page with ample amount of white space.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/12.gif\" alt=\"\" class=\"wp-image-18475\" width=\"308\" height=\"606\"\/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">4.&nbsp;Reduce clicks and typing<\/h3>\n\n\n\n<p>With touch buttons,\nconditional logic, and responsive designs, users don\u2019t need to go through the\nusual pain of clicking and typing their way through your forms, which means you\ncan ask for considerably more information without killing conversion rates. No\none wants to fill out a 10-item form that gives you their full life story. The\nkey is to ask yourself: What information do I absolutely need from people? <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/13.jpg\" alt=\"\" class=\"wp-image-18476\" width=\"227\" height=\"405\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/13.jpg 544w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/13-168x300.jpg 168w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/13-79x140.jpg 79w\" sizes=\"auto, (max-width: 227px) 100vw, 227px\" \/><\/figure><\/div>\n\n\n\n<p>This landing page form by\nVimeo give you options to join with email or Facebook. Anyone wanting to save\ntime signing up has an option of choosing from these two options. The form too\nhas only two criteria of information to fill. Once you get them to cross this\nstage, you can ask for further information later, maybe through a welcome\nemail. Many times, mobile traffic is on the go, so people aren\u2019t coming to your\nsite with a ton of extra time to sit down and fill out a form.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Speed<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1.&nbsp;Decrease the loading time <\/h3>\n\n\n\n<p>When it comes to mobile Landing pages, speed is everything. The longer your customers have to wait for a page to load, the more likely they are to give up and go elsewhere. There are speed improvement tools available that can <a href=\"https:\/\/www.supermonitoring.com\/blog\/master-your-website-speed-with-these-free-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"increase your page speed by doing a few tweaks to your website (opens in a new tab)\">increase your page speed by doing a few tweaks to your website<\/a>.<\/p>\n\n\n\n<p>Always keep in mind that\nnot all your visitors will be accessing your page using the same kind of Internet\nconnection. So, when you design, code, and optimize, make it for the worst connection.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Testing<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1.&nbsp;Test your page<\/h3>\n\n\n\n<p>With the launch of a page, you can <a href=\"https:\/\/email.uplers.com\/blog\/email-ab-testing\/\">A\/B test<\/a> the placement of website elements using a tool such as Google Analytics\u2019 free Content Experiments. For instance, in the case of pricier products sold to a niche audience, you might want to test if these people will indeed respond to a form they see immediately or if they will need to read through content and view imagery before deciding to convert. <\/p>\n\n\n\n<p>In addition, install a heat mapping tool such as <a href=\"https:\/\/www.crazyegg.com\/heatmap\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" aria-label=\"Crazy Egg (opens in a new tab)\">Crazy Egg<\/a>, to measure clicking and scrolling activity via a tracking script inserted in your website. This data will allow you to look more closely at how people are scrolling and what elements of the page they\u2019re interacting with. In this way, you can determine how far into the content the average user is likely to read, as well as what buttons and form configurations are likely to produce a response.<\/p>\n\n\n\n<p>&nbsp;Mobile optimized testing is only suggested to better identify what elements of the website are and aren\u2019t working, test the experience of the website on mobile devices. Be sure to look at heatmaps specific to mobile. While desktop heatmaps might show no issues, mobile might show a different story. Of course, data will vary from website to website, but you might find that a larger percentage of your desktop users scroll through an entire page than mobile users (or vice versa). In the example below, see how users scroll through more of the content on desktop than on mobile. Based on this data, the developer would be wise to take out some of the lengthy content on the mobile version of the page.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"405\" height=\"436\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/14.jpg\" alt=\"\" class=\"wp-image-18477\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/14.jpg 405w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/14-279x300.jpg 279w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/14-130x140.jpg 130w\" sizes=\"auto, (max-width: 405px) 100vw, 405px\" \/><figcaption>This heat map indicates the sections of the landing page optimized for desktop and mobile.<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Wrap Up<\/h2>\n\n\n\n<p>Crafting high converting landing pages on mobile involves working on the\npsychological and physical friction of the users. Everything revolves around\nmobile optimization. Only when you know your audience in and out, you can give\nthem an effective landing page with the essential information. Solicit the\nopinions of multiple users to identify issues and test with analytics data to\ndetermine user compatibility. With a clear plan in place for mobile, you\u2019ll be able\nto convert your leads.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A well-designed landing page can drastically change the course of your business. Whenever you are creating a landing page, you should always focus on drawing the user&#8217;s attention and converting them. Instead of having tidbits of important information inconsistently spread over the landing page, you should be able to convey its purpose and the unique [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":18480,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[331],"tags":[893,32,562,346,320,456,369,500],"class_list":["post-18461","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-landing-page","tag-cta-designs","tag-email-design","tag-email-landing-page","tag-email-marketing","tag-landing-page","tag-landing-page-design-tips","tag-landing-pages-best-practices","tag-mobile-optimized-emails"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Quintessential Mobile Landing Page Tips for Your Campaign<\/title>\n<meta name=\"description\" content=\"Looking for mobile landing page optimization tips? Here we are sharing ultimate tips to optimization the mobile landing page for better performance.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Quintessential Mobile Landing Page Tips for Your Campaign\" \/>\n<meta property=\"og:description\" content=\"Looking for mobile landing page optimization tips? Here we are sharing ultimate tips to optimization the mobile landing page for better performance.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/\" \/>\n<meta property=\"og:site_name\" content=\"Email Uplers\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/email.uplers\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-11T10:14:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-28T12:01:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/Mobile-LandingPage-feature-image-540x282.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"282\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kevin George\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:site\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kevin George\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/\",\"name\":\"Quintessential Mobile Landing Page Tips for Your Campaign\",\"isPartOf\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/Mobile-LandingPage-feature-image.jpg\",\"author\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa\"},\"description\":\"Looking for mobile landing page optimization tips? Here we are sharing ultimate tips to optimization the mobile landing page for better performance.\",\"breadcrumb\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/#primaryimage\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/Mobile-LandingPage-feature-image.jpg\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/Mobile-LandingPage-feature-image.jpg\",\"width\":\"1170\",\"height\":\"470\",\"caption\":\"Mobile Landing page feature image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/email.uplers.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Quintessential Mobile Landing Page Tips (that no one is going to tell you)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\",\"url\":\"https:\/\/email.uplers.com\/blog\/\",\"name\":\"Email Uplers\",\"description\":\"Email Marketing Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/email.uplers.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa\",\"name\":\"Kevin George\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png\",\"caption\":\"Kevin George\"},\"description\":\"Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/kevin-george-email\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Quintessential Mobile Landing Page Tips for Your Campaign","description":"Looking for mobile landing page optimization tips? Here we are sharing ultimate tips to optimization the mobile landing page for better performance.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/","og_locale":"en_US","og_type":"article","og_title":"Quintessential Mobile Landing Page Tips for Your Campaign","og_description":"Looking for mobile landing page optimization tips? Here we are sharing ultimate tips to optimization the mobile landing page for better performance.","og_url":"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/","og_site_name":"Email Uplers","article_publisher":"https:\/\/www.facebook.com\/email.uplers\/","article_published_time":"2020-03-11T10:14:46+00:00","article_modified_time":"2020-10-28T12:01:09+00:00","og_image":[{"width":540,"height":282,"url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/Mobile-LandingPage-feature-image-540x282.jpg","type":"image\/jpeg"}],"author":"Kevin George","twitter_card":"summary_large_image","twitter_creator":"@email_uplers","twitter_site":"@email_uplers","twitter_misc":{"Written by":"Kevin George","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/","url":"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/","name":"Quintessential Mobile Landing Page Tips for Your Campaign","isPartOf":{"@id":"https:\/\/email.uplers.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/#primaryimage"},"image":{"@id":"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/#primaryimage"},"thumbnailUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/Mobile-LandingPage-feature-image.jpg","author":{"@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa"},"description":"Looking for mobile landing page optimization tips? Here we are sharing ultimate tips to optimization the mobile landing page for better performance.","breadcrumb":{"@id":"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/#primaryimage","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/Mobile-LandingPage-feature-image.jpg","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/03\/Mobile-LandingPage-feature-image.jpg","width":"1170","height":"470","caption":"Mobile Landing page feature image"},{"@type":"BreadcrumbList","@id":"https:\/\/email.uplers.com\/blog\/quintessential-mobile-landing-page-tips-that-no-one-is-going-to-tell-you\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/email.uplers.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Quintessential Mobile Landing Page Tips (that no one is going to tell you)"}]},{"@type":"WebSite","@id":"https:\/\/email.uplers.com\/blog\/#website","url":"https:\/\/email.uplers.com\/blog\/","name":"Email Uplers","description":"Email Marketing Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/email.uplers.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa","name":"Kevin George","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png","caption":"Kevin George"},"description":"Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.","sameAs":["https:\/\/www.linkedin.com\/in\/kevin-george-email\/"]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/18461","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/comments?post=18461"}],"version-history":[{"count":35,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/18461\/revisions"}],"predecessor-version":[{"id":20555,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/18461\/revisions\/20555"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media\/18480"}],"wp:attachment":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media?parent=18461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/categories?post=18461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/tags?post=18461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}