What is a Mobile Friendly Site
Have you ever gone to a website on your phone, only for the text to be too small, the images not to load and you have to slide around to find any information? That is not a mobile friendly site. To help users avoid this frustration, Google have introduced a “Mobile Friendly” tag on mobile search results. If the googlebot detects that your site is mobile friendly, it will add that tag on your listing in Google. It will also help with your ranking, with Google promoting mobile friendly sites above non mobile friendly.
Google have said a site is eligible for a mobile friendly tag if it meets these criteria.
- Avoids software that is not common on mobile devices, like Flash
- Uses text that is readable without zooming
- Sizes content to the screen so users don’t have to scroll horizontally or zoom
- Places links far enough apart so that the correct one can be easily tapped
What makes a website mobile friendly?
When we talk about it whether a site is mobile friendly or not, we are talking about how it looks and how easy the site is to use on a mobile. A mobile is a smartphone and not a tablet, but any site that is mobile friendly will be ok for tablets too While any mobile device can access your website, it might not look good. Mobile screens are about a 1/5th the size of a desktop screen, and while some of the newer phones have a good screen with a higher resolution, its still a small size.
If you have a piece of text that fills the middle of your screen on a desktop on a website that is not mobile friendly, then it will be unreadable for a user on a mobile. The user would have to pan to the right on their screen and then pinch and zoom in to be able to read it. On a mobile friendly site, the text would be on the centre of their screen and at a size that is easy to read. Take this site for example, this is a mobile friendly site. It is as easy to read this post on your phone as it is on a desktop.
You don’t need to get out your phone to test it either, if you are using a desktop browser. Just change the size of the browser window and you will already see that the menu on the side has been hidden on the top, and the post is filling the window, the post will change to suit the size of the window. That is because this site is built using responsive design and makes it ideal for reading whichever device you use to read it.
How can you make your site mobile friendly?
For the propose of this part a website is made up of 3 pieces. While a website can be very complicated at times, it will always be made up of these 3 elements
- The HTML is content of your site, its your text and images.
- The CSS is how your site looks, its your colours and shapes.
- The Scripts are how your site works, its your animation and the behind the scenes work.
There are 3 ways to make a mobile friendly site.
- A separate mobile website. This is an older method, and costlier. It is essentially building a second website. Your website would be configured to detect if the user is using a mobile device and then sending them to different site. Your website would www.mygreatsite.com and your mobile site would be m.mygreatsite.com, it doubles the maintenance and is hard to keep both up to date without a dedicated person.
- Dynamic Serving. This is when the a different set of HTML and CSS is sent to a user on a mobile device but they still see the same website address. It is again a new site, that is hidden from users on the desktop, and then shown to mobile users while the desktop version is hidden. Like a separate mobile website, it doubles the maintenance and is hard to keep up to date.
- Responsive web design. This is our recommended choice, but more importantly it is Google’s recommended design. This serves the user the same website regardless of their device and uses CSS to make the site respond to the different screen sizes. This is all on the one website, so you know that your content will be up to date no matter the device its being viewed on. It is also quite easy to add in extra usability for phones, such as click to dial a phone number on the screen, or for the website to fire up an app on a certain link.
If you have an older site, making it mobile friendly might involve a complete redesign and a new mobile only site is a tempting option. The problem with this is that screen sizes are changing on mobile devices, Apple launched the iPhone 6 plus late last year with a screen size of 5.5″ and the iPhone 6 with a screen size of 4.7″. Sony have the Xepria Z3 Compact with a screen size of 4.6″ and its big brother version the Xepria Z3 with a screen size of 5.3″. Which screen size do you make you mobile site for? Under 5″ and it will look small on the bigger phones, design it for the over 5″ phones, and its not use to any phone under 5″. The only solution to this is if its responsive, so why not make your whole site responsive and give all users the same experience. Ensure that no matter how people visit your site, your message and how you want to present are the same.
Mobile friendly is fast becoming one of the most important aspects of a website. When you are designing or getting your website designed, make sure to think how the site will look on mobile devices, and not just the devices that you have in your pocket, but all of them and the ones that are coming out in the near future, no point having a site that you will have to update in 6 months with a brand new design.
If you have a website already, test it with Google here.
If your website fails the test, then you are losing customers, and you need to get it sorted. Above is only a light guideline, and we will be going into it more in the future, but if you need any help now, feel free to contact us and we can have a look and tell you the best course of action for your website.