Is my website mobile friendly

smartphone-tablet.png

Why do we need to know this

Because a large proportion of the visitors to your site will be using a mobile phone or tablet. A site made for desktop does not look good or function properly on a mobile or tablet. A lot of websites out there at the moment are not mobile friendly which means their users are not getting the best experience and will be more inclined to leave. Google are now also penalizing non-mobile friendly sites in their search results, meaning your target audience will not even find your site while searching on a mobile or tablet. This results in a lot of missed sales as according to Mary Meeker of Internet Trends 2016 50% of web browsing is done on mobile or tablet.

How do I know if my website is mobile friendly

You could just minimize the window of your browser and resize it slowly to see how it behaves at different screen sizes, maybe adding the extension Viewport Dimensions to chrome to see what pixel widths your website is looking good at. See the table below for the standard sizes of mobile, tablet and desktop.

Viewport Width Devices Description
<= 320px iPhone, Samsung, LG,HTC 320 X 440 This is your mobile first default style if making a mobile first responsive website. At this size, space is precious and you should make sure that you have no more than 3 items in the navigation menu.
> 320px iPhone, Samsung, LG,HTC 320 X 440,Motorola – 320 x 480,Motorola, Nokia Lumia
– 480 x 800
This view port size is most used with phones in the landscape position. Make sure that the main content is above the fold as they say in the news paper industry. It refers to having important articles in the section above the fold in a news paper so that people glancing at it when its folded in two will see the important news.
> 480px HTC 540x960 and Samsung/Motorola 720x1280 At greater than 480 we can start adding more navigation to the primary and some more images
>768px Tables like HTC,Samsung,Motorola Ipad At this size we need to ensure that the navigation and buttons are clickable
>=960px  Desktop, Laptop and some Tablets This is the size that we want to display everything that we couldn't on mobile and tablet. As size is not a concern we can concentrate on good design.

 

Alternatively you can run the Google Mobile Friendly Test and just enter your website URL and click Analyze. This will give you breakdown on whether your site is mobile friendly or not and also provides suggestions on what to do.