JBK Infotech Logo

Web Blog

Tips to design a mobile friendly website

November 19, 2015

Mobile friendly website

One can see a tremendous increase in the purchase of smart phones these days. India has out-numbered most of the countries in terms of the sales of mobile phones. Think about a day without your cell phone and you would lose your mental balance. We are social animals and cannot afford to stay aloof from the rest of the world. Communication is a strong tool for our existence. Gone are the days when phones were merely used for voice talks. With an advancement in technologies, smart phones have also upgraded their features, making it a multi-purpose phone. It has become an internet accessing device in the present era. This requires the website owners to design mobile friendly websites that can easily be accessed by the users. Here are few tips to customize a mobile friendly website:

Use Responsive design:

There are many online sites that offers responsive design at a reasonable price. This will not only reduce the burden of developers but will also add value to the site, right from the initial stage. It will ensure that the web layout and images automatically gets adjusted as per the screen size of the device used.

Add view-port Meta Tag:

The view-port Meta Tag instructs the browser to adjust the site as per the layout of the device. It is a vital code that is mainly required to build a multi-device site. You can use the configuration as per your requirement

Font sizes and button sizes:

The website should be able to give the user a wonderful experience rather than making it a regretful experience. The font size should be such that the user is not forced to zoom every word that he is about to read. Keep the font size at least of 14 pixels, so that the alphabets are legible enough to be read.  The font size can be reduced to 12 pixels  for labels and forms. The button sizes should be large enough to be understood by the users. A standard recommendation is of 44 pixels.

High resolution images:

A blurry image is never the choice of a professional, nor it can be taken as an excuse. Remember, the smart-phones are configured with high definition screens which demands an image of a higher resolution. The resolution should be of double size to that of a resolution used for desktops.

Remove default zoom:

Wondering why? Auto-zoom cannot be relied upon everytime. It might de-structure the layout and images. You can set up custom variables for your content and this is possible with the help of view-port Meta Tag. Add this tag in the head section of your HTML code.

Use YouTube Videos on your site:

If your site has lots of videos for the users, you have to make them responsive too. The desktop version and mobile version of videos are completely different, hence care has to be taken off. YouTube videos are responsive by default and must be used while creating  mobile-friendly sites. It will save you from following lengthy processes.

Test Your site:

Do I need to stress upon it?  Testing is mandatory for every site, irrespective of it’s nature. Do not be relaxed by testing it on a single platform. Try it on android, iPhone, windows and other platforms to make it a multi-device website.

Hope this article has been useful to you. Do follow these simple steps to design a mobile-friendly website. Good Luck!