Responsible, Responsive Design
Whether you’re doing a complete re-design of your site or simply adding a plugin to your website is an option to respond to the recent Google Mobile-Friendly update, the big picture (Pssst… It’s conversions!) can’t be forgotten.
The goal behind any website is to make it effective in taking visitors through a sales funnel – whether that means an end result of a call, a purchase or a form completion. And, ensuring a positive user experience for mobile, tablet and desktop visitors to your site can be somewhat of a challenge if it’s not well coordinated. To do this, it’s recommended a website design approach begins at the mobile device and graduates to the larger screens. Not only will this help improve the potential of conversions on mobile, but cleans up any possible distractions from preventing positive results when visitors are using desktops and laptops.
Common Mistakes in Mobile-Friendly Website Design
Responsive Theme Installed… Check. Done and Done!…?
While that would be amazing and wonderful, it isn’t always the case. Without getting too technical, there are often conflicts in code between one theme and another, so simply installing a “responsive” theme doesn’t mean the content on your site will be mobile-friendly, or even entirely responsive. These code conflicts can create a less than desirable user experience and go against what you’ve hoped to accomplish in completing a website redesign.
Take this website for example. (I’ve created a screenshot with the company information blotted out to protect the company.)
As you can see, the website doesn’t really fit within the restraints of the smart phone… Forcing the user to use their finger to slide the website from side-to-side to see the entire image. There’s also some pretty significant red flags with this design. The logo is partially covered by the navigation tool, there’s no call-to-action (phone number or button) showing before having to scroll down, and as you scroll, the there are a couple sections that are extremely crowded which should have been simplified. Content on the home page needs to be condensed so on mobile the Columns can turn into short rows with value propositions and don’t overlap at all. If you’re site has any of these issues, despite having installed and activated a “responsive” theme, your site won’t pass the Mobile-Friendly Test with Google.
(Click on the image to open a new window and see the complete home page with annotations.)
Plugin/Third Party Responsive Site Generators
If completing a site re-design is out of the question for budget reasons, these plugins or actual third party mobile site generators can be quite helpful in responding to the urgency behind making your site mobile-friendly. But, much like installing a responsive theme, you can often run into conflicts due to images or java script running on your website. If your website wasn’t built with smart phones in mind, it’s extremely likely you’ve got far too much going on, competing for space and priority on your website and you’d be advised not to rush through the process of applying these app solutions to your website. The example image shows how simply applying an app/plugin doesn’t fix user experience on its own. Branding is missing because the company name is in text instead of showing a logo, calls-to-action aren’t in view, phone number isn’t separated from the URL and isn’t “click-to-call”, and images don’t fit properly. Instead, take the time to use the tools provided by these apps to re-prioritize what appears to the site visitor. Depending on how tech savvy you are, apps like these can be easy for you or difficult, but will be time consuming regardless if you are going to make sure all your pages are optimized for an ideal user experience.
Note: You may have to pay for use of these apps/plugins if you really want to do it right and include many of the essentials for success on mobile.
In order to make your website mobile-friendly and effective, here’s a short check list of elements that should appear right away as visitors come to your site on mobile devices: