If you prefer to or need to read, the video transcription is here:
We want to make sure that we are being very user-friendly with our writing on mobile. More and more people are using mobile to access information.
Careful with Conclusions from Analytics
Now, you may hear people say, well, we only get 15 percent of our traffic on mobile, so it's not that important. But that's really a limited view of the analytics. We don't actually know from analytics why people are doing what they do or the context around it.
Those 15 percent of website traffic visitors might be coming to the mobile site having a bad experience. Maybe that's why they end up on desktop. Or they might start their journey on mobile, move to desktop, and then back to mobile. We don't really know. For this reason, we want to plan for people on all different kinds of devices.
It is a very typical journey for somebody to hear about an organization that a business or nonprofit and start looking for it on mobile. Maybe they have a few moments to themselves. Maybe they're waiting for a friend or they are waiting in line. They move to desktop later to delve in deeper with the information. They might to do a transaction or whatever it happens to be. They might end up going back on mobile at some other point, looking at the organization again, we just don't know. But we do know people use a lot of different devices for a lot of different reasons. We want to make sure our writing works well on all of them.
Treasure Your Space on Mobile
So here are some things to keep in mind. First off, treasure the space. It is extremely valuable on mobile, especially the area above the fold. So here I have a screenshot of the Wikipedia mobile website. And you can see they are welcoming everyone to Wikipedia. We're in 2021 and we don't need to be welcoming anybody to our websites anymore.
I'm sure they're trying to be friendly. But it actually takes up about half an inch of space. We would be better served by it directly telling us what Wikipedia is, or what I can do here, or almost anything else. So really treasure your space and make sure that all the words you're choosing to use are impactful.
Calls to Action
I also want you to keep in mind any kind of call to action where you're asking users to do something. In this case at Sesame Workshop (2:10 in the video), they're asking people to donate. There's a cute picture of Grover there.
You see the donate button is up high enough that it doesn't disappear on mobile. We know from research that people do pay more attention to items that are higher up on the page. Be careful, especially about what we put in that top third, top half of any page, and how it's going to play out on mobile. Make sure our CTA, any kind of call to action, is up high enough so it doesn't disappear below the fold.
"The Fold"(s)
We also need to keep in mind that now we've got various folds to consider. Here's the challenge - it's in one place on desktop, it's another one on a modern phone, and it might be even higher up for an older phone. And as people who work with websites, we tend to have more recent technology. So you need to be sure to think about questions like these:
What is the right screen size to plan for?
What are common screen sizes for people who are not like me?
What if they only have a mobile phone?
What if they have a laptop that's 4 years old or even 10 years old?
Be mindful of these different kinds of folds. Get the most important information up high so that it will be visible to everybody.
Words on Mobile
The number one way you can improve your writing on your website may be to use less words. Get rid of those words that are unnecessary.
No welcoming, no filler words, please. For titles, keep in mind that they're going to be on both desktop, laptop and mobile tablet. Try to use six words or less, that will mean they probably won't be truncated on mobile, which is good.
Titles and subtitles
I want you to front-load titles with meaningful words. It's important to make sure you've got good words in the first few words of any kind of sentence or title. This is because we read, in the West, left to right, and tend to not read the whole line sometimes.
You also need a title accurately on each page. When I click on an item, say, in navigation or a news story, when I land on that item, I need to have some kind of title. It should confirm that I did land at the right place.
There are many reasons for this. First, sometimes people click on things without actually reading them or looking at them with care. People need to orient where they are once they land on a different page.
Other times, especially on mobile, we get distracted as we're moving around. So it's easy to get distracted from a page. You pull back to the page and you need to be able to see, "Oh, oh yes, I'm on this page and this is what I'm doing. "
So looking at an example here (4:41 in the video), I have a website, the mobile site for the American Red Cross. If I clicked on the menu button up here on the right. I would then see these different options pop up. Eligibility requirements, let's click on that one. And when I click there, I do have a title right there that reminds me, look, this is where you are. "Requirements by Donation Type" gives me a little bit more information.
Now, there are some things that are kind of funky, even about this site. I couldn't get rid of this chatbot person that was saying, "Chat with me." I wanted to get rid of it so I could read the text, but I couldn't do I had to actually scroll. So, you know, even well-funded websites sometimes have challenges.
Links on Mobile
Let's look at the Mayo Clinic (5:26 in video). I want to talk to you about links. The links are really important on mobile because we can't do the hover with the hand on mobile like we can on desktop or laptop. We don't get a hover hand or a hover underline or anything like that. So that makes it really important for us to be sure to identify what is a link and what is NOT a link. And the Mayo Clinic has some variety on their site that I think makes it a little bit confusing.
On this page of their mobile website, this entire paragraph is a link. This is pretty unusual - to make the whole thing a link. And I almost totally missed it, except I accidentally hit it. So that was interesting.
On another area of the Mayo website, I can see these are pretty clearly links. I could visit these different parts of the website. But if I go over here, these links are different color slightly and they're underlined. Also this time I have a breadcrumb.
Big organizations sometimes are stitching together different websites kind of behind the scenes. To be a cohesive organization and to help people learn what is a link and what is not a link, you want to have consistency.
So I would say, Mayo Clinic, go with this great blue with an underline that should be good for all your sites. And we also know that we don't need to be underlining entire paragraphs. That is overkill and it's not what people expect us to do. So it would be easy for people to not understand, "Hey, that's the link." "Oh, I thought it was just paragraph."
In Summary
So just to sum up, use less words, value the space, because, you know, on mobile, there's not very much. Keep your CTAs up high. Title accurately with mobile in mind, don't have a super long title. I know it's hard. And make your links consistent and obvious. We know that three to seven words is a good link length and that is a good thing to aim for. Don't just go with one word and certainly don't do an entire sentence as a link. Just make it three to seven words with really clear, good information. Send a very clear message about what somebody will get if they click on that link. Then they can make an informed decision. So these are things to keep in mind for a while. I hope you will go make your website look awesome on mobile now.
Learn More
Get more practical tips to improve your nonprofit homepage by grabbing 3 Free UX Lessons to Drastically Improve Your Nonprofit Website here.