So what even is a responsive website?
A responsive website “responds” to whatever device it is rendered on. The website will realign to the size of whatever display screen it is on (tablet, mobile, and desktop). Before you dismiss this information with a “Of course my website is responsive,” let’s expand on the topic of a responsive website a bit more, because what we’re about to share with you will definitely give you an advantage over your competitors.
Check out your website on your phone
The reason it’s so incredibly important to have a good user experience on a mobile device is that Google estimates that about 63% of searches take place on a mobile device. As Google starts to “humanize” its machine learning, things like user experience and user intent are becoming increasingly important when it comes to SEO (search engine optimization).
So how do you know if your website is responsive? If you look at your website on your phone, and it displays as a whole page, your website is not responsive. In these instances, users will have to increase the size of your website on their device manually and scroll from left to right to read the content. This creates a terrible user experience and greatly increases the chances that your potential customer will bounce. Google also penalizes sites for being non-responsive.
Are potential customers getting what they need out of your mobile website? >>
Being responsive is not enough
Right now you may be thinking, my website translates just fine to mobile devices. With the internet being such a competitive landscape, having a responsive site is no longer enough if that responsive site does not prioritize information for the user.
What do we mean by that? We mean that you have to deliver the right message, to the right buyer, at the right time. Depending on who your buyer is, they will prioritize the information that THEY need. If you are burying that information ¾ of the way down the homepage, that creates a bad user experience.
To determine how your information should be structured (“information architecture” as we refer to it in the biz), it can be useful to draft up buyer personas. HubSpot defines buyer personas as “a semi-fictional representation of your ideal customer based on market research and real data about your existing customers.” Once you know who your buyers are, you can better determine how they need to receive information about the products and services you offer.
Not to be dramatic, but if your website is missing these things, it’s like not having a website at all >>
Here’s a real-world example of this. At First Call Web, we create websites for all walks of small business. In the last year, we have also developed a web design that is specifically for plumbers.
We developed buyer personas for plumbers, and then we built the website design around what a potential plumbing client might be looking for. In the following image, you can see that we have put the plumber’s phone number and a contact form front and center. If it’s Thanksgiving Eve, and you have a plumbing emergency, you do not want to have to scroll to find Mike The Plumber’s phone number. We’ve incorporated bold contrasting colors, and we’ve put Mike’s van in the background to build immediate brand recognition. If someone finds Mike on a mobile, they will get exactly what they need, exactly when they need it.
Now, for all of Mike’s other buyer personas (residential and commercial projects), what we need to do is build trust. These types of customers have a couple more minutes to look at Mike’s website on a mobile. So the first thing we are going to do is introduce Mike, share his story, and provide reviews to help build immediate trust with a potential customer. In the image below, we have outlined Mike’s relatable story, and we have profiled happy customers. These things are featured right under the header, so that the potential customer feels like maybe Mike is someone they will want to work with, and that it is worth their time to keep scrolling.
To review, we have provided immediate help for Mike’s plumbing emergency clients in the header of his website. Right under that, we have provided Mike’s story and social proof to build trust. Now, and only now, is it appropriate to talk about Mike’s services. Knowing what we know about Mike’s buyer personas, we know that coming right out of the gate with services creates a bad experience. Nearly every plumber and HVAC specialist provide about the same services. Potential customers coming to a plumber website likely already know what Mike’s services are. They are looking for someone they can trust to be in their home. That is why we wait until further down the page to roll out Mike’s services.
Also, note in the image below that we have kept the design simple and clean, and here again, we have implemented a bold contrasting color. All of these design elements create a solid user experience on a mobile device.
After we provide a checklist of why someone should reach out to Mike over his competition, we’ve designed a community involvement section. This is profiled toward the bottom of the page, because it may not be what Mike’s potential customers need and want immediately upon visiting the site on a mobile, but it helps to build trust. It tells Mike’s would-be clients that he’s a proud community member and that he is not someone who is going to take his client’s money and leave in the middle of the night without completing a job.
Solid mobile responsiveness
Your website not only needs to be responsive on a mobile site, but it needs to deliver a solid user experience. If your site is non-responsive, or if it is responsive but it doesn’t tell your story, it doesn’t provide social proof, and it doesn’t build trust and relationships, your potential customer will bounce to the competitor whose site covers all of these bases.