12 Tips To Make A Mobile Friendly Website
In the previous chapter – 6 Tips To Optimize Videos For SEO, we learned how can we improve our search rankings by properly optimizing videos on our web page content. In this chapter – Tips To Make A Mobile Friendly Website – you will learn all the tips to make your website mobile friendly.
Also, in the chapter – 25 Important Factors To Be Considered As Part Of Your SEO Efforts, we learned many important factors that search engines consider to rank a website on top of the search engine result pages. Among them, having a mobile-friendly website is one of the factors. Approximately, 75% of all the internet traffic comes from mobile devices. Google has confirmed that mobile friendliness is one of the major factors that it considers to rank websites.
12 Tips To Make A Mobile Friendly Website
Whichever mobile design and strategies you plan to adopt, your primary motive should be to give a fantastic user experience to your website visitors. Go ahead with an extra step in all possible ways to make sure your website visitors are happily accomplishing the task for which they visited your website.
There are 3 methods in which you can develop a mobile-friendly website.
- Dynamic Serving Method
- Same URL for desktop and mobile
- Website content may or may not differ
- Separate Mobile Website
- Separate URL for desktop and mobile
- Website content will differ
- Responsive Design
- Same URL for desktop and mobile
- Same content on both desktop and mobile versions
Among the three methods, responsive design is considered as the best way to make your website – mobile friendly.
It not only allows website developers to create a site that will be easily viewable on different sizes of devices but also enables visitors to view the same content both on the desktop as well as mobile.
For developing a responsive website, you can either choose a well-developed website theme which fits for both desktop and mobile or use standard plugins that achieve mobile responsiveness.
By following a responsive design, the amount of re-work involved in designing and developing a new mobile site can be avoided.
Visitors get frustrated when they are forced to click on a tiny button that requires them to zoom the screen. Also, the frustration increases, when you have two adjacent buttons without a decent spacing. The reason being, clicking on one might accidentally push the second button. This leaves behind bad user experience.
Therefore, as far as buttons are concerned, the bigger the button with clear labeling, the better. It reduces the chances that the user will miss it or click the wrong button by mistake.
An example of a user-friendly registration form on a mobile view is shown below.
Having flash can slow down the web page’s load time. This is a negative ranking signal as far as the search engines are concerned. Also, such flashy websites that work uniformly on all browsers mobile devices.
Both Android and iOS devices have stopped their support for flash. Therefore it is strongly advisable to design and develop websites that do not depend on flash technology.
The “viewport” meta tag in your HTML controls the look of your website on mobile devices. The “viewport” meta tag instructs the browser to appropriately fit the webpage onto the screen of the device on which it is being rendered. Be it a mobile device or a tablet PC or any other device. Without the “viewport” meta tag, the responsive design will not work. The code for adding “viewport” meta tag is given below. Add it to the head section of your HTML page.
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
There is nothing more irritating about visiting a website on mobile phones than zooming each and every page to read its content. For a good responsive mobile design, make sure your font is readable without extra efforts like pinching and zooming the webpages on the device screen.
Use large fonts to make them easily visible and readable. The only place where the fonts can be slightly smaller is on forms and labels. Google recommends 12 pixels as the minimum font size.
Images with large sizes can slow up the website load time giving way for the users to skip your website and move elsewhere.
One of the ways to improve the website load time is to compress the size of the images that take unnecessary space. Also optimizing your CSS file will drastically improve page load time resulting in pleasant user experience.
There are times when the visitor would love to view the desktop version of your site rather than the mobile version. This is especially if you are having a separate mobile version of the site.
In such cases, give provision in the mobile version of your site to view the desktop version using links like “VIEW DESKTOP SITE” or whichever way, the visitors find interesting. In the end, our goal is to make the visitor happy.
The below example shows a bank offering to view the desktop version of their site on a mobile phone for better user experience.
Make sure enough spacing is given between multiple hyperlinks or anchor text when placed adjacently. This is to make sure the visitor is able to click on the right link to get his/her purpose served.
The forms on the mobile version of the website cannot be designed like the ones for a desktop. For desktop, you have the provision to use a mouse to click over and submit the form with relevant information. Whereas, it is frustrating and irritating for the user to type big forms using their fingers on the mobile screens.
To ensure a great mobile experience for your website visitors, keep landing page forms simple and short. Request for information that really matters to your business and cut out the remaining crap.
See the example picture in Tip #3.
Therefore, reducing the number of components on the webpage, in turn, reduces the number of HTTP requests required to render the webpage. This results in faster response times.
For a detailed understanding of how to achieve this, please do check this article: Minimize HTTP Requests – Yahoo
To check the mobile page load speed – check this tool – Page Speed Insights Tool
Congratulations! You are done with the thirteenth chapter on “12 Tips To Make A Mobile Friendly Website”.
Hope you enjoyed the reading. All the best for your next chapter on “Fundamental Understanding Of Robots.Txt”. In the next chapter, you will learn how to write and use the Robots.txt file on your website and their role in SEO.
Feel free to comment below if this blog post was useful or not. If yes, please do me a favor by sharing it with others who might benefit.
Interested In Full Time Digital Marketing Course?
Feel free to check out the modules covered in DIGITAL MARKETING TRAININGInterested In SEO Course?
Feel free to check out the modules covered in SEO TRAINING
Subhash.K.U is a Professional Programmer turned Digital Marketing Enthusiast. He is the most sought marketing consultants for small and medium scale businesses. He founded Subhash Digital Academy to teach professional digital marketing skills to students, entrepreneurs, and working professionals. He holds a Bachelor’s degree in Electrical Engineering and is an Oracle Certified Programmer. He also holds certificates of Google AdWords, Facebook Blueprint and Hubspot Marketing. He is the co-author of the best selling book – Cracking The C, C++ and Java Interview published by McGraw Hill. He is now penning another book on the subject of marketing and entrepreneurship.