What makes a great mobile landing page

We all craft our landing pages mostly for desktops. It has more space to convey our message and describe why our offering is better. Our clear headline. Inspiring hero graphic. And a strong call to action.
Do we have the same care for the mobile version? 

1 in 2 visitors is looking at our website on handheld devices. We have to make them great.

What matters on mobile

Speed and Focus. In my other article about timeless design principles I argue that the role of design sums to 3 goals. Capture attention, convey a message, and lead to action. On mobile, this is especially hard to combine because of the limited screen size. But these principles matter on handheld devices the most. 

Speed

If your website takes more than 3 seconds to load. 50% will leave
On desktop you had the luxury to allow your website to load from 5 to 10 seconds. Mobile users are less patient. I bet you can relate why. As a user yourself.

The best impact you can have on load time: hide unnecessary images. 
Make the ones that you need super optimized in terms of file size. 
Squoosh
or ImageOptim are amazing tools to reduce the png and jpg file size with a reduction of around 80%. 
However, prioritize removing images on mobile. People don’t need them usually.

Here’s an example of this website. The amazing 3D rocket from desktop version is gone.

Example from Conversion Design. Remove non-critical images from mobile websites.
Example from Conversion Design. Remove non-critical images from mobile websites.

Focus

Rank your content so that both your headline and CTA are visible above-the-fold.
During my days at Trivago, we applied every design technique to make visitors scroll to our main funnel buttons. Nothing worked. "Out of sign, out of mind". 

There’s no clear statistic on the average "height" of mobile screens. It changes also quarterly. Below 700px is a safe bet. (iPhone 6 resolution minus browser nav bar)
Place your CTA in this limit. Whenever possible make the  height minimum 44px (double for high res screens)

Here’s an example from 2 landings I designed

Mobile landing page examples from NextSFBook.com and GetFoyl.com
Mobile landing page examples from NextSFBook.com and GetFoyl.com 

Test it out with Google

Google will reward you if you offer a great user experience on mobile. And a great user experience is low loading time. The reward is a higher ranking. Hello SEO. 
Use their great tool PageSpeed Insights. It gives you also insightful suggestions on how to improve.

Example of PageInsights with NextSFBook.com designed by me

But "people just scroll"

One of the most common objections in the design community is that people scroll. That you have the height of the entire website available.
People actually scan to see if something grabs their attention. They want to get the gist by looking at your page. 

If you manage to hook them, you need to make it as easy as possible to scroll back to your main CTA. For conversion. 

Additionally, you can repeat your main CTA below the fold. For example, after you highlight the benefits and features or add a sticky header on top (example below).

Scroll behavior on Conversion Design CTA on mobile website
Scroll behavior on Conversion Design CTA on mobile website

🐟 Just give me the fish

Test your mobile version with PageInsights by Google. Aim for lower than 3 sec load time.
Remove unnecessary images and makes sure your CTA and headline are above the fold. 

If you’re looking for a tool to build your website. Use Webflow.
It’s the best and has no constraints on design. Iterate for conversion.


Apply for a free redesign

I hope you found it useful. 
Every 2 weeks I redesign for free the Landing for an interesting online business.
Apply here
if you want.

To just learn from practical tips and redesigns: join my mailing list

Oleg

Practical conversion tips and cases. Weekly.

Awesome! We sent you an email confirmation
Oops! Something went wrong while submitting the form.
We're affiliated with some products we recommend to support us. We don't suggest ones we wouldn't use.

More Articles

Copywriting
All Articles

Write website headlines that convert

A practical way to write great copy for your landing page headlines
View ArticleArrow Button
Case Studies
All Articles

Getfoyl.com redesigned for conversion. +140% increase.

How I redesigned my website and increased conversion by 2.5x
View ArticleArrow Button