It is safe to say that any website which does not have a separate format for mobile devices, as opposed to desktop devices, is fighting a losing battle in the modern era. This may take the shape of two different websites for a desktop device and mobile devices or a responsive design. Either way, if you ignore mobile optimisation then you could be missing out on more than 50% of Internet traffic. Yes you read that right. Over the last 12 months mobile devices Internet use spiked. It racked more than 50% of Internet traffic according to Statista.com. This shows that websites which are not mobile friendly may be losing out big time!
Table of Contents
What is a responsive website?
Thanks to developments in design coding it is now possible to create responsive sites for desktops and mobile devices. These responsive designs are able to recognise the type of device being used and adjust the design accordingly. This will take into account the size of screen with text, menus and images adjusted accordingly. One common feature you will no doubt have noticed on mobile devices is the so-called “hamburger menu”. This is traditionally in the top left-hand corner. It is a compact menu that typically appears as three lines. However it will expand into the same menus as those which appear more openly on desktop website designs.
As mentioned above, mobile devices now account for over 50% of Internet traffic. Of course this figure continues to grow. When we talk about mobile devices we are talking about smart phones, iPads, tablets and similar devices. Basically, those that you can walk round with and remain connected to the Internet.
Today it is difficult to comprehend an e-commerce industry without mobile devices and responsive websites. If you have an online business then you definitely need a responsive site, no questions asked. In fact without it your website will not display correctly on mobile devices. To make matters worse you will also be penalised by Google if you fail to do so. They actually now perform mobile-indexing as a search engine ranking criterion and it’s no surprise.
Use these 9 key elements to create a mobile-friendly website
There are a number of common features across some of the better mobile websites/responsive designs. Individually they have an impact on the user experience but cumulatively they can be a game changer for your business.
1. Load times
This is where a responsive design or totally separate mobile website can make a major difference. Using the Internet on the move is no different to using a desktop with regards to customer demands and impatience.
If your website does not display on a mobile device almost instantly then you will lose the customer.
Start by stripping back on some of the more complicated and slow loading code. Then, try to keep the mobile version simple, informative and clear for e-commerce transactions.
2. Images
When using a desktop you will no doubt have noticed that some websites take a while to load. On of the main reasons for this is the large number of images present and their size.
While it is important to scale down images on a desktop website version it is even more important to do so with a mobile website.
This may mean removing some of the larger images or downscaling them. What is certain is that you will have to find a balance between image sizes and load times.
3. Simple navigation menus
As we touched on above, while menu options tend to be more visible with a desktop design website they are normally hidden away under the “hamburger menu” design for a mobile device. This ensures the menu options are highly visible and with a simple tap or click you will see more detail. Nowadays the “hamburger menu” design is something which many people will look for as soon as they land on a mobile website. Do not over complicate the issue; maintain simple navigation menus and reap the rewards.
4. Keep it simple
Whether looking at company information pages or contact pages, it is imperative that things are kept as simple as possible. Yes, viewers will require a certain level of information but the more information that needs to be loaded the greater the impact on the load time.
When you consider not as much text will be visible, compared to a desktop version, you need to catch the attention of mobile device users instantly.
Show them what you offer, as well as the different sections and how they can buy online.
5. Important information first
In tandem with the “keep it simple” strategy, ensure that the most important information is higher up the screen and instantly visible. If a mobile device user was to land on your website, even if it was responsive or formatted for mobile use, but it was unclear what you had to offer, they would not hang around. So, get the most important information to the top, get it out there and retain the attention of your visitors.
6. Big text and big buttons
It may seem a little corny to suggest that you need big text and big buttons for a mobile device web design but it’s true.
Small text and small buttons are a no-no.
You also need to ensure that not only is there space between each line of text but also between images. Moving on to selection buttons, they need to be large enough to select using a touchscreen and have enough space between other elements of the website so you don’t accidentally click on the wrong option. If you have too many buttons together it can be difficult, if not impossible on some websites, to select the right one.
7. Mobile stats
You have built a responsive design, or a whole new mobile website, and everything seems to be going very well. What next? It is imperative that you maintain vigilance on your mobile website statistics which will be part of the Google Analytics suite. You can check which pages are more popular, where the purchases are coming from, how long people are staying on your mobile website and a whole host of other statistics. Google Analytic data will not only show you which webpages are doing well but also those that need improvement. Yes, it is right to focus on the ones which are performing well but there may be the opportunity to bring underperforming webpages back into play with just a few simple tweaks.
8. Reliable web hosting
We’ve looked at images, text, load times and a whole array of different issues you need to be aware of when creating a mobile website. Many people unfortunately overlook an even simpler subject, reliable web hosting. There is no point having the best mobile design in the world but due to web hosting issues it is down a lot of the time.
Many web hosting companies will also offer website building services and advice on improving load times. The role of a web hosting company today is very different to years gone by; it is not simply a case of hosting your website, they have additional services and great experience to offer – you should listen to them. At the end of the day, the more successful you are the better for your hosting company.
9. Flash is a thing of the past
Those who have been using the Internet for some time will be well aware of the issues with the Flash plug-in which historically allowed users to play video, audio and run a variety of other applications. While extremely useful at the time, looking back the Flash plug-in often had a major impact upon site load times and user retention. This has now been replaced by an array of different options one of which is HTML 5. This is something to discuss with your designers, the best way to accommodate video, audio and other similar applications.
4 Points to avoid doing with a mobile website
The key to online success is a mobile friendly website and with recent developments this is nowhere near as expensive as you might think. As well as the above issues to incorporate into your mobile website there are a number of additional issues to avoid.
1. Forgetting to check mobile compatibility
Many people make the mistake of checking their mobile website/responsive design on either an android or iOS tablet/phone but not both. They may have a Samsung smart phone and everything looks perfect when they log on. However, what about the array of other smart phones, tablets and devices? You need to check across a range of different mobile devices to ensure that your mobile website is correctly formatted on all of them.
2. Bloated content is dangerous
It can be tricky finding a balance between a compact design and also leaving sufficient space between lines and images so everything is as clear as possible. This is where testing, testing and testing again comes into play. It may take some time to perfect your design but it is important to spend the time seeing what works and what doesn’t.
3. Too much detail is a killer
Those who use mobile devices to peruse articles or buy products will want to know the nature of the website and the information available in an instant. Keywords and key phrases will alert them to what you have to offer but too much detail can be a killer. Keep it short, concise but extremely informative and try to put yourself in the shoes of a mobile device user.
4. No pop-ups
Pop-ups have been a no-go for some time now, they irritate visitors, they can cause problems with browsers and they can often look spammy. There will be occasions where pop-ups may be expected, highlighting a competition or a new service, but in general pop-ups can do more harm than good for your reputation.
Google best practice
Over the last few years we have seen a subtle change in the way in which Google appreciates mobile websites as well as the desktop versions. As mobile device Internet traffic continued to rise, so the search engines began to put a greater emphasis on website compatibility with mobile devices.
Mobile compatibility
If you search for a website today on Google you will see those which are not compatible with mobile devices tagged with a warning to users. This is not to say the website is substandard or dangerous when used on a desktop but Google is aware the website as it stands is not mobile compatible. Put yourself in the shoes of a user, any type of warning, no matter how subtle, can make you think again and move on.
Create similar website design for the desktop and mobile version
While there are some subtle changes you can make to the mobile version of your website, in general the content should be similar to the desktop version in order to maximise your rankings. There may be differences to images, dynamic code may not be available on the mobile website and some content may be removed to maintain a greater focus. However, broadly speaking the two websites should give the same message and have similar content.
Google will normally rank mobile websites above desktops
We know that Google is currently going through a major change with regards to desktop website designs and their mobile counterparts. As we touched on above, there are now specific warnings where a website is not mobile compatible. There is also a general consensus that with two similar websites the mobile design would likely rank higher. The higher up the Google rankings your mobile website can achieve the more opportunity to bring in traffic.
Conclusion
From simple navigation menus to responsive designs, mobile friendly websites are here to stay. There are two distinct approaches, the responsive design approach which ensures that the design changes depending on the device being used. Secondly, it is possible to create a standalone mobile website (similar to the desktop version) which will be activated when a mobile device is recognised. Then again, it is imperative that you do not forget the simple things in life, a reliable web hosting package.
Those who see mobile compatibility as something to look at “in the future” are already missing out on business and attracting the wrath of the search engines.
