How to Make Your Website More Mobile-Friendly

Smartphone, today, is everybody’s best buddy and 80% of internet activities are performed on the handheld devices, mostly mobile phones. Mobile internet usage is increasing rapidly and more and more users are connected to the World Wide Web through their mobile devices.  

For success with mobile users, better user experience is must for a website, which includes load-time and optimization. Almost 50% of the traffic never returns to the websites that have issues with these two aspects. Thus, to push the business ahead, it is totally worth-while to make mobile-friendly websites as more than 40% of overall traffic comes through mobile devices, nowadays.

 

Now, the questions arise " How to make mobile friendly website? Where from one should start? What makes a good mobile-friendly website?

 

Here are some basic points (the answers to the above questions) to be kept in mind while designing and developing a mobile-friendly environment for users.

 

Mobile Applications are not necessary

 

‘Mobile Apps’ is no more an unknown / unheard word to the majority of people. A general misconception among the businesses is that having a mobile app is a hardcore necessity to make the business available to the mobile users. Well, this is not true at all.

 

In reality, majority of businesses do not require mobile app to generate traffic through mobile devices. Although having a mobile app can enhance the lead generation process but Mobile Apps do not come cheap and are definitely not easy to make. They need a lot of time, money and planning before these could see the light of day and prove to be a valuable asset for the company.

 

Make website more Mobile-Friendly

 To make your website mobile-friendly, just do the following:

 

·   Load the website in desktop browser.

·  Resize the browser window to the narrowest width but keep the content readable (The minimum viewing size).

·  Add this metatag to web page’s head and set this width as the website’s preferred view port:

·  

Now the website will automatically switch the width to this size when opened in a mobile browser and users will not need to zoom in or out to view the information of website. 

A lot of wasted space can be seen on the right.

Just the right zoomed version of website.

This will give the flexibility to the images to automatically resize according to the screen size of mobile device. Add this code snippet into CSS stylesheet of the website.

1 2 3

img {   max-width: 100%   }

 

If some or all the images in the website are used as background images instead of under img tag, then set the CSS style of background to contain. This will force the background images to change size according to the small screen.

 

1 2 3 4

.header {   background: url(header.png) 50% no-repeat;   background-size: contain   }

 

Make sure that website is not having the property set to user-scalable=no in a meta tag. This will restrict users to zoom in and out.

 

Through small tweaks and changes mentioned in this article, the website can be made more mobile friendly  and give users a pleasant experience while viewing on small size screens.

Source Link: 

 

Reviews

[Kittyskittles]

This is an interesting read. I have been recently learning web design and thinking about layouts and what not. A lot of designers seem to forget about the size on a mobile phone so this is nice.

[Susomoy Sinha]

Thank you Kittyskittles......