Head

Form

Lower Head

Boost Your Site’s Mobile Friendliness

Boost Your Site’s Mobile Friendliness

Get your website up to speed on mobile with these 17 action points from Stoney deGeyter, CEO and Project Manager for Pole Position Marketing. From design considerations to URL selection, Stoney covers all the bases to help boost your site on mobile devices.

In this webinar you’ll learn about:

  • Configuring your site for mobile
  • Formatting content for usability on smaller screens
  • Using selection boxes to avoid excess typing
  • Integrating social sharing options

Speaker: Stoney deGeyter, CEO & Project Manager

Watch Time: 00:26:24

Download 17 Action Points to Build a Mobile Website Visitors Love slides on SlideShare.

[Video Transcript]

Hi! My name is Stoney deGeyter and I’m going to talk to you today about 17 different ways to build a mobile website that users love. Now, over the last couple of years, we’ve seen a lot of movement towards mobile first, mobile only, getting that mobile website out there and a lot of people don’t really know quite what that means or what you have to do. We’re going to look at 17 very specific things that you should be doing to make your website more mobile friendly. Before we get to that, we’re also going to look at some background information to help us understand why this whole mobile thing is important.

Let me introduce myself. My name is Stoney deGeyter, and I do what I call web presence optimization. It used to be search engine optimization or web marketing, but really we focus not just on the search engine, not just the user, but the entire web presence. If you want to follow me, you can find me on Twitter, Google+, and LinkedIn, and of course my company is Pole Position Marketing. We’ve been doing web marketing since 1998. And I’ve written a book called “The Best Damn Web Marketing Checklist Period.” You could find it at webmarketingchecklist.com.

All right, so let’s get into this and talk about why mobile-friendly design is important. Why is mobile the top mode of internet usage? Now one thing we’ve got to realize here is most mobile internet usage is done through apps, and that’s the line that begins to intersect with the yellow desktop line. Apps are increasingly part of that mobile experience and more so now than desktop computers. If you look at that purple line, what we’re seeing there is actual mobile browsers.

When people are searching or they’re looking for things or they’re finding things online and whatever, everything is done, browser usage is far lessened, and we know we do apps and browsers very differently. I’ll go to my browser and I’ll do a search or I’ll go to some of the websites that I regularly go to. Apps, I go to those for sites that I regularly visit on a consistent basis and I don’t want to search for it or I don’t want to bookmark it or they just don’t have quite as a great of a user interface online. I’m going to go to the app for that and that’s kind of the repeated usage. If you have one of those sites where it’s a business that you go to time and time and time again, you may want to get an app. The mobile website is still going to be important because that is your starting point. The site, that’s where people are going to come in and find you and then you can upsell them to the app. You can get them to do that.

But one of the things we want to really stress here is that more and more people are using mobile for internet than desktop, and that means we have to really pay attention to how we build our websites and what we do and how do we interact with our users based on the platform that they are on. More searches are also performed on mobile devices. More Google searches take place on mobile devices than PCs in 10 countries, including the US and Japan. Now that’s big. Now a lot of those searches, they are done through apps, maybe Google now or maybe with Siri or maybe it’s something else, but a lot of that ties right back to the browser. When I do a search on Siri, it’s going to open up my browser. So I’m doing that app usage but then I’m moving over into the browser usage.

When we’re talking about how people are searching and what they’re looking for, a lot of that now is done on the mobile device. It might be somebody searching for directions, it might be somebody searching for contact information or maybe they’re beginning a research process for the products or services that you offer. So we have to keep this in mind that if people are using their mobile device for searching, that means they need to find a website that is compatible for that mobile device.

The multi-screen experience has really become the new normal. It’s how people work and how people interact. It’s hard to even watch a TV show anymore without seeing something on the screen that’s bringing people back to a mobile device, whether it’s a Twitter handle on the screen or it’s go look up additional information. A lot of these things that the shows and the TV shows and even movies now are interacting online in ways that’s saying, “Hey, you know what? We know people are multitasking while they’re watching our shows or programs or movies, so let’s get them to multi-task with us.” But this has become the new normal where people are using multiple devices at a time, so we can’t just focus on the desktop anymore. We can’t just focus on where we think people are because they’re in two places at once. Literally when it comes to being online, people are in two places at the same time doing different things.

The mobile-friendly design is really critical for local search because that is the first point of contact where people aren’t necessarily looking something up on their desktop for local, and they do and they can. But when they’re local, their phone is what’s with them all the time. Their phone or their tablet is with them and that’s how they’re going to look stuff up. A lot of people, they’re sitting at their desk, they’re at their computers, they may look something up for later, but for here, now, immediate need, they’re going to their phone. And nearly half of all US mobile users use mobile exclusively for product research, and this is local. People are researching products. They’re looking at, “What is it that I want to buy? Which is the product that I need?” and they’re doing that on their mobile devices because a lot of times that’s quicker, that’s easier. It’s right there, it’s immediate.

