Responsive Landing Pages for Mobile
Written By: ShaneWebGuy on July 29, 2020
The year 2020 and beyond is upon us now in the era of responsive Web design. There is no turning back now. Since 2015, Statista reports that mobile traffic has accounted for at least half of all Web traffic globally. It has floated around the 50% mark but hasn’t gone down since then.
In many countries, the lack of advanced telecommunications infrastructure has forced them to push on with mobile tech, relying mainly on tablet PCs and smartphones. Technological limitations are common in emerging or developing economies such as those in SEA and some African states.
Responsive Web design, in a nutshell, means creating websites that look good and are easy to use across all devices: PCs, laptops, tablet PCs, and smartphones.
The era of prioritizing the desktop PC version of a website is long over. Google now has a mobile-first policy and has a new Googlebot indexing mobile pages. The old useful desktop crawler hasn’t been retired completely, but it’s only a secondary actor now in the Google search landscape for sites designated “mobile first”.
Landing pages are the lifeblood of digital marketing campaigns. Digital marketers and ecommerce websites must relearn how to make effective landing pages in the evolving landscape of the mobile Web.
Get Ready for AMP
AMP or Accelerated Mobile Pages is an open-source HTML framework. The AMP Open Source Project developed AMP. It was originally designed by Google to compete with other big guys in the sandbox, mainly Apple News and Facebook Instant Articles.
Today, webmasters deploy AMP to reduce bounce rates and dramatically improve the overall user experience while browsing a website. AMP closely follows essential “instant gratification” on the mobile web by greatly expediting the delivery of information to users.
The biggest advantage of deploying AMP architecture on your website is it greatly increases page loading time. AMP is extremely important for ecommerce websites that have a global customer base. Many countries still rely on slower 3G connections. A mobile website takes an average of nineteen seconds to load on a 3G connection.
Are you interested in architecture? You can start creating your AMP page here. Check out additional information on converting your HTML pages to AMP here. If you’re ready for more advanced AMP features, there’s an available tutorial as well.
AMP provides many opportunities to improve a website’s performance while keeping an eye on Key Performance Indicators (KPI): site speed, responsiveness, design for touch use, and mobile layout.
Landing Page Essentials
We did a broad sweep of top-performing landing pages from different brands, and below is the summary of their strategies:
1. User-oriented headline
Address the user directly with a headline that also serves as the main CTA. The headline should only be a few words long.
The sub-headline should look something like “trusted by x brands/customers worldwide/in (region).” Bulleting makes it easier for users to read each line successfully, so they can act.
You can place additional lines of text and images below the main field(s) where users can type details for the sign-up. Always remember the point of the landing page and wrap the message tightly and effectively above the fold.
2. Show them how it works
We love MuzzleApp.com‘s landing-page because it demonstrates what the brand offers. Muzzle takes care of those annoying app notifications that appear when a person is screen-sharing. Muzzle made use of humor to sell the main benefit of their product – and it works.
When designing a demonstration of your product or service, keep it minimal, relatable, and, if possible, humorous. Humor is universal, and people ‘get it’ much more quickly.
If you are selling something more complex, again, simplify the demonstration for the customer’s sake. You know that you have succeeded when it only takes a few seconds for an animation or video to convey the main benefit of a product or service.
3. Pull customers into the service
Pulling a customer in with an action that belongs to the “member’s area” is a genius idea. This strategy is what the international bank transfer service Transferwise achieved with its website.
The landing page allows the user to perform an action that we only normally see once we have signed up. The three tabs on the sign-up page are enticing: Send Money, Receive Money, and Debit Card. All of these actions roll over to the next step, which is to finalize the account.
A fully-functioning dashboard awaits the users on the third step. Transferwise encourages people to sign up – there is no real pressure anywhere, and the best facets of the service are revealed a few seconds after the page loads.
4. Keep it extremely simple
Teambit’s landing page was an ideal sample of how a most minimalistic page can be most effective.
Teambit’s landing page lacked product demonstrations, and it did not show pre-loaded actions like Transferwise. However, it did show a Google sign-in link at the center and an alternate field for those who’d like to sign up with email.
The Google sign-in button is powerful – it’s like an instant doorway that removes the pressure of having to sign up manually. Teambit took advantage of people’s constant preference to sign up or sign in using Google Accounts because they don’t want to fill out forms anymore.
5. …Or try more details to convince people
Basecamp still adheres to the classical format of the landing page. The most important elements are above the fold. Social proof and additional details roll below the top fold.
Other websites have reformatted to avoid adding too many details, but perhaps Basecamp’s loyalty to the older format can tell us something about how to communicate with Basecamp’s audience. This realization brings us to an important question: how well do you know your audience?
Summary:
Top-performing landing pages can be eclectic in their approaches to getting people to sign up. But one thing is for sure: the best landing pages are responsive (check out how your website can get AMP) and provide a strategic mix of aesthetic elements and information. How responsive are your landing pages? Contact me today if you’re interested in responsive web design for mobile.
