Mobile friendliness is now an official ranking factor for websites. As of 21st April 2015, Google have been boosting the ranking of mobile friendly pages around the globe on mobile search results. The reason, of course, is simple. Google are addressing the frustration that many of us encounter when browsing the web on our smartphones – when we are forced to double tap or zoom in on the content in order to read it, we leave.
Responsive design is nothing new, of course, but now the search engine giant have turned it into a ranking factor it is no longer an option but an imperative that your website design be mobile friendly.
Mobile-first design is best practice for any business in any case. Google haven’t updated their algorithm on a whim, but as a response to a global trend and demand. As more and more of us are accessing the web via our mobile phones and tablets, then the sites that are most important to us as users are the ones that are optimised for the smaller screen.
If your website is not responsively designed to accommodate mobile visitors, then, even before the official update, you will have been missing out on a lot of important business even if you didn’t realise it. Personally, if I browse a site on my phone and I find that tap targets are not spaced appropriately, it contains video or other content that is unplayable, or the text is unreadable without me having to zoom in or scroll horizontally, then I leave pretty much immediately – and I suspect you do too.
(Image Source: googlewebmastercentral.co.uk)
The Mobile-Friendly Test
If by reading this article alarm bells have started ringing, then you should head over to Google’s Mobile-Friendly Test page immediately, copy and paste your website’s URL into the field and hit ANALYZE.
If the result turns out to be anything less than “AWESOME”, then you will need to get on the case of updating your site to make it mobile-friendly without delay, for the longer you wait, the farther your will slip down SERPs, and the more business you will lose.

What Will It Take To Make My Site Mobile-Friendly?
Unfortunately, if your website was not designed with a ‘mobile-first’ attitude in the first instance, then you will probably have to do a little more than simply resize the browser to pass Google’s mobile-friendly test.
And let me just reiterate the point that I made above before we go any further – if absolute responsive design is not your absolute goal, then you are losing users who visit your site, which will ultimately result in you losing money when they abandon your pages because they can’t sufficiently access them on the devices that they want to.
Having said that, I don’t want you to fret, because you now have the opportunity to put it right, and helping you do this is the reason that I am writing this article.
Responsive Design Is Not Enough
I realise that I have been banging the responsive design drum thus far – and that’s because I do want the importance of it to hit home, even if nothing else I say here does.
But, responsive design alone is not enough. At the end of the day it is the whole performance of your website when accessed via mobile that reigns supreme. A mobile experience of your website needs to be lightning fast, useable and intuitive – and that all goes beyond the realms of basic responsive design.
Indeed, the oft-repeated mantra that responsive design will solve all of your mobile traffic problems on your website is, frankly, oversimplifying the issue.
So, without further ado, let’s get into the nitty-gritty of exactly what it will take for you to turn your website into something that will perform and react at optimum levels, no matter what device your users access it on.
Creating A Strategy For Your Mobile Website Development
Responsive design is still important, of course, and I’m not for one second saying that you should shirk the discipline from here on. But, what I am saying is that just because you assign a single URL to each of your documents on your website, it doesn’t mean that that same URL should deliver the exact same document to whichever device that the user accesses it from.
So, what to do?
Firstly – Implementing Mobile Stylesheets
Bandwidth – even with 4G or Wi-Fi networks – is a serious issue for the mobile web. It puts strain on the mobile device to perform at its optimum efficiency when users are browsing. The significantly reduced screen size is of course also a big issue, as are cross-platform compatibility challenges. Indeed, there are a lot of problems to overcome for the developer trying to make a website as mobile-friendly as possible.
But there are solutions to these issues, and the first one is to implement a mobile stylesheet that will adjust the CSS for mobile devices.
The Server-Side Approach
One method to include mobile stylesheets is to use a server-side language – such as PHP, for instance – to detect the user agent string. This enables your site to detect mobile devices and serve the user with an appropriate stylesheet, or otherwise redirect the user to a mobile subdomain (mobile.twitter.com, for instance).
This approach is certainly advantageous, as it allows your website to serve specialised content to mobile users, and guarantees the highest level of compatibility. However, there are other methods that might be more practical for sites that are not ‘enterprise level’, of which the server-side approach is best designed for.
The Client-Side Approach
This is by far the easiest approach, as it is on the client side that the mobile device is detected. The main goal of mobile stylesheets is to alter the layout of the web page so that it best suits the mobile screen.
So, obviously, the first thing to consider is that mobile screens will require that your desktop site’s multi-column layouts are reduced to single columns. Being mostly vertical or ‘portrait’ in design, the mobile screen can rarely afford more than a single column of content.
So, now that you’ve implemented your mobile stylesheet, you need to configure exactly which styles that you want to change.
Single columns is the first thing to do, of course, but then you will also want to reduce any clutter on your pages by getting rid of any elements that are of less importance or just simply expendable. Finally, you want to reduce margins and any extra padding so that additional pixels can be saved. And this is the name of the game for optimizing mobile performance – the lighter you can make your site for mobile, the faster and more efficiently it will perform.
Reducing Bandwidth
Your mobile stylesheet also has the purpose of reducing bandwidth – especially for slower mobile networks. This, again, involves making your site lighter. So, remove or replace any large background images – and don’t underestimate the effectiveness of a plain white background, as this often results in a very crisp and clear-looking site, which is exactly what you want on the small display that mobiles impose. This rule is especially true if you’re using a background image for your whole site – just get rid of it for mobile.
Also, replace any images that you might be using for buttons or navigation as well. Plain text or CSS alternatives will work just fine on the mobile.
Secondly – Deliver Above The Fold Content In 1 Second Or Less
Although it will be very difficult indeed to make the whole of your mobile site load in under a second, you can still enable the perception that this has been achieved for your user by making your above the fold content load in this time.
But, even this is not straight forward, but it is nonetheless imperative to keep users engaged with your content and reducing the amount of abandonments.
In order to make this happen, your above the fold content needs to be received in a single round trip via the TCP (transmission control protocol). To achieve this, you will need to make your HTML and CSS above the fold fit into a single 14KB HTTP response. This will avoid the need of a second package to be delivered to the mobile before it starts to display your content. It’s difficult to achieve, but should ultimately be your goal in order to retain as many visitors as possible.
Finally – Concentrate On UX
At the end of the day, it is the experience of the user that you must focus your main efforts on. Of course, increasing speed and performance is all part of this, and you will be using your mobile stylesheets to ensure that your site is light and displaying correctly on mobile. But, you must also take the time to give your users those added extras that they will only be able to enjoy on mobile.
Clickable Phone Numbers
Smartphones are phones, right? It can be easy to forget this primary function when they are increasingly being used for so much more. But, they are still phones, so make sure that your phone number is clickable, so all your users have to do is click on it to call.
Flash?
As much as 50% of mobile browsing goes through iPhone – but iPhones do not play Flash (unless they are jailbroken). So, you will need to use an alternative, such as HTML5. However, some older browsers don’t support HTML5, and so you will still need to include Flash as a backup, and your user’s device will simply pick the one that it can render automatically.
The shift to mobile is not going to stop, and you must do your utmost to keep pace with it. Whilst the tips and suggestions in this article are by no means exhaustive, implementing them should put you ahead of the game and begin to make mobile support a meaningful reality for your website.
The post Creating A Strategy For Your Mobile Website Development appeared first on ItsMonkie Solutions.