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

Get your website evaluated by me

Get your landing analysed for conversion for 5$.
Use 90%off promo code: XK1NVSWR

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.

— Oleg

Get your website analysed for conversion for 5$.
90%off promo code: XK1NVSWR

Get Conversion Analysis

Here's an example for Resumey.

Practical conversion tips and cases. Weekly.

Awesome! We sent you an email confirmation
Oops! Something went wrong while submitting the form.

Join Our Community

To learn from practical tips and case studies: join my community of founders

We're affiliated with some products we recommend to support us. We don't suggest ones we wouldn't use.

More Articles

All Articles
Copywriting

Storytelling to increase website conversion

How to design a landing page that is not boring
View ArticleArrow Button
All Articles
Analytics

You are what you measure. Landing page analytics for beginners.

Traffic that doesn't convert is like the night sky without the stars. The stars are your customers.
View ArticleArrow Button