Eighty percent of all local searches performed on mobile devices convert to a purchase. Now that’s pretty good. That’s a pretty high rate. Now, you’re not going to see an 80% conversion rate on your site, but one of the things to keep in mind is if somebody’s searching and they land on your site, you have a strong chance of selling them. It’s just a matter of, “Do you have the site? Do you have the experience? Does your website meet the need of that mobile user while they’re looking?”

So that’s critical to understand that you have this opportunity to really get that sale when somebody is using a mobile device so you’ve got to do everything you can to get that. And mobile visitors do get frustrated very easy. If they find you at all, if they don’t have a good experience on the site, they’re going to turn around and walk out, and in this case, that just means flipping over and going to another site, another app or another experience somewhere. So you really have to make sure not to frustrate your visitors, which means giving them that experience that when they come on the mobile device to your website, you have an experience that matches their expectations and their needs.

And of course, we’ve all heard of “Mobilegeddon,” it wasn’t that long ago. It’s in the Google world out there. Mobile algorithm, we thought it was going to change the world, and it really didn’t. It’s just more of a slow build. But one thing to keep in mind is that this whole “Mobilegeddon” thing is maybe not an immediate destruction of what we thought was going to happen across the search engine spectrum and the search results, but it is a factor and it does play into that. Because mobile isn’t the future, it really is right now. Everybody is using their mobile device. If you go to a restaurant, you look at people, look around, people are on their mobile devices. If you’ve got kids, you know they’re on their mobile devices, and it’s just the new normal. And we can’t look at mobile marketing as something, “Yeah, that’s something I need to do and I will get to that.” It’s literally something you need to do now because it is here right now. So now let’s go into this and figure out what do we have to do to build this mobile-friendly site?

We now understand the importance of it, but what does that mean? What does building a mobile site do? First of all, you got to start with a mobile foundation. Mobile can’t be an afterthought. And so long for the past several years, mobile is like, “Yeah, okay. I need to build a mobile version of my website,” which means I have built the website and then I make sure it works there, and then I look, “Ah! Mobile, yeah! Hey, it looks okay on the phone.” But we can’t take that approach anymore. It can’t be an afterthought. Mobile has to be one of our primary thoughts when it comes to web marketing and building a website that people like. You can’t just go build the site on the desktop and say, “Yeah, I’ll throw in a plugin on my WordPress theme.” That’s just a Band-Aid solution. That’s taking mobile and thinking of it second. It’s thinking of it later. We get that desktop experience, the website is perfect, but, “Hey, you know, mobile, we’re just kind of phone it in,” and we can’t do that anymore. We really have to nail the mobile and get that down from the get-go.

One of the best ways to do get mobile right from the beginning is with responsive web design, and responsive is, right now, it’s pretty much preferred by Google, although there’s a new technology that I’ll talk about in a little bit here. But responsive design allows you to create one website that works across all platforms. And whether you’re on a phone, a tablet, on a desktop, wide screen, tall screen, whatever it is, the responsive design just really adapts to whatever the visitor’s doing. And it’s neat, it’s clean, it can be very streamlined. It does require extra code, but you don’t have to spend a lot of time keeping up two different websites or updating two different things. You really got it all built in to one place.

Now there are a couple other mobile configurations. There’s dynamic serving where you have the same URL, but the HTML and CSS is very different. And so depending on what device somebody’s using, it goes okay and, “Eh, you’re on a phone. I’m going to grab this HTML. Oh, you’re on a tablet, I’m going to grab this HTML. Oh, you’re on a desktop, I’m going to grab this HTML.” And it’s tricky because you’re basically building a different website for each different platform that you wanted to work on, versus a responsive design. It’s one design and it’s just designed to flow from one device to the next. A little extra coding, but you’re not having two completely different HTML codes.

The next one is separate URLs or basically have different URLs. And a lot of times, we’ve seen that m.site.com. This is my mobile site. And again, you have that same issue where you’re taking two sites and you have to keep them updated separately. And not only that, but now you’ve got two different URLs that you have to worry about. How’s that going to work in the search results, mobile search results versus desktop search results? Those are not the ideal configurations. Google currently recommends responsive design namely because you only have to maintain one site. It’ll work across the board and it allows Google to crawl the site more effectively without having to worry about duplicate URLs or anything like that.

