<< BACK                                                                                                                              NEXT >>

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

 

Tips To Make A Mobile Friendly Website - Featured Image

 

Tip #1: Make Your Mobile Visitors Happy

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. 

 

Tip #2: Use Responsive Design

There are 3 methods in which you can develop a mobile-friendly website.

  1. Dynamic Serving Method
    1. Same URL for desktop and mobile
    2. Website content may or may not differ
  2. Separate Mobile Website
    1. Separate URL for desktop and mobile
    2. Website content will differ
  3. Responsive Design
    1. Same URL for desktop and mobile
    2. 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.

Tip #3: Make Your Button Sizes Large Enough to Work on Mobile

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.

keep button size big

 

Tip #4: Avoid Flash In Your Mobile Design

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.

 

Tip #5: Include The Viewport Meta Tag

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″>

 

Tip #6: Use Large Font Sizes

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.

 

Tip #7: Compress Your Images and CSS

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.

 

Tip #8: Allow an Easy Way to Switch to Desktop View

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.

view desktop version of the site

 

Tip #9: Have Distanced Link Placements

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.

 

Tip # 10: Keep Code Simple

Few disciplined website development practices like, avoiding flash, externalizing CSS and JavaScript, compressing images and CSS files, getting right into the content as soon as possible for the users to grab, reorganizing internal link structure to make visitors navigation as smooth as possible etc. can help rank your mobile rankings in search engine result pages.

 

Tip #11: Keep Forms Short

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.

 

Tip #12: Keep HTTP Requests to a Minimum

Most of the page load time is spent in downloading all the components in the page which includes images, CSS files, JavaScripts or equivalent, Flash related files, etc. Fetching such components as part of loading the site reduces the page load speed. This is because, for each action mentioned above, an HTTP request is required to render the page.

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”.

 

Congratulations

 

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.

 

<< BACK                                                                                                                              NEXT >>

 

Interested In Full Time Digital Marketing Course?

Feel free to check out the modules covered in DIGITAL MARKETING TRAINING

Interested 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.

No Comment

You can post first response comment.

Leave A Comment

Please enter your name. Please enter an valid email address. Please enter a message.