In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Health Care, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

Here Is How You Design MOBILE Landing Pages That Convert

Here Is How You Design MOBILE Landing Pages That Convert

by Adrian Ababei on Jan 06 2017
Mobile rules the day or better said: mobile has been ruling the whole year of 2016 and is here to stay, to constantly evolve and to dominate the digital landscape in 2017, too!
 
It will continue to redefine the way users perform different actions online and it will definitely continue to reshape the way companies conduct their businesses online.
 
Implicitly, it has started to redefine the way online marketers are crafting their landing pages, too. 
 
How are you adapting to “the new way” of designing landing pages? Have you gone beyond the “simply stacking content at mobile size” mentality? Have you started to approach content differently when you build your mobile landing pages?
 
To cut out the lengthy content? To reconsider the placement of your conversion elements, due to the limited amount of space at your disposal?
 
As you ponder upon the above questions and reexamine your previous mobile landing pages, scan through these 5 strategies bellow, strategies that we, ourselves, are using here, at our web development company in Toronto, strategies aimed at helping you convert your users on mobile:
 

1. Think Through Your Mobile Content 

 
Content is (the almighty) king on mobile, too! Just make sure you don't “push it off” its throne by approaching it the wrong way.
 
Which is this “wrong approach” you say? 
 
Not adapting your mobile content to your own specific area of activity and, therefore, to your specific target audience's expectations, as well!
 
Instead of “jumping on whatever's the most popular trend right now” when it comes to content's ideal length on mobile devices (some will say you should go for a 500-word, others for a 1000-word piece of content for your landing page), you should run some A/B test yourselves.
 
