In Nigeria, did you know that there are 8 times more people who use mobile devices (smartphones and tablets) to surf the internet than those who use desktop? (see fig.1)
In fact, Nigeria is described as a mobile-first, mobile-only country. The story is almost the same with other emerging economies of the world and even a few developed ones.
As a matter of fact, in the latest Google mobile-friendly algorithm update released in April 2015, called Mobilegeddon, websites are now penalized for not being mobile-friendly. That is to say; goodbye to the era of pinch and zoom, left-right scrolling websites on google search engine result page (SERP).
These days, it has become necessary if not obligatory to ensure that every single website is responsive (meaning that it has to fit perfectly into every device you use – whether desktop, tablet or mobile).
Now if you are a website owner, how do you know what your website looks like when people visit it using a Smartphone or tablet?
Of course the obvious answer is – visit the site on a mobile device, right? But what of a situation where all you have is a desktop computer? Can you still be able to check what the website looks like on a phone?
YES of course, you can!
How to View Mobile Version of Your website
In this brief tutorial, I’m going to show you how to view the mobile version of any website on desktop by just pressing a few buttons.
In order to achieve this, there are two ways;
- Chrome Browser Approach
- MobileTest.me Approach
Chrome Browser Approach:
Using this approach, you will be able to view what your site looks like in 30+ different types of Smartphones and tablets. And you will see it EXACTLY the way it appears in real life.
To do this,
First step: Visit the site you want to view directly e.g. http://webtutorial.com.ng (use CHROME BROWSER ONLY)
Second Step: Press Ctrl + Shift + I (or right-click on the page and then select INSPECT)
At this point, the page will be split into two halves (left and right).
Then if it is not showing you the mobile responsive version, go to third step.
Third Step: Press Ctrl + Shift + M (OR Click on the small mobile icon at the top of the right column)
Fourth Step: Check the top of the screen, select a drop down list and then select (from 30+ device options) the type of mobile device you wish to view.
Additionally, you can click on the rotation icon at the top of the page to rotate the screen to view either portrait or landscape version of the site.
Pretty easy, right?
This approach is fairly simple too. However, the only drawback is that it features less number of mobile devices to test your site with.
First, Visit http://mobiletest.me.
Then, Click on any of the Smartphones and tablets.
Lastly, Type in the domain name of the site you want to visit in the address bar and click GO. That’s all!
Also, if you want to rotate the screen and view a landscape version, click OPTIONS at the top left corner of the page. If you want to view the site in a different device, click DEVICES.
So you see how easy it is to view what your site looks like on a mobile device or tablet using a desktop. This saves you the stress of having to take the unnecessarily expensive option of buying/borrowing these devices and viewing it physically.
Finally, If you know any other means you can use to view mobile version of a website on a desktop, drop it in the comment box below.