Testing Your Apps on Different Devices and Screen Sizes

In the era of numerous devices, it's crucial to ensure that your application looks great across all screen sizes. Whether your users access your app from a desktop, tablet, or mobile device, a seamless user experience is a must. For example, an audit app needs to be useable on your phone for on-the-go inspections by auditors and on a large screen for dashboards and reports in quarterly meetings.

Luckily, you don't need any additional software to simulate these devices. Most modern browsers come equipped with Developer Tools that allow you to preview how your application appears on various screen sizes. Today, we'll walk you through the process using the browser's developer tools. In my screenshots, I will be using Edge for my example. For a video example please click here

1. Open Developer Tools

• For Chrome: Right-click on your page and select 'Inspect' or simply press Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac).
• For Edge: Right-click on your page and select 'Inspect' or simply press Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac).
• For Firefox: Right-click and select 'Inspect Element' or press Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac).
• For Safari: Ensure that the Develop menu is available (Preferences > Advanced > Show Develop menu). Then, right-click and select 'Inspect Element' or press Cmd+Option+I.

2. Activate the Device Toolbar

• For Chrome: In the top-left corner of the developer tools pane, you'll find an icon that looks like a tablet and phone. Click it! This is the 'Toggle Device Toolbar' button.
• For Edge: In the top-left corner of the developer tools pane, you'll find an icon that looks like a tablet and phone. Click it! This is the 'Toggle Device Toolbar' button.
• For Firefox: Click on the 'Responsive Design Mode' button, which looks like a small phone and tablet icon.
• For Safari: Click on the 'Responsive Design Mode' button in the developer tools.

3. Choose a Device or Set Custom Size

Once the Device Toolbar is activated:

• You'll notice a dropdown menu with a list of devices (e.g., iPhone X, Pixel 2, iPad). Selecting one of these will adjust your viewport to match that device's screen size and resolution.
• If the device you're looking for isn't listed or you want to test a specific size, you can input custom dimensions or drag the handles to adjust the viewport manually.

4. Rotate Screen

Beside the device dropdown, there's an icon that allows you to rotate the screen. This is particularly useful to switch between portrait and landscape modes.

5. Review and Adjust

• Examine your application closely in the simulated viewport. Check for any elements that might appear out of place, overlap, or disappear entirely.
• It's not just about aesthetics. Ensure interactive elements like buttons and links are easily clickable and that navigation is intuitive.

6. Test On Actual Devices

While the device simulator is an incredible tool, nothing beats testing on actual devices. So, if you have access to different gadgets, do spend some time verifying your web application on them.

Conclusion

Browser Developer Tools are a godsend for developers and designers alike. They offer a quick and easy way to ensure that your web application is responsive and user-friendly across devices. While it's just the first step in a comprehensive testing process, it's a significant one!

Happy testing, and if you have any questions, feel free to drop them below!