CAll Us: +254 711 994555 Submit Ticket   Login
Website design using a mobile first approach for maximum mobile conversions

Website design using a mobile first approach for maximum mobile conversions

If I was to be asked, what was the most important thing one should do for their website? I’d probably advice you to get it on WordPress, secondly I would implore you to make it mobile responsive. In 2018, 52.2 percent of web traffic came from mobile phones, compared to a mere 0.7 percent in 2009. Google’s mobilegedon has come and gone and a major shift in web best practices has shifted. Today if your mobile is not mobile optimized, you would rather not have it at all.

There are 3 ways one can make a site mobile friendly.

Adaptive design

This is where the webserver will serve different content depending on the user agent. This allow one to maintain the same URL structure but serve mobile optimized content to mobile users. When using this structure one has to inform Google to crawl both versions of your website.

Separate mobile site

This is whereby mobile users access a completely different site from desktop readers. The URL structure is completely different e.g.

 m.mbitrix.com or mobi.mbitrix.com

Forgive me for being a bit crass but this might be the dumbest thing you do for your website. You stand risk of your content being marked as duplicate by Google.

But if you still want to do it (You really shouldn’t) you can add a rel=”canonical” & rel=”alternate” tags to instruct Google.

In the desktop page, add a rel=”alternate” tag pointing to the corresponding mobile URL. This helps Google bot discover the location of your site’s mobile pages. On the mobile page, add a rel=”canonical” tag pointing to the corresponding desktop URL.

 

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1">
<link rel="canonical" href="http://www.example.com/page-1">

 

Responsive design

This is the way to go. You must have heard it mentioned around. It is a buzz word and Google and web designers love it for good reason. In this method you serve the same code and content to all devices but your layout morphs and rearranges to fit smaller screens. This means Google bots only get to scan one set of content and this saves on resources.

Once your site is mobile friendly, there are a couple of things that you have to watch out for:

Page speed

We already talked about page speed and how you can optimize for it but on mobile it’s even more crucial. In a study Google found that websites lost up to 43% of their traffic due to slow loading speed on mobile. Mobile users are more agile and require content served up to them sooner rather than later. You can increase your mobile web speed by using AMP from Google. Basically accelerated mobile pages provide stripped down versions of mobile content that are specifically designed to offer super-fast, super-lightweight pages that load instantly for people visiting from search.

Avoid Interstitials

Users on mobile have to deal with a small screen size and as such any content that overlays on a mobile screen will prohibit the user from accessing the content. Google frowns upon popups that fill a user’s mobile screen and Ads that cover more than 50% of the initial content that the user sees. Avoid popups on mobile.

View port Meta tag

Add the Meta viewport tag to your pages head tags. This tag tells Google the scale of your website and how it should be loaded. By default a mobile browser will open a website at a 980 PX viewport which leads to the rendering of the desktop version of the site. To fix this add the viewport tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Keep your pages crawlable

Ensure that all assets used by your webpage are accessible to Google bots. Do not use the robots to block any directories that contain assets necessary for your page load. To see how Google views your website you can fetch as Google.

Give clickable elements some space

Avoid placing buttons, links and other touch elements too close to each other. Remember users on mobile are dealing with limited space and might appreciate elements that they can click without strain.

In conclusion, in this age of mobile first website design, websites should be built with a mobile first approach. Having a high performing mobile website will surely increase your impressions and overall conversions.

About the Author
Stephen Mbiyu
Stephen is a website developer with core skills in PHP, WordPress and internet marketing. He is a valued member of the Kenya Website Designers Dev team.

Leave a Reply