The ever-evolving world of mobile technology means that the internet can be accessed at any given time or place, and as smartphones are being used with a strong intent to search, interact, or shop, it becomes all the more important for your website to deliver a great user experience on all mobile devices.
This post will discuss what to consider when converting your site to mobile, from choosing the appropriate design and build technique, to avoiding common SEO pitfalls.
Why Should You Have a Mobile-Friendly Site?
Smartinsights claim that since 2014, mobile has now replaced the desktop as a person’s primary compute device, whilst a post by Webbiquity states that half of B2B vendors are now using mobile devices to sell products.
Further reports by Lander claim that by 2017, mobile devices will make up to 87% of the total sales of Internet-enabled technology.
The Power of Google Ranking
A poorly functioning mobile site will not only have a direct impact upon how users behave on your site and therefore influence conversion rates; another huge implication of not adapting your site to mobile is that Google have now started to rank websites depending on their mobile compatibility.
Read more of this on Google Webmaster’s Central Blog.
See below how Google have recently created labels for whether your site is ‘mobile friendly’; the easier it is to use on mobile devices, the higher you will rank in search.
The concept behind Google has always been that it will aim to provide you with the most relevant, informative content, and mobile-friendly sites play a huge role in creating a seamless and consistent user-experience.
So if a strong lead visits your website via mobile and experiences viewing or technical difficulties along the way, then you are instantly sacrificing these potential leads to your competitors, whose website is mobile-friendly.
So we’ve covered why you should have a mobile-friendly site, but there are several things to consider when it comes to adapting a site that performs highly and satisfies your tech-savvy audience.
Which Design Method should you choose?
-Dedicated Mobile Web Design
Dedicated mobile website design is when a separate instance of your site is created specifically for use on mobile phones. Separate URLs are required for both mobile and desktop. For example you might have www.domain.com and m.domain.com for your mobile version.
To implement this method, you will need to create a separate set of pages for your mobile site. Users visiting the desktop site from a mobile are automatically redirected to the corresponding page on the mobile version. Similarly anyone trying to access the mobile version from a desktop will be redirected the other way.
There are a number of technical complexities to this method, including having to add annotations to both sites in order to comply with Google’s annotation requirements and adding canonical tags into your mobile pages to indicate what the corresponding pages from your desktop site are.
In addition to this, redirecting users from one site to another automatically becomes a painful and confusing maize over time.
Overall this method is not recommended because:
- You have two website instances to administer
- The promotion of your site becomes fragmented – do you point users to m. or your desktop version?
- Reporting becomes more complex as users are passed from one domain to another
- Redirecting users from mobile to desktop and vice versa is complex and difficult to track. Further more, redirecting is slow and makes users wait longer than necessary.
-Adaptive Website Design
This option uses predefined screen sizes or scripts to identify the device, and adapt what page content is displayed.
Adaptive web design will enable you to include content that you deem is more relevant to mobile users by selecting content based on device using media queries. This method means you only ever have one set of content to administer and typically choose to show all or part of that content.
See from the below example how Vinci construction have used an Adaptive Website Design for mobile; users can access the four main areas most relevant for their search purposes. They also have the additional option of viewing the desktop version of the site.
Vinci Construction – Desktop Version
Vinci Construction – Mobile Version
The downside of this method is that you are limiting the user to only some of your content.
In essence, even if you are making informed decisions and displaying the most frequently accessed or most popular content, you are still restricting your users to particular sections of your site.
This might make the user frustrated that they cannot find what they came for, especially if they are used to viewing the full site on a desktop.
Adaptive works very well on pages with clear, single calls to action. For example campaign landing pages or ecommerce product and cart pages.
– Responsive Website Design
This option enables you to use the same content across both sites by fluidly changing and responding to the fit of any screen; it will wrap elements to fit the device size in order to maximise usability. Again the display layout is based on media queries that recognise the size of the screen that the website is being served to.
Celotex’ responsive website design below shows how the whole website is accessible via mobile in an easily digestible manner.
Celotex – Desktop Version
Celotex – Mobile Version
Like adaptive methods, you only have to administer one set of content and one domain. However, for extremely rich content sites, responsive sites can be overwhelming for both the device and user when being served on a mobile. There is a danger of trying to serve too much information, both from a load speed and readability perspective.
An ideal scenerio would be to combine a responsive design with some adaptive elements for key conversion pages. You should remove un-necessary elements on these pages to keep the user focused on the task you want them to conduct.
You should also try to be clever about the order of the elements on your site when on a mobile.
The standard functionality of a 2 column responsive site is to display header, then left column, the right column, then footer, for example. Assess what information a user might want to see first and what is of most importance, then order your div elements accordingly.
And whatever method you choose, remember to always keep content and conversion front of mind.
As well as planning the content stages for your website, think of what you want each mobile user to do on the pages they visit.
Where do you want them to go? Does the layout need changing to prioritise the most appropriate content? Does your mobile version need the same amount of content as your desktop version?
Always ensure that mobile users are guided through the journey by providing clear instructions at each stage.
Ask your website provider to show you how the site might look on mobile devices. Wireframes for key mobile pages should be mocked-up up front. It is often beneficial to start with mobile wireframes as this forces to you think about what you want users to do on each page of your site.
Other Things to Help Optimise Your Mobile Site…
1) Use Cookies to Reduce Login Frustrations
As mobile is used by a single individual, they will not require, and definitely will not appreciate, having to login each time they visit. Using cookies and saving password details in the phone will make the process a lot easier for your users.
2) Make your Mobile Site Actionable
As previously mentioned, users will have strong intent when using mobile. Typically for product manufacturers this will be because users need something now. Contact information, downloadable files such as cad drawings or datasheets, a specification, a tool calculation, colour matching information, etc.
Ensure these pages work from a user experience perspective first and foremost.
3) Avoid Faulty Redirects and 404s
If you have separate domains for your mobile and website, you must ensure that you redirect mobile users from each desktop URL to the appropriate mobile URL; a common mistake here is that the user is automatically redirected to the homepage, or even worse to a 404 error page. Ensure that your server is setup so that it automatically redirects users back to the equivalent URL on the smartphone. If you don’t have a smartphone equivalent however, showing the user the desktop version is much better than experiencing a 404.
Again, having a responsive website design will help to avoid the above issues, as these only occur as a result of having two separate instances of your site.
4) Increase Mobile Loading Speed
This is even more important now that Google have announced that site speed ranking factors will be coming to mobile pages, possibly meaning that mobile will have its own dedicated speed rating. Ensure that you compress everything on your site, as this will significantly decrease loading times. This includes images, code, javascript files, etc. Adobe Flash can also seriously slow down your site and is often incompatible with mobile devices, whilst too many videos or external material will also decrease website speed.
5) Use Google Analytics and Webmaster Tools
Use Google Analytics to help identify how users are interacting with your site on a mobile and discover where the pain points are. Webmaster tools has a section called ‘mobile usability’ which helps identify potential user experience issues on mobile devices.
Conclusion
By following Google’s recommendations you’ll instantly improve search results for your website and increase leads and conversions via mobile.
Choose a mobile design method that is most suitable for your type of website.
Wireframe the mobile version.
Avoid the common seo pitfalls.
Ensure all aspects are optimised for load speed.
To ensure your site is fully optimised and ready for mobile, or for advice on creating a mobile friendly site that ranks highly in search, give us a call on +44 (0) 1908 671707 .
