User Experience (UX) on a cell phone is very important. More and more of your website’s traffic could be coming in on an iPad or mobile device. Here are a few tips to help you know some best practices for your website on a mobile phone.
Full Transcript
Hi you guys welcome to another WordPress Wednesday. My name is Kori Ashton. I’m sorry for the late video today. I’m not feeling the best (I’ve got some nasal, sinus, fun stuff going on.) I can’t let a WordPress Wednesday go by without talking to y’all and giving you some fresh Ideas for your website.
Today is going to be a short-quick video (to the point.) I want to talk about what kind of things you need to look at when you’re designing your website for mobile traffic. When they’re coming on on to your website from a cell phone or an ipad, what are some good things we can do for good UX or UI experience? User Experience- User Interface. What are some things that we can do to our websites to cause improvement and allow people to have a great experience as they’re trying to find our products or our content on a cell phone (on a very small screen?)
One of the things you can do is (of course) choose a responsive theme. WordPress websites allow for responsive themes. That means that everything here- i’ll show you here. We’ve got an image here to the left, a bit of text to the right in a kind of 1/2-2/3 type of break and another row over here in a 1/3- 2/3 sort of break. Whenever you’re coming in on a cell phone, everything shrinks down and gets really nice. Let’s see if I could shrink down my screen here. It shrinks down and gets really nice over on into one column. So as I slide this down you see that our menu turns into this hamburger icon now. Very nice. As we scroll down, everything gets into this single column. Now the picture is stacked on the top of the text. Our font is still really nice size. Everything gets in line.
My first tip is to make sure that the theme that you’re using is responsive. What you’ll want to do is just go ahead and grab out your cell phone and type in your domain name. As long as you don’t have to zoom in or zoom around to try to click something on your website, more than likely your theme is responsive and you’re good to go. People are having a better experience on your website.
I’ve already mentioned the second thing I wanted to say- is your fonts. You want to be sure that your fonts (even on a cell phone) look really nice. So if these are too big (they might look nice on a desktop) but once you shrink it down, you might want to actually control that and shrink it down to have a little bit more of a smaller size font. You can easily do that and make those settings happen inside of your CSS (inside of your child theme CSS) and apply some really cool stuff there.
The other thing I want to talk about next is when you are designing for a desktop, think about the fact that it might look really cool on a desktop but it might not have that same effect on a mobile site.
I’m going to give you this example. This is a real website. I’m sorry if this is a lot going on. This is a real website called lingscars.com and they sell cars on this website. You are not seeing anything fake. This is the real deal. They actually make millions of dollars off this website every year. It’s pretty incredible. This type of website is not very structured for a cell phone experience. They do solve the problem. They do have a mobile version of this website. As you see here if I shrink down the screen, you’ve got things overlapping and you wouldn’t be able to navigate the website very well. She definitely had to have some sort of a different theme or solution for her mobile version. You can check that out.
Keep in mind as you’re looking at a desktop version of your website you might want to consider, “what is this going to look like on a cell phone?” Will things stack correctly on a cell phone?
The other thing that you want to keep in mind (and I’m going to give you an here) is if they’re coming in on a cell phone, they might not need to see a big slideshow. This text right here (when it’s shrunk down on a 2 in. screen) might not render correctly. This website did a really cool solution by eliminating the slideshow completely and having their map appear. Thinking that if somebody’s coming to their website on their cell phone, more than likely they’re looking for a phone number to click and call or they’re looking for address to get instructions and directions on how to get to their location. I’ll show you that. It shrinks down and it hides the slideshow here.
You can achieve hiding things inside of your stylesheet by using display: none in a media query. If that’s a little confusing, I’ve got plenty of videos that talk about CSS styling for media queries and how you can show and hide certain things on a cell phone.
Let’s talk about one more thing really quickly:
- We’ve talked about responsive-that’s #1.
- We’ve talked about fonts- that’s #2.
We definitely want to address being able to hide things and think about structure on a desktop versus a mobile (what content needs to be there, what content does not need to be there.)
The fourth thing that we want to talk about is, creating a really great menu option. You’ve already seen the couple of solutions where our menu changes down to this hamburger menu here- opens up and give you some options for even having additional accordion folding theme or menu items. One of the ways that you can accomplish that (if your website theme does not just naturally allow that functionality to be inside your website) is by using this free plugin called, Responsive Menu.
This is a really outstanding plugin that allows you to just (easily and for free) create a really great mobile experience for your top menu. In a sense, it will just overwrite what your theme allows you to do. You can designate the colors for it. You can designate does it sit on the left side or the right side? Does it have the word menu underneath it? Does it have click here underneath it- what does that look like? You can adjust the whole thing from the free version. If you want to upgrade and get a pro version, you’re going to have other cool options.
That’s #5.
The other thing you want to think about is that show and hide experience. I’ll show you this really quickly. Coming in on a homepage here for insurance, he knew that (let me show you this) these options here are really important but he didn’t want them to be missed with all this content going on in a mobile experience.
What we did was we created them as major buttons happening right here on his home screen. You can easily scroll through everything else and get to all the other content. Right away we’ve got these call to action buttons that people are able to click on really easily.
The final thing I want to say- the 5th and final thing (I might have given you 6 or 7 by now, who knows.) Any buttons that you saw right there (let me show you this again.) Any buttons that you have on your website, you want to make sure that they are going to be large enough for large fingers (big man hands or even those of us with little stubby fat fingers) that we’re going to be able to click on things really easily on your website on our tiny cell phones. Your social media icons, any call to action, any buy now buttons- you want to be sure that even though it’s a responsive layout, are those font sizes big enough? Are they separated far enough apart so That you’re able to get in there and click on things easily and navigate the site really well? You want to be sure that all of your images are optimized so everything loads quickly.
There’s all sorts of things you can think about for a great user experience on a phone. Have your friends click around on your website on their phones. See what they think about them. Ask them to turn it from straight up and down to a horizontal view and see what that looks like. Just keep working that website until you know for sure that people are having a great experience on that cell phone.
I hope you’re having a great WordPress Wednesday. I will see you next time and hopefully I will have my voice back.
Y’all have a great one. Bye y’all!
