Hi friends ๐๐ป
This week, a quick tech reminder about the importance of forms, and user testing on mobile devices. You don't want to let this error slip through the cracks!
Want links to recent emails or a sign-up link to share? Go to The Digital Landscape sign-up pageโ
The problem: users can't make donations
Last week, I got an email from a small nonprofit website manager who heard from several website users that they couldn't make online donations on mobile devices.
Not what you want to hear from website visitors: that they were blocked from taking one of the most important conversion steps by a technical issue.
The form in question was generated by a third-party donation processing platform, and embedded into the website using a code snippet called an iframe.
An iframe is like a little window you build on your website which displays content from an entirely separate website, so you're reliant on the person that created that other website (the donation form) to take care of important things like ensuring the layout adapts to narrow screens on mobile devices.
Both the website manager and I were able to replicate the issue immediately: I pulled up the donation page on my phone, and at first the entire form loaded well. But as soon as you scrolled down to select a payment method and the card information fields appeared, the "submit" button was pushed out of view, preventing users from completing the donation.
The solution
There were a couple of solutions. As an immediate fix, we replaced the embedded form with a button linking to a donation form hosted by the online donations processor that opened a new tab. Not ideal, but it solved the urgent problem and bought us some time to resolve the underlying issue with the embedded code.
Next, I shared a sample of the embed code with the developers from that third-party company to illustrate the issue, and they were able to resolve it and update the code snippet within a couple of days.
Hopefully that resulted in a fix for a bunch of their other clients too!
The lesson
When I'm working on a website, I develop a list of tests I run after significant updates to make sure everything is still working.
These tests typically focus on the most important user actions on a website, and might include:
- Making a donation
- Using the filters in a resource library
- Signing up for an email list
- Playing embedded videos
- Using the search bar
In each of these cases, it's important to test on a variety of screen sizes, from desktop computer, through tablet, down to smartphone. We've all used websites where some important element extends off the screen or becomes hidden by a pop-up that you can't dismiss! Don't be that website ๐คฆ
Working with embedded code from third-party platforms can make this testing regime tricky, because they can update the embedded code without you knowing.
The lesson: stay on top of your testing! It's another routine to get into, along with checking on your metrics and cleaning out your email subscribers.
Until next time โจ
โ Ed Harris (your digital strategy guide)
โ
๐ค Have a question?
If you have a question about how to optimize your website or get more out of your digital marketing weโll do our best to help out. Hit reply and send us a message and weโll get in touch.
๐ Affiliate Disclosure
Some links to products or services in The Digital Landscape emails and on the Blue Hills Digital website are affiliate links. This means we may receive compensation in return for new customers we refer. We only recommend products and services we use and love, and this helps us fund the creation of educational content for subscribers like you!
โ Want to stop receiving these emails?
You're receiving this email because you signed up either at the Blue Hills Digital website, or on my personal site at edharris.me.
You can update your preferences or unsubscribe using the links below. No hard feelings!
โ