Google has just recently released AMP, which is Accelerated Mobile Pages, and that goes back to the days of having a different code for the same website, and we have yet to see how this takes off. We do know that Google is working AMP into their algorithm. Mobile sites that use AMP will get a boost. Now this may be Google’s way of gaming the system and just trying to get their technology to take off. We’ll see over the next 6, 9, 12 months, maybe 2 years, how far AMP goes. There are some limitations to it, and it’s not something I’d necessarily recommend jumping into. Research it out, figure out if that’s the right platform for you. But as of right now, there’s going to be a benefit in the algorithm on mobile devices for using AMP. We’ll see if that lasts.

Okay, let’s get into the meat of this. We want to look at the action tips to build a mobile-friendly site. In this case, we’ve got 17 of these so let’s get through. And by the time we’re done here, you’ll have a good idea of what your site needs to be mobile.

1. Design buttons and links for fat fingers

Number one, you want to design buttons and links for fat fingers. The mouse, it’s always very easy to click on something. You see that little pointer, you know right where it is, and you click. When you’re on a mobile device, the pointer, which is your finger, isn’t as precise. It’s very fat. You can’t really figure out exactly where you’re hitting. At any given time, you have a pretty wide margin of error when you’re using fingers. So you have to make sure that all of your links and all of your buttons accommodate for this type of imprecision, and it’s just a matter of making buttons bigger and making sure there’s enough space between each of your of your links. What you don’t want to do is have to force your mobile users to zoom in on the web page just so they can make sure they click that right link. So design with that in mind and just realize that even though the screen space on a mobile is even more limited than a desktop, we have to make things bigger, especially those clickable elements.

2. Collapsible navigation

You also want to have a collapsible navigation. One of the great things about mobile is it allows us to get into this what I call content hiding, and you’re not really hiding it, you’re just making it on-demand. And with the desktop device, you want that navigation front and center. You want people to see it, you want them know exactly what you do. But on a mobile device, you’re screen space is limited so we have to figure out what’s most important. So get visitors see the content but if they want that menu, have it available, just on-demand. So keep that collapsible. Allow it to be hidden away. And especially if you have the type of navigation where you click on a link or you hover over and even more menu items come up, you want all of that to be collapsible in the mobile navigation.

You want to keep it as clean and as tight as possible and allow visitors to really get to that content without putting things in their way. And for the most part, navigation is one of those things that’s in the way. It’s great for the desktop but on the mobile device, you want that secondary to the content that you want people to see.

3. Less text (is more)

Regarding text, less is more on a mobile device and again, it’s about keeping the site simple. Now that doesn’t mean you don’t want to have any text on your mobile site. That doesn’t mean you can’t have the same text that you do on your desktop site. It’s a matter of how you present that text, and we do a lot of what we call content chunking, and I’ll get to that in the next slide. But this, the visual appeal here is just make it easy. Make it easy to see, make it easy to read.

4. Chunk content

Keep your content limited at least visually, and use that content chunking method where you take large pieces of content and you break them down into bite-size chunks where you have a menu item. And again, you’re getting that click. It’s on-demand content where they see the header for the content, they click on it, and it expands, and now they have more information. So you don’t have to put all of the text there at once. You just put the pieces of the text that say, “Hey, you know what?” The visitor says, “I want to read that.” They click it and the text expands. They don’t go to another page. It’s still the content on the page, but you’ve chunked it down into this header that they can open or close as they wish.

5. Large (readable) fonts

Fonts on your mobile devices, and again, dealing with a very small amount of space but we have to make fonts larger because they have to be readable. You don’t want to force your visitors to have to zoom in on the web page in order to read the content.

Now, iPhones have this great reader view in the address bar. If you see a couple lines up there in the address bar, you click on that and it strips everything down to just the content and images relevant to that page, and the content is very clean. It’s big enough. There’s enough spacing. That is a good guide for how the content should read on your own website. Have it look like that in the sense of the line spacing and the font size because they developed that in order to make it readable. So you don’t want to go any smaller than that reader view on the iPhone. Ultimately you just want to make sure if somebody can look at it, they can read it. They don’t have to stress their eyes too much, things aren’t too cramped together. Give that plenty of room and make reading very, very easy.

6. Text label above field entry

When you’re dealing with forms, always put your text labels above the form field. Old school desktop, you have the text label to the left of the form. Well, on a mobile device, that forces people to have to scroll side by side because usually that’s put in a table format. So on a mobile device, you just want to be able to scroll, see the text label, and then see the entry. And just do that across the board and you won’t have any problems.

7. Remove placeholder text in form fields

One thing also you don’t want to do is put the text label in the form itself, and that looks like, “Hey, this is a great way to save space on the mobile devices.” But the problem is once you start entering text, the label goes away, and all of a sudden, if the person was distracted or they forgot what they were doing, they don’t know, “What am I filling in here? Was this the apartment number? Is this my phone number? Is this supposed to be first name versus last name?” So you want to make sure you have the text labels visible at all times and you don’t put them in the fields itself just because that adds to the confusion.

