MOBILE WEBSITE DESIGN
MOBILE FRIENDLY WEBSITE
The design of a mobile friendly website for a business that gets more than 75% of traffic from mobile devices can be easily done with the mobile friendly website design builder tool Mobirise.
This client read about Accelerated Mobile Pages (AMP) and requested to migrate from WordPress to a mobile friendly website using AMP but at the same time to not forget the desktop users.
A platform like WordPress was way too much for them. There was no need to update the website very often especially because they have been in the top of the search engines for some time now.
You might ask yourself the question why you would want to migrate from WordPress to AMP where a responsive mobile website would also give clear benefits but AMP is a lot faster and it is “easy” to get a site that is loaded within 2 seconds where it might be much more difficult with other technical solutions.
In this article I write my experience with the migration of New Sky Thai Massage in Southampton from WordPress to AMP. The site New Sky Thai Massage is running at the hosting provider Kualo.
WHAT DOES GOOGLE SAY ABOUT AMP?
On Friday the 4th of November 2016 Google announced mobile first indexing and in that announcement they stated that there is only 1 index for searches. In short if there is a desktop and a mobile version of your website than the mobile version will be first in the index.
PLAIN HTML – JOOMLA – WORDPRESS
The first New Sky Thai massage website was built in Joomla but it was migrated to WordPress.
It was responsive but it was not fast enough and I asked myself the question if a “heavy” Content Management System was needed where pages are static anyway.
WordPress was clearly overkill and it was decided to migrate to Accelerated Mobile Pages (AMP).
ANALYSING GOOGLE ANALYTICS DATA
When you read the news then you must be aware that more and more searches are done using the mobile phone and after analysing the Google Analytics data it was clearly the case for the massage shop that having a website for the mobile would be a big advantage over competitors.
In the image below you see the data that has been collected between 1 June 2014 and 31 July 2019 and clearly is to see the pike in 2015 and that since 2017 the number of visitors went up.
The SEO that was done was Technical SEO and Local SEO and I honestly cannot remember what happened in 2016 and early 2017 when the traffic was low but most likely it was running Joomla and I had not much time to do anything on the New Sky Thai massage website.
The decision to migrate to AMP was taken after analysing the data over two different period:
1 Jan 2019 – 30 Jun 2019 vs. 1 Jan 2018 – 30 Jun 2018 (first 6 months of 2018 vs first 6 months of 2019) and
1 Jan 2019 – 30 Jun 2019 vs. 1 Jul 2018 – 31 Dec 2018 (last 6 months of 2019 vs. first 6 months of 2019)
What I was looking for was the increase of the mobile traffic if any and after analysing it clearly did. Interesting enough is that both desktop and tablet traffic went down but mobile traffic increased.
From a logical point of view, it does not sound strange that more people search for a Thai massage using a mobile instead of a desktop/laptop or a tablet.
The first comparison was to between the first 6 months of 2018 and the first 6 months of 2019. It clearly shows that there are less visitors on the site however more mobile users which is interesting.
More users on the site but clearly desktop and tablet are losing out to mobile that gained around 4% from 58.43% in the first half of 2018 to 63.57% in the second half of 2018.
THE MIGRATION TO AMP
I migrated the Keenclick.com website from Joomla to AMP using Mobirise and was really impressed so I decided to use Mobirise for the New Sky Thai massage website as well.
There were not many requirements only that the site must be fast and the migration must be done on a tide budget.
Mobirise has many templates to be used and I could have chosen for a non-AMP template but argued that I wanted to have speed and AMP is then really good. I will come to speed and website optimisation later.
The standard AMP template that comes with the installation of Mobirise was used because it is free and there was no need to buy a template.
The images that you see on the website were still available in the original format which was great.
Some other questions popped up like bullet points and logo colouring but I wanted to change the colours of the logo to magenta because that pinkish colour is also available in the signage on the premises. I used GIMP to update the logo.
On the “old” site there was an orange Call to Action button but wanted to change that to Call to Action button in magenta but still for visitors to call directly from the phone by pushing this button without typing or remembering the telephone number.
There is a “blog” section which I called “Read Me” just to make a small difference but in the end the content did not change that much, only some typo’s like the capital after a full stop.
One small thing was that the new pages were ending on .html where the “old” site did not have .html so I had to make sure that I redirected the pages properly using redirect rules in the htaccess file.
It took me a few days including the optimisation of the images and the end result is amazing, in the next section about speed test I will go a little deeper on this.
A site built in AMP clearly shows that the developers had speed in mind and after building I used PageSpeed Insight from Google and GTMetrix to test the site.
PageSpeed Insight is a great tool that is available for free and gives two different speeds, one for the mobile and one for the desktop but when you look at these images then it clearly shows the performance.
On the desktop the site shows a 100 and you can’t get better than that.
The mobile shows “only” a 94 but also gives some hints and tips how to speed this up but mainly images that are still too big and fonts that are downloaded from a 3rd party site.
Initially I built the site for the mobile showing the hamburger icon that you need to click to open the menu and the X to close the menu again but I changed that to a “normal” menu for the desktop and the hamburger icon for the mobile.
There are still some issues that can be solved like the optimisation of the main image on the index.html page.
The resolution of the image is now less and although it might be quick to load it is not really beautiful showing on a desktop but also on the mobile.
Then I might consider to download fonts to save potentially 140ms.
For the moment I leave it as is because I cannot be happier than that Google themselves show 100 for the Desktop version and I am okay with the 94 for the mobile pages.
GT Metrix is just another great source of information when starting to test the performance of any website.
The image below is a screenshot that I took from GT Metrix and the loading of the site in 0.6 seconds clearly took me by surprise.
I did not expect that and probably can bring when I for example remove the main large image in the header on the main page.
Decreasing the size of images does increase the speed of the site dramatically.
Optimising images is absolutely one of the first things to look at and not just the image on the main page but all images should be optimised.
There are many online image compressors like https://compressjpeg.com/ that can be used for free.
As you can see, I might be able to squeeze more out of the image optimisation.
The main problem is then that the quality of the image will decrease.
I had this with a customer on their website nubwatches.uk where the client wanted to have high quality images but that automatically means big size images increasing the loading speed.
Another point to make is that New Sky is running on a shared environment and that means that there might be other websites on the same server slowing down the server.
In the image below you see that there are no errors or warnings. There are 33 info “warnings” but I expect these not to be harmful for the site.
SECURE SOCKET LAYER (SSL)
Securing the communication between the browser and the website is a ranking factor and luckily there is a free way to do so.
There was no reason to buy an expensive security certificate where https://letsencrypt.org/ would do the job.
This was already in place while the site was still in WordPress, I only need to make sure that the htaccess file was still okay after the migration.
I updated the htaccess file redirecting all
- non-www requests go to www
- http requests go to https (SSL)
- redirect all non html URLs to file ending on .html
- Header Cache for images and video set to 1 year.
In the Google Search Console, I did see some remarks about WordPress therefore updated the robot.txt to
It is possible with Mobirise to create a XML Sitemap but many years ago I purchased XML Sitemaps Generator and run a cron tab script for each website within my hosting area and the XML Sitemap file is automatically updated each time the scripts run.
In the case of New Sky Thai massage, I do not need to run the XML Sitemap cron job on a weekly basis because there are no changes therefore decided to run this once a month.
RICH SNIPPETS & SCHEMA.ORG
I also created rich snippets using info from https://www.schema.org and have added that to each page.
Over the years New Sky had some good ranking and especially since last year it went up which reflects in the number of visitors to the website as I showed in the Google Analytics images.
For the Search Engine Optimisation, I use SEO PowerSuite that includes a rank tracker to keep me up to date with the rankings for each keyword that I have added to the system.
Over the last 6 months New Sky gained 23% visibility in 3 different search engines from Google.
CONTENT & BACKLINKS
Over the coming months I will update the content and might even add another video so it reflects better the nature of the services.
There are already backlinks from mainly business directory sites as part of the Local Search Engine Optimisation and they work well, there is traffic from Yelp for instance however I will start searching for sites that are relevant to the massage business and therefore interesting to get a link from.
You reached this far to read this article and that means you are interested and looking for someone that might be able to help you in search engine optimisation or mobile website design.
As I have shown a website developed in Accelerated Mobile Pages is fast, really fast and that would definitely help in the rankings and I am definitely interested to help you with that.
For New Sky I have used the Mobirise platform which looks great but also will be able to create a fast responsive website in WordPress that includes APM for the mobile making your website both for the desktop as mobile extremely fast.