The First Step to Making your Website Mobile Friendly

0
Many online internet news sources tell us that the number of people who access the internet using a smartphone now exceeds those who use a desktop PC, and that this trend is likely to continue. This presents a problem for people who developed their websites using HTML/CSS before everyone started using smartphones. The problem is that a web page which looks OK on a desktop is likely to be unreadable on a smartphone. This is because a smartphone tries to display an entire line of desktop PC text in screen space which is far too small to hold it. The size of the text is so reduced that, without zooming in, the text is impossible to read, and a user will usually just abandon the page.

For a single web page there is an easy way to fix this: You need only edit the HTML of the web page so as to insert a viewport meta tag in the header section (which is what occurs between <head> and </head> in the HTML code). Your basic viewport meta tag looks like this:

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

screenshot

There are possible variations for what’s in the content, but this meta tag is really all you need. Just insert it (if you are comfortable using an HTML editor) and your web page will immediately become readable.

However, a further problem emerges if your site has many pages (say, 30 or more), then it is onerous to insert the viewport meta tag by hand in all those pages. This problem is solved by using a program to help you insert the meta tags, going through your website page by page, or even inserting the meta tags in all HTML pages on your website automatically.

Such a tool is the Viewport and Keywords Meta Tag Generator program. This program also inserts not just viewport meta tags but also keywords meta tags. Such a tag holds a list of words which are intended to describe the content of the page, and so help search engines, though not all search engines make use of this meta tag. If you’re not interested in using keywords meta tags then you can use that program to insert only viewport meta tags.

To find out if your web page is readable on a smartphone you can use Google’s Mobile-Friendly Test. If it’s not, then insert the viewport meta tag in your HTML code and (after saving your page and uploading it to your website), re-do the test. You may be pleasantly surprised. Of course, one page is easily done; for many pages the program mentioned above will prove indispensable.

A caveat is that the insertion of the viewport meta tag does not always make a web page 100% mobile friendly. Images may not always appear as intended, and text or data in HTML tables may be truncated. In this case, either you need to tinker with the page (e.g., by relocating images or adjusting margins), or find someone who can fix this, or you need to learn how to do it yourself. That may not be easy, but a good place to start is Tania Rascia’s responsive design page. In the meantime the first thing that it is necessary to do is to get the viewport meta tag into your pages.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This