8. Use selection boxes

When possible, use selection boxes. Give people the option to choose rather than to type. So, “Hey, how did you find us?” and, “Oh, I got to type in Google. I got to type in Facebook.” That leaves it open for errors. Make it easy for people to scroll and say, “Okay, that’s the option I want to select right there.” So just making these forms easy, that’s what you want to do as easy as possible.

9. Eliminate pop-ups

Don’t have pop-ups. Interstitials on phones are annoying, the kind of pop-ups came back in vogue on the desktop because they’re just kind of nice little overlays. But on mobile phones, they’re a little bit more difficult and sometimes they don’t always work right, and Google has said that, “Hey, if you have those, we’re going to devalue your content because that interferes with the user experience.” So just make sure to avoid any kind of pop-ups on there that take over the screen.

10. On-demand social sharing

Social sharing, much like content, should be available on-demand. Don’t have the social icons out there because what happens is either they’re too small and you’re dealing with that whole fat finger issue, or you just don’t have the room for them. They kind of get in the way. So have an option to share the content but then once you click that share button, then it brings all of the options, so you have them available. But again, mobile device is all about making content available on-demand as people need it.

11. Utilize horizontal scrolling (swiping)

Use horizontal scrolling or swiping. Now, you don’t want people to have to scroll horizontally to read the content where they have to scroll back and forth, back and forth. But if you have the type of content like products, whatever, people have gotten really used to swiping sideways to see more products where you don’t have to take users to another page, you just show them more options. And if you use Netflix, they have really mastered this where they give you the information for each of their categories of movies, but you just scroll and you start swiping to the left and you see more and more and more options. It’s just a great way to keep the visitor engaged with the content on the page.

12. Optimize images

You want to optimize your images, make sure that they load fast. This is very important in mobile devices where people don’t always have a strong connection. Maybe they’re just going through an area where the connection isn’t good, they just don’t have…really able to get to that information quickly. Images will help. The bigger your images are, the harder it is going to be for your visitors to be able to enjoy that experience on your phone or on their phone or on their device. So keep those images optimized and very, very streamlined.

13. Reduce HTTP requests

You also want to reduce the number of HTTP requests, and this is just the number of times that the website has to call information back to the server. The best way to do that is to implement some form of caching, especially for visitors who come to your site repeatedly or they go from page to page where it allows their phone to cache a lot of that information, and it doesn’t have to be downloaded every time. And the less that the device has to go back to the server and ask for more information, the faster it is that those pages are going to load.

14. Reduce scripts and inline styles

You also want to reduce the scripts and inline styles. Those all take time. Every time there’s a style sheet, every time there’s a JavaScript, it has to go back and get a request from the server, and then it takes time to implement those things. So do what you can to reduce the level of these scripts and styles, the number of scripts and styles on the page in your code, and that will help your pages load a heck of a lot faster.

15. Use CSS instead of Javascript

And as much as possible, use CSS versus JavaScript. JavaScript is bulkier, it’s heavier. It takes more time to work versus CSS, very light and it moves fast. So when you can take something that you’re doing via JavaScript and you can translate that into CSS or HTML5, do it. That’s going to make everything move a lot faster on your website.

16. Tie address to GPS coordinates

You want to tie your address to GPS coordinates. If there’s a situation where for whatever reason Google can’t find the address and people are clicking on, “Hey, how do I get to your location?” that ties to GPS coordinates so their mobile device will be able to find it. It may not know the exact address or the exact… “Hey, this is where this is,” but using the GPS coordinates, it will be able to take you directly to that location if something goes wrong. So you want to make sure you do that.

17. Link to full website

You want to link to the full website. You have a mobile version and if there’s an option for them to see the full website version, add that in there if you have two different websites. Now if you’re using the fluid design, responsive design, you’re not going to need this because it is the same website. But if you have two different websites, if you got an AMP version or you’ve got an m.website, always link back to the desktop site because a lot of times, those mobile versions are missing key functionality and they don’t work as well and people say, “You know what? I just want the real site experience,” and give them that option to do that.

Finally, if you missed Mobilegeddon, you’re not alone. We all kind of missed it. It came and we thought it was going to be this big thing and it really turned out not to be, but you got to think more of a delayed impact. We still have time to prepare because no matter what, this mobile thing is getting more and more and more important. Every day that goes on, mobile becomes another day more important. Not to say that the desktop is becoming less important, but mobile is becoming more important, and every day delayed, it’s going to be harder for you to catch up. It’s going to be harder for you to make an impact and get where you need to be. So you still have time because Mobilegeddon isn’t going to destroy the planet, but you really need to get your site there because no matter what, it is coming for you, and you will be impacted, your business will be impacted. Thank you very much. I appreciate your time and I hope you’ve got some valuable information from this presentation.