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.

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

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.

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).

🐟 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

‍

‍