If your website still isn’t mobile-friendly, you are far behind in the SEO race - because Google penalizes such websites, which impacts the rankings significantly. Not something you would want, right? After all, more than 50% of web traffic originates from mobile devices, implying just how essential mobile websites are for any business.
So, how do you create a mobile-friendly website? Here are some of our favorite ways of ensuring that your website performs well on simply any device. But before discussing them, let’s see whey mobile websites have created such hype these days.
Understanding the ‘mobile’ hype
Like we said, more than 50% of the internet traffic comes from a mobile device. If you still aren’t convinced, check out these stats, and you would want to go mobile right away.
- Between 2016 and 2017, mobile traffic has increased to 63%.
- 49% of the total time spent on a website and 89% of the time spent on social media is on a mobile device.
- 83% of mobile users give importance to a seamless experience across all devices.
- 61% of users will likely not return if they face any trouble with your mobile website.
- 57% of users don’t recommend businesses with poorly functioning mobile websites.
- 22.5% of online sales are made on a mobile device.
Where is your website right now?
Before you act on our advice, test the current standing of your website with Google's Mobile-Friendly Test that produces one of the following two results.
- Your site is mobile-friendly - meaning that your website runs well on any mobile device, and so you don’t have to do anything. But you can still read our tips to learn best practices of mobile website development.
- Not mobile-friendly - your website can fail the test if the font size is too small, the links are too close together, the mobile viewport isn’t configured and several other reasons. In such a case, do act on our advice so that your website performs well on mobile devices.
Don’t create a separate website for mobile devices
When mobile devices were relatively new, separate websites were developed, instead of tweaking the desktop versions. Some businesses still practice this, but it isn’t a great idea because today’s technologies allow you to maintain a single website that is compatible with every device and screen size.
Moreover, let’s not forget that Google also penalizes duplicate content. So if you develop separate mobile and desktop websites, you’d have to change all of the content as well. Too much work and too many hassles. So just have one single website for every single device out there.
And how can this be done? Responsive design - our next tip, and something which many of you would already be aware of.
Base your website on responsive design
Responsive design allows you to develop one website which can be viewed properly on any screen size because the frames adjust accordingly. Doing so prevents you from the hassles of maintaining separate websites.
Responsive design uses flexible layouts, images, and stylesheet queries, and can detect the screen size of the device from which the website is being accessed. Accordingly, the layout and orientation are automatically modified so as to ensure consistent user experience for both desktop and mobile users.
Please note that responsive design isn’t the only method for serving mobile viewers. You can also go with dynamic serving, separate websites (they have their cons though like we’ve already discussed) and even a mobile app. But since Google recommends responsive design, it is what we prefer, and you should as well.
Understand the best practices for mobile optimization
Google displays the Mobile Friendly label next to the website on the SERPs. If you want this label to be displayed for your website as well, it should meet the criteria given below.
- Your website doesn’t host Flash-based content and or use other software which isn’t common for mobile devices.
- The text size is readable without requiring the viewer to zoom in.
- Configuring viewport helps you achieve this - more on this later.
- All content fits on the screen and there is no need to scroll horizontally.
- This can be achieved by displaying and sizing content such that it flows in through the viewpoint.
- Vertical scrolling is acceptable, but ideally, all important elements and information, especially the CTAs should be above the fold.
- Links are placed at appropriate distances such that they can be tapped easily.
- Don’t cram in several elements on the page segment. If you have properly set up the mobile viewport, then Google suggests that your minimum tap size should be around 7 mm or 48 CSS pixels.
Include a viewport tag
The viewport is a virtual space which a browser uses for determining the appropriate content scale and size for the device’s screen. For ensuring the same user experience on any device, this tag becomes critical because it is what makes your website perform well on a mobile platform, specifying content that must fit the screen.
A viewport can be configured in many ways, and here is how we usually do this.
<meta name = ”viewport” content = ”width = device-width, initial-scale = 1”>
Stick to simple designs
Desktop users may prefer fancy websites, but for a mobile device, the design of your website should be minimal. Too fancy designs often have large and bulky elements that may decrease the loading speed. Simple designs appear on the screen quickly and garner attention more effectively.
Pay attention to the font style, size and button positioning
Mobile devices have a smaller screen than desktop PCs, making font sizes and button positions an important element. The recommended font size is 14px, slightly bigger than normal, but that is fairly okay because your website content should be easy to read without the need to zoom in the page. However, if you have uploaded any forms to be filled or have labels, then a smaller font size of 12px is more appropriate.
Like the fonts, bigger buttons are preferable because they are more prominent if they specify any CTAs. Bigger buttons are harder to miss out, and there are fewer chances that a user will press the wrong one. Apple suggests that buttons should have a minimum size of 44px × 44px. As for the positioning, any CTA buttons should be above the fold.
As simple as they may seem, remember that both the font size and buttons do drive conversion rates, especially if your website hosts an online store. So be really careful about where you place them and what size they should be.
Ensure that all images are of supreme quality
High-resolution images are essential if you want your website to perform well and provide a top-notch user experience. And for mobile devices where the images are right in front of the visitor’s eyes, this becomes even more important.
The latest iOS devices feature high definition screens, requiring images of twice the resolution for desktop websites. This ensures that your images are not pixelated or appear blurred when displayed on a retina quality screen.
Remove default zoom
We already talked about the viewport meta tag, but it alone isn’t enough. Using the same tag, you should set up customized variables as shown below to disable auto-zoom.
Enabling auto-zoom disrupts the position of various elements, affecting navigation, and hence, user experience.
<meta name = ”viewport” content = ”initial-scale = 1”>
Use YouTube for all website videos
On what platform do you upload the videos featured on your website? If there are too many videos, they are viewed differently on mobile devices, and often affect site performance negatively. Upload all videos on YouTube, and then embed on your website pages. YouTube already runs on a responsive design, ascertaining that all videos are played properly on any device. So you don’t have to take any of the steps that are otherwise required for mobile-friendly videos.
Allow users to view the full website version if they want to
Your mobile website may be designed impressively and may also perform well, but you should still give your visitors the option of switching to the desktop version if they want to. Some of them would want to avail of this, so make sure that you don’t constrain their experience in any way.
Stay clear from common optimization mistakes
Great, so your mobile website is already developed. Now make sure that you didn’t make any of these common optimization mistakes.
Don’t block images, CSS or JavaScript
Google does not prefer any of these elements to be blocked in the robots.txt file or elsewhere. If you’re doing this, rankings will decrease for both desktop and mobile searches. Confirm that images, CSS or JavaScript aren’t blocked by performing the Fetch as Google test, accessible through Google Webmaster Tools.
Don’t put up any unplayable content
Generally, mobile browsers face problems when displaying license restricted or Flash content. Issues are also encountered if your website requires visitors to install an uncommon player. Avoid all these things for an impressive mobile experience.
Set up redirects properly
Considering mobile websites, a faulty redirect is one that points users to an incorrect equivalent of the desktop URL. Such issues are reported on the Google Webmaster Tools page, so do a review and rectify them.
Keep a close tab on 404 errors
Some pages load fine on a desktop browser but may return the 404 error on a mobile device. Eliminate 404 errors and ensure you’re redirecting users to correct equivalent pages.
Don’t force users to download your mobile app
If you have a mobile app, don’t push your users to download. Yes, you should advertise and promote the app, but this should not include preventing users from viewing content on your mobile website unless the app is downloaded. Doing so generates indexing issues, affecting user experience.
Check all links thoroughly
All internal links should take users to pages that have been optimized for mobile, and not the desktop versions.
Maintain a fast loading speed
Speed is an important factor for both desktop and mobile websites. So, test the speed and take the necessary steps, if it requires any improvements.
Test, test, and test
We just cannot emphasize this enough. When your mobile website is up and running well, test it thoroughly, first on a smaller scale, and then on a bigger one. And do this on all several devices and platforms including iPhone, Android, Windows, and other mobile operating systems. Test the pages, buttons, navigation, user actions, and other important aspects unless you’re sure that your website will perform as desired.
And by the way, even if you haven’t made any major changes to your website for some time, you should still test it regularly.
Utilize SEO tools
You’ve made use of all our tips and have developed a mobile-friendly website. But how much does Google love your site? This is where SEO comes in, and unless, you adopt some best practices, your website rankings won’t improve.
Let’s take a look at some essentials of mobile SEO, but we’ll save the details for another future post.
- SEO keywords are different for both desktop and mobile searches. If you want to view top mobile keywords, check out the Mobile Trends view, offered by Google’s Keyword Planner.
- You should use particular syntax for indicating that some URLs also serve mobile content. List them down in a single Sitemap, and then submit the same to Google.
- Rank tracking tools can separately analyze the performance of your keywords for mobile searches. Keep a close tab on how the ranks change and how they are affected, and accordingly, make modifications on your website if required.
So what’re your favorite ways of ensuring a mobile-friendly website? Do let us know!
