In 2016, 52.7% of internet users are using mobile devices when browsing for websites – whether be it a product or a random search. And as long as Google continues its algorithm changes for having a mobile friendly website, this figure can go up faster than we can imagine.
With this in mind, having a WordPress website means making its web design and SEO mobile responsive.
Have you considered this task yet?
If not, you need not worry for we have listed these 10 life hacks you need to create a mobile responsive website. So, take out your pen & paper and start completing your to-do list after reading this blog.
(Note: Some of these tips are only suitable for separate mobile WordPress sites, as responsive websites use the same content for all screen sizes. But it’s worth bearing these tips in mind when creating responsive sites too – as with all web design. You need to achieve a balance between the needs of all the different people using your site.)
1. Make your mobile site simple to navigate
Use a simple navigation structure to help mobile users find what they’re looking for. This can include:
- Mobile-friendly navigation menu.
- Avoid rollovers that can be fiddly to use on mobiles.
- Provide a keyword search box for larger sites.
- Keep everything vertical to avoid the need for scrolling sideways.
- Add a prominent ‘home’ button.
- Use bold, colour etc. to highlight more important/popular links and buttons.
- Keep it simple – aim to have no more than 7 links on each level of navigation.
- Make sure CTA buttons scale well even on smaller screens.
2. Design for touchscreens
Most websites are designed to work using a mouse. Needless to say, it is a different case for when using mobile devices. Have you put in mind those users who struggle with smaller touchscreens?
There are many ways that you can address this issue such as:-
- Using large, centred buttons that are easy for people with big thumbs to press – there’s nothing more frustrating than a mobile site with buttons that are too small and fiddly!
- Adding clickable padding to smaller buttons, check boxes and radio buttons
- Reducing elaborative graphics
- Removing Flash to your web design (not to mention that it’s getting obsolete at present)
3. Attract local people
95% of smartphone users have used their phone to find local businesses. If your website is aimed at local people, make it as easy as possible for them to find you:
- Place your address or location in the header of your mobile WordPress site.
- Include maps, directions and GPS.
- If you’re a national chain with multiple branches, make it easy for users to check stocks at their local store.
BONUS TIP: Register your business to Google My Business and make sure you’re using the right keywords for your industry and/or niche.
4. Check WordPress and theme version
Mobile users typically want to find information even faster than desktop users. Check your WordPress version as well as your theme version if they are mobile responsive. For example, the WordPress 4.4 version is designed to make image sizes appropriate for any devices.
Here are some plugins you can install to improve your website’s mobile responsiveness:-
- WPtouch Mobile Plugin
This plugin automatically displays a mobile-optimised version of your site whenever a user visits your website.
- Jetpack (Mobile theme)
One of the most common plugins for WordPress. It lets you use a clean and simple mobile theme which makes site load faster.
- WordPress Mobile Pack 2.0
The plugin lets you deliver existing content to other platforms, operating systems and devices.
Keep in mind that when installing this plugin, check if your WordPress version conforms to the specifications required.
5. Make your WordPress mobile website design site easy to look at
The challenge we encounter with mobile devices (but haven’t actually put into our minds) is the variety of screen brightness. This is when the magic of colour palette comes in. The right choices of contrasting colours for text and backgrounds must be considered to avoid eyestrain.
The font sizes, styles and the spacing should be considered too. Make sure that all content are fit even on smaller screens. There are users who are impatient zooming or pinching their mobile screens just to read the text.
CTA buttons should stand out so you won’t miss generating more leads. Here are some tips from us for when creating call-to-action buttons.
6. Avoid pop-up ads
Did you ever experience getting annoyed with pop-up ads showing to your small screen?
This is very much true with your audience! And this can lead them to never visiting your site again. This is why Google warned us before of cracking down intrusive interstitials, or simply pop-up ads, appearing on websites. With this in mind, they will penalise websites like lowering their search rankings on mobile search.
Here are the types of intrusive pop-up ads as explained by Google:
- Pop-up ads that cover the main content while users browse on pages
- Display of standalone interstitials that need to be dismissed before accessing the content
- A layout where above-the-fold portion of the page looks similar to the standalone interstitials but content is inlined underneath
7. Allow Push Notifications
This is ideal for e-commerce websites if they have new product arrivals or special offers. Compared with email marketing, it delivers faster messages using real-time. According to reports, the response rate is 50% higher compared with email.
Does it have the same concept with SMS?
No. The two are different because push notifications give opt-in and opt-out options for users. SMS, on the other hand, is often unsolicited.
8. Use mobile WordPress site redirects
If you’re using a separate mobile site (as opposed to a responsive design), use a mobile site redirect. This code automatically detects what type of device your visitors are using and sends the mobile users to the mobile site.
Include buttons on each page allowing people to switch between the mobile site and desktop site. Provide an option to allow people to choose which version of your site they will be directed to on future visits, so they don’t have to switch each time.
9. Test, test, test!
Testing a mobile site responsive design does not end with checking its responsiveness. The truth is it is only the beginning of everything.
Google Analytics lets you see and analyse the user behaviour to your site. It can also provide you with reports about the mobile devices and browsers used by your site visitors. If you navigate the features of this tool by Google, you can gain many insights that are helpful to improving your website.
10. And don’t forget your desktop site!
On top of everything, make sure that your mobile website design conforms with your desktop site. Everything has to be consistent – from the font style, colour palette, content and to the overall features of your website. Do not let the differences between a desktop and a mobile device compromise the overall look and features of your website.
As much as possible, do not make your mobile site design complicated because users and you (yes, YOU!) may have a hard time in navigation. Subtle changes help you make it as effective as possible.
Improve your mobile web design and SEO
Did you know that mobile web design comes hand in hand with SEO? systEmise can guide you to make the look and feel of your website better. The services we offer vary from web design, social media management, SEO and many more. Contact us today at firstname.lastname@example.org. You can also subscribe to our newsletter by filling up the details below to stay updated.