Why does it matter?

Writing this blog post while the UK is still in confinement due to the COVID-19 might seem a little off the mark. After all, why should you care how your website performs on various devices and screen sizes when your business is currently shut (unless of course you happen to be in food retail or in medical care)?

Well the obvious answer is because THIS IS the time when people will be looking at businesses that they can assist them while they have to stay home. While IT equipment might be standardised back at the office, the home environment is likely to be more diverse and as such your next opportunity could be coming from a mobile device.

Indeed according to a March study published tech news portal Zdnet, which surveyed users across 17 countries about changes in their browsing behaviour in lockdown, 76% reported spending more time on their smartphones and 22% have been spending more time using their tablet device.

While the pandemic is bound to subdue and the lockdown lifted, some of those browsing habits are likely to stick and the convenience of browsing on a mobile device remain. 

Alright, so how do I check my website?

Let’s start with the obvious. If you are like most of the population, how probably own a smartphone (or two?), so make sure that you check it this way first. Similarly, if you or a friend have a tablet handy then give that a go and if something does not look quite right then speak to your website designer/developer or contact us.

Now, while this constitutes a good ‘acid’ test, not all devices have the same screen size, so it pays to expand your testbench as much as (practically) possible.

Using your web browser

Most of us do not think twice about our web browser as we come to open and close them dozens of time every day but as windows to the web, they have the important mission of allowing seamless access to content.

As part of their toolkit, they can simulate diverse mobile and tablet display. To access this function, on Windows, open your browser and press the F12 key (Fn + F12 on most laptop) to open the development tools and look for the smartphone/tablet icon or in Edge the emulation tab (see below). 

on Mac, you might need to enable the developer toolbar first and then select Option + Cmd + R

 Chrome

 Firefox

 Edge

These simulators will give you the chance to see what your website looks like on various display size (usually by mean of a dropdown list) and as well as in vertical or horizontal orientation.

Via your friendly CMS (well ours is at least – shameless plug)

Some content management system, like Umbraco -- our favourite here at Netjib, allows you to preview content in various display mode and orientation.

1. Once you have finished editing the page content click the Preview button.
2. Click the button with two arrows on the far left. This will reveal the device slide out menu.
3. Select which device you would like to scale the preview pane to.

Web service

If you are short of time or the prospect of downloading and testing your website design in multiple web browser seems too daunting, then check out www.browserstack.com which over offer a range of simulators and real devices to test from.

As part of our website design and development process, all our projects are tested across browsers (as in step no. 1) but also platforms using this online service, so our clients are sure that their business or organisation website looks great across the board.