But that only after you've drawn some pretty logical conclusions from analyzing your area of activity and studying your target audience, too:
 
  1. Let's assume you run a plumbing company; well, then, my friend, you can't expect a user accessing your landing page (going through a pipeline leak “crisis”) to be willing to read a lengthy piece of content detailing various types of pipelines (let's say), before he/she will have scrolled down like a madman for finding your contact details. It's common sense deduction don't you think?
     
  2. Let's assume that you run a luxury goods company; considering your items' high prices, you should expect your potential customers to want to read detailed product descriptions, including all the details they need for making their final decision. You should expect them to want pictures, lots of pictures, which will help them visualize those expensive items from various angles, to read all about the lifetime guarantee that you provide and so on.
 
In one word: you can't just play by “what's most likely to happen” and you definitely can't risk guessing, either.
 
Just keep in mind the type of products/services that you're selling through your landing page!
 
Takeaways:
 
  • A common sense rule is to place your conversion elements and important content as high as possible on the page, but not to be afraid to continue to deliver quality content and more information about your business bellow the “fold” at the bottom of your users' screens 
  • It's perfectly true that more often than not mobile users would stop with their scrolling (and reading) to he bottom of their screen
  • But! There are also surveys revealing that if websites feature a user-friendly interfaces and engaging content (such as video content) they're more likely to keep scrolling down
     
  • Shorten your paragraphs, more frequent paragraph break will help your mobile (potential) shoppers to easily “digest” your content. Remember that a paragraph of reasonable length on desktop will look awfully “crowded” when compressed for the mobile screens! Therefore: ease your reader's job and break your content into breaf paragraphs!
 

2. Consider and Prevent User Experience Barriers 

 
As we've already relentlessly pointed out here, on our blog: user experience is and will be the main “generator” of online initiatives, strategies and plans impacting your business. You simply can't afford underestimating it!
 
How does the user experience factor shape your mobile landing page designing efforts?
 
Easily! It will challenge you to foresee that whole journeys that your users will take once they visit your landing page. It will also challenge you to to review it, beforehand, on multiple mobile devices and by asking the opinion of several users.
 
Now speaking of the user experience barriers that you should avoid, here are a   examples:
 

1. Illegible Text on Mobile Devices

Don't just transition your text from desktop to mobile and consider your job done!
 
Make sure your text, once shrunk to mobile size, still looks legible. Is the font too small? How about the background color? Does it impair legibility or not?
 
Tip: your goal shouldn't be to keep your user “captive” on your mobile landing page, but to direct him/her on your primary Drupal website instead. Therefore, remember to make your logo visible and to provide footer links back to your site.
 

2. The Temptation of Using Interstitial Forms

No matter how tempting it might look to you to use such conversion tactics, resist it!
 
The result is sure to be a high number of users who'll instantly bounce off your landing page instead of that luring no. of converted users that you might have in mind!
 
Note: if on the desktop variant of your website it might be easier for your users to click the “X” for closing your newsletter sign up form, just imagine how frustrating this action gets on mobile. Your users might just assume that you will have specifically made it impossible for them to close your form and you can just guess how this will affect your conversion rate, right?
 

3. Faulty Responsive Design

Take your time (it will be well invested time) to think through how you'll stack all the elements of your landing page at a mobile size!
 
By doing so you'll avoid risks such as: users having to scroll down excessively in order to reach your “Contact” button or your form.
 
This will also allow you to apply the right layout adjustments for placing your contact form higher on the mobile-size page or for opting for a “Contact” button that remains visible on the page as the user scrolls down.
 

3. Don't Lose Sight of Your Goal: Conversions

 
It's not (just) for presenting your products/services, for “wowing” users or for “showing off” your design skills that you're building your mobile landing page! But for converting your users!
 
That's your main goal and you should steer all your efforts towards reaching it! 
 
How do you do that “constrained” by the limited pace you have on a mobile devices' screen? 
 
Here are a few tips:
 
  • you keep in mind to place and to make visible a click-to-call button; remember that it's from their mobile devices that your users access your landing page and, therefore,  they're far more likely to place a call for service than desktop users
  • you keep in mind to place both a “Contact” button and a prominent contact form on your mobile landing page
  • you keep in mind that your form's fields might get awfully shrunk and thus impossible to be tapped on when transitioned from desktop to mobile. Make sure to fix this issue!
     

4. Make Sure That It Loads “Instantly”

 
Remember that it's mobile users that you're reaching out to! They don't expect your landing page to load (just) quickly, but instantly
 
Gather your team of web development experts and run some speed tests and then figure out how you could optimize your mobile landing page for a better performance!
 
You simply can't afford to underestimate this aspect!
 

5. Properly Test It Before Launching It

 
Without proper testing all your (mobile) landing page building efforts risk to be nothing but a waste of resources!
 
How do you run “proper” tests on your landing page? Here are some good practices for testing your landing page performance before launching it:
 
  1. You “recruit” your testers from both the Android and iOS users' communities; make sure to pick users owing different types of mobile devices for getting them to test your landing page
     
  2. You run A/B tests (you could use tools such as Google Analytics, Optimizely, Content Experiments) to find out which is the most efficient way of placing elements on your landing page
     
  3. You install a heatmapping tool (we recommend either Hotjar or Crazy Egg) to discover how far into the content your users would scroll down and what elements on your landing page they're more likely to engage with
     

And here is how you do it! Here is how you put together not just visually-pleasing, but also efficient mobile landing pages. 

What other strategies have you been successfully implementing for converting your mobile users?
 
Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

5 Drupal Blog Posts That Have Made It to the Favorites Lists of All the OPTASY Team Members this Month
This month's "surreal" events have shaken the world as we had known it. They have "closed" us safely inside our homes, stopped us from doing many of what we had considered as "ordinary" activities, but it hasn't stopped us from... reading. And Drupal blog posts are always on our reading lists. We've recently compared our lists of favorites, put together OPTASY's monthly selection, which includes those Drupal articles that most of our team members found valuable, and... we're now ready to share it with you. Here they are: OPTASY's top 5 favorite Drupal tutorials, guides and insights in March.   1. Getting Started with the Gutenberg Editor in Drupal We, too, have recently shone some light on the Gutenberg module for Drupal 8, one of the latest layout tools added to Drupal's toolbox.  A tool aimed at improving the editing experience in Drupal. While doing our research, we “bumped into” this blog post. And it quickly became one of the team's favorite Drupal blog posts of the month since:   it's concise and to the point it's neatly structured it includes all the information that anyone interested in taking this Drupal page builder for a “spin” could possibly need From:   installation to configuration to the final step, where you use the Gutenberg Editor to publish content on your Drupal landing page   … the blog post takes you through all the steps you need to take to get yourself familiarized with using this site building tool. Source: Opensource.comNote: we loved that the Opensource team insisted on highlighting those Gutenberg features that are specific to the Drupal integration only (you won't find them in the WordPress plugin):   granular permission placeholder content the possibility to add Drupal blocks inline 2. Drupal Website Accessibility in Review: Key Features & Useful Modules “How to implement web accessibility?” “How do I make my website WCAG compliant?” Any responsible Drupal website owner asks himself this kind of questions these days. No one wants to risk getting sued for having underestimated the importance of color contrast. Or the importance of displaying web forms that can be easily filled in by all the website visitors. But what if your CMS helped you check off most of the recommendations on the W3C accessibility checklist by... default? This is what Drupal 8 helps you with.  And this is what the Wishdesk team's post, one of the best Drupal blog posts in March, is all about. It makes a useful inventory of Drupal's built-in accessibility features and contributed accessibility modules. “What makes Drupal 8 accessible out of the box and easily extendable, helping you reach even the “nice to have” accessibility levels on your website?” The post has all the answers to your question. Source: WishDesk.com It outlines all of Drupal's built-in features for accessibility:   the accessible inline form errors the shiny and new Olivero front-end theme the ALT text for images required by default in Drupal 8 ...   Then, it covers the key contributed modules that you could enable to further boost your website's level of accessibility: CKEditor Abbreviation, Siteimprove, Automatic Alternative Text, HTML Purifier, etc. A useful checklist to keep at hand whenever we add or improve accessibility on our clients' Drupal websites. 3. Using Drupal in a Pandemic, One of Our Top Favorite Drupal Blog Posts The Lullabot team stroke again. Just that this time it wasn't a valuable Drupal tutorial/technical guide that they put together, but a list of Drupal mindsets that we can all apply in the context of the COVID-19 pandemic. And the similes that they found and pinpointed are just fantastically... appropriate. Here are just some examples:   3.1. As Drupal contributors, we've come to learn that we can also help the community by stepping back and letting other contributors step forward. Likewise, we can still join the fight against COVID-19 by simply... staying home.Source: Lullabot.com   3.2. Over time, we've learned that by “getting off the Drupal island” and partnering with other communities we could help push Drupal forward. Likewise, these days we need to step out off our own circles of needs and put our skills and technical knowledge to work for others in need. Or for those who are directly involved in providing relief.   3.3. “Community” is the best term for defining Drupal. It's a community of contributors working together and not a community of individualistic “rock stars” contributing, each, merely for his/her own fame and gratification. Likewise, there's no way that we can fight this pandemic by being selfish and egocentric. We need to join forces. To join the global community of people who're applying the “social distancing” measures. It's something that we can all do and that we can all benefit from.   And these are but some of the Drupal-specific principles that the Lullabot team managed to turn into clear responses to the crisis that we're living. We invite you to discover their other Drupal lessons that you, too, can easily turn healthy mindsets these days.   4. Set Up Product Attributes in Drupal Easily & Boost Online Sales A useful step-by-step tutorial on how to set up product attributes on a Drupal Commerce website. Why has it made it to our list of favorite Drupal blog posts of the month?   because it tackles an all too common “To do” on the lists of our Drupal projects: setting up product attributes properly, in a way that's easy to manage by the site admins/editors and easy to scan through and to select from for the end-user because it's clearly written, with lots of helpful print screens and a logic structure    In short: it's an honest tutorial, written in a clear and accessible style, that shows you exactly how to set up product attributes in your online Drupal store. From the point where you add a new product attribute, all the way to the final step, where you connect that attribute to the specific product variation type on your e-commerce website. Source: Druedesk.com   5. Concurrent Editing in Drupal 8: Possible or Not?   “How do you implement concurrent editing in Drupal? Is there a solution for it already in Drupal core?” This is the question that the QED42 team asked themselves when they faced the challenge of setting up a system where multiple content creators could access and edit, simultaneously, yet independently, layouts and widgets in a Drupal app. Source: QED42.com And it's this problem, that they had to find an answer to while working on their project, that made them share their findings in the form of a useful blog post. A post that brings forward 3 modules that the team evaluated as possible solutions for concurrent editing in Drupal:   Paragraph Frontend UI Conflict Content Lock   What makes it set itself apart from other Drupal blog posts that we've read in March?   it's focused on a real Drupal limitation ... one that many Drupal teams struggle to find an answer to while working on their clients' projects: how to enable distributed editorial teams to edit content simultaneously, with zero conflicts that might arise from their concurrent actions it presents multiple possible Drupal solutions to it, each one with its strengths and weaknesses it shares their own custom solution to this Drupal shortcoming: turning the widget creation into a decoupled, separate node, and referring all those widget nodes into the Layouts   Useful, usable, relatable. In short, it's a Drupal blog post valuable enough to add it to our own resources list.   The END! Your turn now:  How does your own list of March favorites look like? What valuable Drupal guides, tutorials, and insights have you run into this month?Photo by Annie Spratt on Unsplash ... Read more
Adriana Cacoveanu / Mar 31'2020
What Are Some of the Most Popular Websites Built on Drupal in North America? Top 10
Let's say that you're considering using Drupal for your next web project. You've read about its unmatched robustness and flexibility... And still: real examples of brands that have their websites built on Drupal in North America would weigh heavier in your decision-making process than just... statements about its great features, right? But which are they? These websites powered by Drupal that are well known in Canada and the USA? We've done our research and put together a list of both highly popular and uniquely designed Drupal-based websites. So, here they are: the 10 best Drupal websites in North America to inspire you in 2020: 1. Montreal Opera Unique and unusual navigation, in addition to the clean and simple design that immerses the visitor into the world of the opera... That's the work of redesigning and restructuring the site of the Montreal Opera summed into one phrase. One of the truly visually enchanting Drupal website examples that makes the most of the platform's flexibility to provide a truly engaging visitor experience. 2. World Vision International A global organization impacting the lives of millions couldn't have chosen but a robust CMS platform like Drupal to power its website with. With:   an intuitive UI design clean and conveniently minimalistic design a reliable content management system to support a site representing +90 countries   ... the World Vision International's Drupal-powered site is built to make an impact.    3. MIT List Visual Arts Center, One of the Top Websites Built on Drupal in North America How could we have possibly left it out of our Drupal websites list? MIT's website taps into:   the flexibility of the Drupal entity system to grant visitors a content-rich user experience centered on content diversity: text, audio, lists, images Drupal's features aimed at providing the editorial team, as well, the best experience   The result? An intuitive, brand-driven content-rich experience for the users on the MIT website. One that comes to complete the actual visiting experience at the MIT physical art museum and virtual art lab.   4. University of Arizona    One of the well-known websites using Drupal 8. And it's no surprise that they've chosen precisely this CMS since Drupal's been the go-to platform in the higher education sector since... forever:     it empowers the staff to easily create, edit and publish content on the run it enables that editorial team to easily share/reuse content across multiple sections of the website (and a high ed site is usually an intricate "ecosystem" of content sections and smaller sites) it advocates for a "mobile-first" approach to website development   In the case of the University of Arizona, its old website got migrated to Drupal 8 and its design revamped, all in the name of better user experience.   5. Think Global Health Another one of the well-known websites built on Drupal in North America is this multi-contributor site that explores the way health changes impact societies, everyday lives, and economies on a global scale. With such a heterogeneous content team and a wide variety of content being edited and added regularly on this newspaper website, no wonder that they've turned to Drupal. 6. Canadian Museum for Human Rights   Humanrights.ca has earned its own star on the Drupal websites' "hall of fame" due to a cutting-edge functionality that it incorporates: Enabling visually impared users to configure their own experience on the site. From adjusting the contrast to selecting the font size and style, they get the most of Drupal's "empower the end-user" philosophy.   7. Nature Conservancy California Another one of those Drupal website examples where content variety "rocks supreme". From video content to video footage, to interviews, to ambient sound, this platform's using Drupal for handling the multiple types of content formats that support its project stories. 8. Princeton University Admission   What makes this high ed website stand out from all the other university websites built on Drupal in North America?   the non-conventional visual storytelling techniques that it leverages in order to highlight what's representatively unique about this school the impactful content (linear media), ranging from narrative faculty portraits to textural videos of the campus life, photo content providing visitors a more in-depth view into the life at Princeton   Furthermore, they chose Drupal in order to inject" top performance and give their "Undergraduate Admission" website fully responsive web design.  9. Jack Daniel’s Tennessee Whiskey  JackDaniels.com makes a great example of a website that makes the most of Drupal's powerful content management features:   again, the site comes as a complex ecosystem of different types of content: immersive photography, video content, cinemagraphs... local markets around the world get to custom-tune the website to suit their own local customers' needs; to personalize it with translated copy, market-specific programming...   A robust content management system along with the "empower the user" philosophy, these are 2 of Drupal's defining features that JackDaniels.com taps into in order to provide:   an engaging experience to its visitors an empowering experience to its users (admins across the globe) 10. TraffickWatch The storytelling Drupal website of a nonprofit that raises awareness about human trafficking.   The END! What other famous websites built on Drupal in North America have we missed? Feel free to... scold us in the comments section down below.   ... Read more
Adriana Cacoveanu / Feb 25'2020
How Creating a Mind Map Helps You Make Your Website More User-Friendly
The line between useful and... useless (or pushy or simply annoying) is thinner than you think. That's why creating a mind map that aligns your site's content structure with the user intent is... critical. "Whether you’re a product owner or designer, you don’t want your website to be a maze with nothing but frustrating blind alleys.” (source: altexsoft.com) And there's no guessing work or discouragingly complex process in identifying the current user flow on each web page on your website: Just take a look at the behavior flow report in your Google Analytics. No rocket science here... Take it from there and:   identify the roadblocks restructure content on each page so that it matches user intent and is fluid and easy to read But let us give you a hand with that. With mind mapping your current customer journey and planning its improved version: In this respect, in today's post we'll:   give you the “anatomy” of a user-friendly website: what elements make a website, well, user-friendly? define mind mapping with respect to designing the user experience on a website teach you how to create a mind map: an easy step-by-step guide show you how to use a mind map to make UX improvements on your website   1. The Anatomy of a User-Friendly Website: 4 Essential Features “A vague objective leads to poor results.” There's no point in creating a mind map that would hopefully make your website more user-friendly if... you're not quite sure what key elements make a website user-friendly. So, here's the list of must-haves for any website aspiring to deliver a great user experience:   1.1. High Speed It's no news to anyone: the page loading time has a huge impact on the user experience. Unnecessary interactive elements, that don't match users' needs and don't play any role in the conversion process either, will only get you a clunky and... well... slow website.   1.2. Useful Features And “intuitive” I must add. Again, we go back to the “elements justified by the user's needs” principle: Is that slider useful and relevant for the user behavior on your website? It it too bulky, loaded with endless options that just ... discourage the visitor? You might want to re-evaluate all the features on your website: are they relevant and intuitive enough?   1.3. A Well-Structured Information Architecture Information that's:   easy to access easy to interpret   … is key for a wannabe user-friendly website.   1.4. Content that Matches User Intent If users are looking for online cooking classes, let's say — and that's precisely what you promise to deliver them — and you're only trying to sell them kitchen gadgets on your website, the only result that you'll get is them bouncing off in seconds.   2. What Is Mind Mapping with Respect to Designing the User Experience? An overly simplified definition would be: A way to brainstorm and present the generated information in a visual way. Now, since I've promised you a definition “with respect to” creating the user experience, here's a more... context-specific definition: Mind mapping is a vesatile technique where you put together a visual hierarchy of your site's present or future content. It lists out the key pages on your website (homepage, service pages, blog page, etc.),  the various relations between different web pages, the links and CTAs on each page... Source: altexosft.comIn short: mind mapping reveals how data is structured on your website. Of course, you'll then consider creating a mind map of the target version of your current website. The more user-friendly one...   3. Main Benefits of Using Mind Mapping: From Great Ideas to... Actionable Steps Finding new ideas is exciting. But jumping on every new great idea that someone in your team has, without first checking whether it aligns with the user intent, is just like... making shapes out of soap foam. Not only that they're not future-proofed, but that clutter of ideas might not work together either. By using one of the best mapping tools available online for structuring those ideas as they... pop out, you turn them into actionable steps in your strategy for improving the UX on your website. And the clear benefits to mind mapping are:   you define your ideas' roles: what role do they play in your UX strategy (if you can't assign them a role, they're just “Wow” ideas with no solid justification) you assess their value: how does implementing this new idea bubble up to the user experience? you identify the various relations between them: you might want to avoid “island-ideas”, with no connections to other ideas listed out in your mind map   4. Creating a Mind Map: 5 Simple Steps Now that you know what a mind map is and why on earth you'd bother making one, let's see how you can actually put one together:   4.1. Create a Mind-Map Template Just so you can have a basic idea of the current information architecture on your website. List out how data's being structured on your website now and how you plan to structure it for its more user-friendly future version...   4.2. Map Out Your Ideal User Flow How would you like your website visitors to engage with your content? What actions would you like them to perform? Source: mindmeister.com Once you've outlined the key pages on your website (homepage, services, features), start planning out the user flow.   4.3. Compare it to the Current Behavior Flow Available on Your Google Analytics Before you can properly map out the user flow, you need to know what's the standard customer journey on your website now. For that, just delve into your Google Analytics data and look for the user behavior report. It'll show you all you need to know about:   how users are engaging with your website's content  what paths they usually take when navigating through your current information architecture   4.4. Identify the Roadblocks The user behavior data might reveal to you some unwanted realities regarding the user experience on your website:   poorly structured content a bulky and tiresome collection of interactive elements irrelevant features (embedded videos, interactive elements, social sharing functionalities) too many tools that don't respond to users' needs   4.5. Make the Appropriate UX Decisions to Influence the User Behavior Now that you've identified the main roadblocks in delivering the best user experience, it's time to... remove them, one by one:   turn chaos into a logical content hierarchy trim irrelevant page elements, with zero value in the conversion process  adapt web pages' content structure to the needs of specific audience segments (make sure to include relevant information for those customer personas, redesign your CTAs if needed...)   5. How to Use a Mind Map to Make Powerful UX Improvements Creating a mind map is but the first step: Turning it into powerful UX decisions should be your main objective. So, the answer to the question “Are mind maps effective/useful?” is: They are if and only if you make them useful and... usable. You can turn your mind map into:   an effective sitemap a customer journey map   But let us take a real-life scenario and point out specific UX decisions that you could make with your mind map at hand. It's an example that I've run into reading Mindmaster team's great blog post: A Simple Way to Design UX, UI and CX Using Mind Maps: Say you're targeting 3 different customer personas on your website. You then need to plan 3 different user flows.  You start by grouping the web pages on your site into 3 categories, each of them corresponding to one audience segment. Then, you start doing some user behavior mapping: how do you want each customer persona to navigate to the corresponding web page so that he/she clicks the CTA placed there? Now, it's time to make some critical UX decisions:   what relations to set up between various pages on your website? You might have a user on a service page and you need him/her to visit your “get a quote” page, as well what's the best CTA design for each one of your 3 types of pages? what key information should you include on a page, depending on the customer persona accessing it? See? Not only that creating a mind map helps you put together an effective information architecture, but it's also a great technique for generating content ideas that match the user intent.   6. Final Word In the end, it all comes down to goal setting. Creating a mind map is a great way to:   understand your website goals: what type of conversion actions do you want users to perform? achieve those  website goals by delivering a user-friendly experience: content that's useful, accessible, easy to read and to interpret   The END! Do you usually create mind maps when building new websites, to ensure they'll deliver the best user experience? Or for existing ones, to improve their UX? Do you consider them critical or optional in designing the user experience? Image by Biljana Jovanovic from Pixabay   ... Read more
Adriana Cacoveanu / Dec 14'2019