18 Landing page designs to optimise your mobile marketing [Part 2/2]
![18 Landing page designs to optimise your mobile marketing [Part 2/2]](uploads/4-landing.jpg)
Welcome to part 2 of our Guide to Designing Conversion Optimised Landing Pages. If you haven’t seen part 1, click here to get caught up. Now that you know the basic fundamentals to building a great landing page, let’s dive in to some of the most effective landing page designs in the business.
Although mobile pages will be our focal point, you should ideally always be designing for every platform. That’s why you will find both a mobile sample and a desktop sample in every example below.
Whether you are launching an SMS marketing, SMS reminder, or any other type of mobile marketing campaign, it’s important to incorporate responsive design. There are multiple methods of how you can use flexible design frames, each with varying levels of pros and cons. That’s why each example below also has a note on how to further improve the pages below.
18 Awesome Landing Pages for Mobile Marketing
Box
Browse through Box and see how animated gifs can be integrated into your website in a modern and professional way. They use smooth animations, combined with high quality vectors and photos. It makes it fun for the user, and leaves a lasting and positive first impression.
Style Focus:
- Animated gif
- Image / graphic heavy
- Long-format page
- Room for Improvement: The points of call to action here are designed to be subtle, but it’s a bit too subtle. Their buttons need to be bigger and stand out more. They should also limit the use of animations to increase the page speed. Some slides have excellent use of colour, but some do not. Don’t be afraid to use colour to your advantage. It’s the easiest way to make an impact, especially on a darker page like this.
- Tip: Try using Adobe’s Colour Selector to find the right palette for your landing page.
Shopify
It’s a bold move when you’re willing to compare yourself with a competitor right on your landing page. If you are confident however, and have the facts to back it up - then why wouldn’t you do it? These days in the digital world, transparency is becoming harder and harder to find. Lay it out whenever you can, and it will help you stand out from everyone else.
Style Focus:
- Industry standard template design
- Bold factual copy writing
- Room for Improvement: The copywriting is great, but the graphics and the layout still give off a template feel. It’s okay to use a template, but someone shouldn’t feel like they’re browsing through your template. Shopify is an extremely successful company with many competitors, but their landing page can be duplicated in about 5 minutes. That’s not a good thing, no matter how great your facts are.
Zendesk
Zendesk has been undergoing a new brand direction, replacing their iconic support Budda with a clean and curvy minimalist style. In keeping with this simplistic theme, once you click on “Start a Trial”, you’ll be directed to an easy sign-up page. They give you options to sign up even faster with your Google or Microsoft account.
Style Focus:
- Industry standard template design
- Minimalistic design
- Short and smart copy
- Room for Improvement: Here’s a good example of how you can customise a template design into something original. There call-to-action buttons blend into the background too much here though. A darker button shade, and a replacement of where their red flag lands at the top would make the page flow better.
Litmus
It doesn’t get more simple then this. There’s absolutely no fluff. Litmus makes it impossible for you to get lost. Once again, transparency is key here. Although the page is bare, it still has character because of their font selection.
Style Focus:
- Font design
- Clear and transparent copywriting
- Clean and organised design
- Room for Improvement: They should incorporate sticky footers for their table headers. It makes it easier to make a comparison, and gives the user a constant call to action.
Yyoga
Yyoga gives you exactly what you’re looking for. They breakdown what is included and what’s not included right off the bat. No FAQ’s needed.
Style Focus:
- Clear copywriting
- Transparent branding - no stock elements
- Room for Improvement: The serif font used for their header looks out of place, and puts the balance off of the page. Mixing sans-serif fonts and serif fonts is tricky. Your designer needs to understand how fonts render across multiple browsers. Especially when it comes to web design, custom serif fonts usually never look the same across multiple browsers. That’s why most websites use sans-serif fonts, and not many are willing to take the risk on more custom fonts.
Fresh Desk
This is a good example of how you can quickly rebrand a template design. Just carefully choose the right stock photo, which responds to every dimension.
Style Focus:
- Industry standard template
- Clear copywriting
- Clean responsive design
- Room for Improvement: The clear giveaway that this is a template design comes from something really small, it’s their call-to-action button: Get Started for Free. The size of the button is not in proportion to the rest of the elements on the page. In it’s responsive mobile mode, the text is also not properly spaced and stretches too wide. This makes it uncomfortable for the user to read.
Fitness First
Here’s your standard trial page for the fitness industry. If I placed this at the top, you would have thought it was pretty good. Now, that you understand what it takes to make a great landing page however - you should be able to point out some flaws. I’ve chosen this one specific page to show you how small mis-placed elements can effect the overall design.
Style Focus:
- Industry standard template
- Room for Improvement: Firstly, there are too many fonts going on here. The main call-to-action font looks stretched out, which gives off an unprofessional vibe. There’s also too much text on the left. Large blocks of text deter people on a landing page form as they symbolise a common thought - what’s the catch? That being said, this is still an effective landing page layout. It just needs some tweaks to make it even better.
Square
If you have a large video that you want potential clients to see, then try to incorporate what Square does here. You’ll have more real estate to say what you need to say, and your page will load that much faster.
Style Focus:
- Minimalistic design
- Room for Improvement: Their website design is not balanced. It’s top heavy, and there’s too much spacing at the bottom. However, their mobile version looks awesome. This is a good example of what happens when you’re tailoring design for one specific device. It’s fine to that, but it’s all about balance.
Dropbox
Sometimes all you need is something clean and simple.
Style Focus:
- Responsive template
- Content-based design
- Room for Improvement: Many responsive templates struggle with disproportionate elements. Notice how the spacing and size of the content and button are off? This is a common problem that happens when you try to make a one design fits all solution. That being said, only certain individuals will notice so it’s fine, but just keep that in mind.
Airbnb
Honesty is the best policy. If you’re an e-Commerce business, displaying your reviews front and center is a must. The more intricate your search filters are the better. That will help your clients save time, and they will love you for it.
Style Focus:
- Natural UI
- Standard box layout design
- Room for Improvement: I feel like they could have fit a 5th column in and made the page a bit wider. Also, their scrolling arrows disappear in responsive modes. I believe that may be a coding error.
Contiki
Know who your audience is, and create a tailored experience for them. Contiki does this perfectly by capturing a millennial market with wanderlust images, videos, and more importantly - real people. Their target audience wants an authentic experience, and Contiki delivers that.
Style:
- Bold visual design
- Experience based design
- Room for Improvement: Although their video captures your attention, it’s really choppy and not fluid. They need to adjust the sizing, make the video shorter, or turn it into a static press and play. Don’t ever use a choppy video on your website. Studies have shown that any time of lag time increases the heart rate significantly. This makes customers cringe. Don’t do that.
Square Space
A bold visual can change everything. Here’s a great example of how Square Space uses flashy stock photos, which don’t have the “stock photo” look.
Style:
- Bold visual design
- Clean layout
- Room for Improvement: They have two main call-to-action points on this page, both of which are misplaced in the desktop mode. The “Search for a Domain” is too high, and the “Get Started” is too low. Although this layout works for a mobile device, the spacing still feels uncomfortable. Spacing errors on simple designs are significantly more noticeable.
Stan
If you have a visually appealing product, let it stand out. If you only need to ask for one specific thing, then do just that. Make it as easy as possible for your users to convert, and you will see an increase in conversions.
Style:
- Bold visual design
- Simple 1-input box design
- Room for Improvement: I don’t feel like they needed to repeat their logo. It overpowers the call-to-action, and is redundant. Your call-to-action should always be the first thing that customers see and want to click on.
Super Mario Run
If you’re lucky enough to be a marketer for an iconic brand, then milk it for all it’s worth.
Style:
- Graphic heavy
- Consistent branding
- Room for Improvement: This page is way too heavy, and takes too long to load. Although large pages should always have a preloader, when it comes to mobile design - you should never see one. However since it’s Mario - people will wait, and the designers know that. Know your brand, and use it to your advantage. It will make your life so much easier.
Zapier
Although you have seen some visual concepts above, it’s important to remember that it’s okay to stick with the basics. Here’s an example of how Zapier stays true to this classic conversion optimised design. They use clean icons and splashes of their corporate colours to keep the page interesting.
Style:
- Industry standard template design
- Room for Improvement: Once again, it’s okay to stick with the basics. Just try to do whatever you can to make your landing page as original to your brand as possible. In this case since Zapier used a simple design, small errors became more apparent. The text spacing in their header needs to be fixed, and the typeface size needs to be adjusted - especially on their mobile version.
Freelancer
There’s a huge contrast here from mobile to desktop. It’s safe to assume that most of Freelancer’s customers are browsing on a desktop, since most freelance projects are probably large web-based designs. That’s why their desktop landing page looks so flashy compared to their conservative mobile version.
Style:
- Responsive design
- Room for improvement: There’s a time and place for conservative design. Since Freelancer is mainly a website for designers, they are unfortunately not allowed to get a free pass on a simple mobile design. Your website needs to represent your brand. Be consistent throughout your digital presence.
Now you’re ready to build the perfect SMS marketing campaign.
