The increase in the view count of mobile websites by users has forced Google to launch a ranking algorithm on 21st April. If the site is not mobile-friendly, then it will be penalized by Google. They are continuously sending warnings to the mobile site owners and it is the high time for them to work on the optimization part of their website.
It is now important for both the small and the large businesses to start putting best mobile practices into action; otherwise they might have to pay later on.
The design of the mobile website is very important for the success, but the developers make a lot of common web design mistakes that can be avoided in order to make it successful among the users.
Here is the list of some common mistakes that most of the developers make while creating a mobile-friendly website.
1) Unplayable content
Unsupported format is always discouraged by Google. The images, videos and content can stop working on many occasions and this is really bad for the user and the mobile site as well. The most striking example is the flash item on the page. This creates frustration and gives a poor user experience. It is important for the developer to make sure that there is no unplayable content on the site. When the user sees an unplayable content on a page, he or she usually leaves the page and would not like to come back to the website again.
The developer can keep the following things in mind while creating a mobile-friendly website and avoiding the unplayable content.
- HTML5 standards can be used for animations
- Video should be playable on all major and minor devices.
- Video transcript should always be available.
2) Slow page loading
Slow page loading can badly affect the performance of the website, whether on desktop or on a mobile device. The developer has just a few seconds to grab the attention of the user and slow pages will make you lose your users. Loading time of the page is a major contributing factor in page abandonment.
The slow page performance affects the shopping behavior of the users as well. Here are some of the stats:
- 45% of the users want the websites to load in 2 to 3 seconds.
- 40% of the users abandon the website that takes more than 3 seconds to load.
- A one second delay can decrease the customer satisfaction by about 15%.
- 44% of users always tell their friends about their bad site experience.
Here are some tools that can help you improve the loading time of the pages.
- Page Speed Online is a web-based tool that can help you get an overview of high priority and low priority fixes. This can help you provide an insight into your website and helps improve the loading speed of the pages.
- The Google Analytics Plugin can help you understand how quickly or slowly the page loads across different browsers all over the world.
The developer can also compress the JavaScript or CSS files, instead of cramping up each and every page of the website with these files. The image size can also be optimized in order to improve the page loading speed.
3) Mobile only 404s
It is necessary for the developers to make sure that the users never end up with meaningless 404 error message. This makes the users think that the site is broken and they simply leave it.
A page running perfectly on the web returns a 404 on a mobile. It is a common problem and the developers need to make sure that there are no such redirects for the users. If the users are encountering such errors on the website, it can badly affect the SEO as well.
The developer should identify if a user is coming from a mobile device to visit a desktop page, so that the user can be redirected to a different URL, instead of giving 404 errors. The 404 pages can also be customized for the users in order to avoid bad user experience.
The developer can use
- Webmaster tools
- Set up the server to redirect the smartphone users to the proper URL
- Can use responsive page designs
- Check the crawl error reports shown in the Webmaster tools
- Make sure the user-agent detection is properly configured
4) Blocked content
It is very important for the developer to provide access of JS and CSS files to Googlebot. If there is no access, then it can result in bad indexing of the pages. The site’s robots.txt file disallows crawling and it usually occurs and poses a problem for indexing and page rankings.
It is better for the developer to provide unblocked JavaScript, CSS or image files. Fetch as Google is one of the greatest features that allows the developer to see how the Googlebot is seeing the content on your website page. This helps the developer to better understand the areas that need improvement. Indexing problems can be easily fixed by using this approach.
5) Device screen size
There is a wide variance in the screen size of the mobile devices. Rather than serving everyone, it is better to identify which screen sizes people usually use. The Google Analytics tool will allow you to identify this data easily.
It is necessary that the content should fit properly on the mobile screen without much scrolling. If the target device is iPhone 4/4s users, then the developers can consider the content layout to fit in a 3.5 inch screen.
Sizing the objects correspondingly with the screen width is important and the developers should always test the site on the top devices that are being used by 90% of the users.
6) Too much text on the page
The mobile websites that have to be seen on different screen sizes should not be loaded with too much text. This will make the overall look of the page to be bombarded with a lot of words, making the user frustrated about the content readability.
Proper formatted text should be added to the page by using bullets, wherever, required. The content can be shortened to look good on a small screen device.
The use of languages like HTML allows the developer to use different tags like <br>, <p> to format the content of the page.
The mobile pages should always look clean and this can only be possible when the content is neatly placed and formatted on the screen.
7) Antisocial website
We are living in a socially interactive world and it is important for the developers to make the sharing of the content as easy as possible. The users should always be able to copy the link and paste it to their social media profiles.
The developer should implement social sharing buttons like Facebook, Twitter, Google Plus, etc. Floating widgets for tweeting, emailing, texting and liking the content on the website should always be added as they provide a great user experience.
Ending Note
By avoiding all the above mentioned mistakes, the developers can create an efficient mobile website for the users that will perfectly work on any device.
Now is the time for the developers to think about the optimization of the mobile pages in order to avoid penalties from Google.
Keval Padia is a Founder & CEO of Nimblechapps, a fast-growing website design and iPhone app development company. The current innovation and updates of the field lures him to express his views and thoughts on certain topics.
WELL IF GOOGLE SAYS SO THEN I GUESS I HAVE TO DO IT! Give me a break, this article is complete crap.
Interesting to know some common mistakes that most of the developers make while creating a mobile-friendly website.
Interesting. Some of these points are very good, but no one does them ( video transcripts ), some was outdated even when this article was written ( flash stopped being developed in 2012 ) , and some is plain bad ( social media buttons ). If you do not have an absolute NEED to put a social media buttons on a page, avoid them. Those buttons will send a trace, not only of your page, but also of previously visited pages, from your visitors to Facebook, Google, e.a. Which, if not outright illegal in your country, is at least ethically questionable. Additionally, those buttons take their time to load, and on lighter pages will take far more time than the page itself.