How can I check if a website will work on multiple devices?

Unless you are a developer, why would you need to know if a website works on multiple devices? Well maybe you have been appointed to research a new technology or software to automate more processes in the workplace. A date for the big day has been set. You are to present your findings to management, the board or whoever the higher powers that be are. You are trialling a new software and you want to know whether it will work on multiple devices. However, you don't have access to all the types of devices that are being used within your organisation.

It is true, some applications don’t work on all devices. Take Trello for example. A popular B2B software that is incredibly useful (we use it ourselves) but alas it does not work the same way on all devices. The thought of someone trying to load your chosen software only to find it is not compatible with their device in the middle of your presentation is causing you undue stress and pre-emptive embarrassment! Month’s of your hard work and research down the pan. Well worry no more! There is actually a really simple and easy way to check; plus, it is free! You do not even have to dig out your phone or source more devices to do it. We actually recommend building it into your research process and frequently get our clients to do it too. What is it? Google has an inbuilt Developer Tools function whereby you can preview what a website/ web app will look like on different devices including mobile, iPads, tablets and custom devices too.

How can I open DevTools in Google Chrome?

• Open a tab with the website (or web app) that you would like to check.
• Right-click anywhere on the webpage and select Inspect.
• A new panel or window sporting Chrome’s DevTools will open. 
• At the top left hand side of the new panel/window, you should see two icons. One with a square and arrow in the bottom right hand corner and one that looks like 2 devices of different sizes. Click on the latter. This will open up the Toggle Device Toolbar. 
• The screen will automatically show you what the website/web app will look like if accessed via a mobile device.

How can I change between device previews in Google Chrome?

• On the toolbar at the top of the original browser window (where you see the website), it will say ‘Dimensions’ followed by what type of device you are viewing the current website in, accompanied by a dropdown menu. 
• Use that dropdown menu to select what device you would like to preview next.
• Rather than choose an existing device from the list, you can opt to use Responsive Mode. Just click on the ‘Responsive’ option in the dropdown menu.
• In Responsive Mode you can enter custom widths and heights of a device in the boxes provided next to the device dropdown menu or alternatively, manually click and drag the corners of the window to adjust the size accordingly.

How can I add a custom device in Google Chrome?

If your preferred device is not listed, you can add a custom device permanently to the list ready for next time.

• Click on the Device Dropdown Menu and select Edit.
• Make sure that under the Settings sidebar you have the ‘Devices’ tab selected. It is also worth mentioning that you get access to a more extensive list of devices here to choose from.
• Press ‘Add Custom Device’.
• Fill in the required details: device name, width and height. Also select the device type for e.g. mobile or desktop. (You can provide further details such as the device model, brand or version by expanding the ‘User agent client hints’ option.)
• Return to the device dropdown menu and your new custom device will be added to the list.
• You can always edit the details you have provided at a later date. Just go to the custom device page and hit the ‘Edit’ button next to your device's name and away you go.