How To Test Website in Different Screen Sizes

Why is it important to test websites in different screen sizes?

While developing any application be it web or mobile, one of the key criteria that we always stumble upon early on in the development cycle is the type of devices through which users will interact with your applications. Though in the past most common devices used to be computers or laptops, the most penetration is seen with handheld devices, more importantly smartphones.

There are more than 4.88 billion smartphones in use and the number continues to grow. As the projected number of users in 2029 is at a whopping ~7 billion, we can only imagine the type or variety of smartphones that we will need to ensure UX experience parity for our applications.

 Source

As the types of smartphones increase, the screen sizes also vastly vary, ranging from flip phones to foldable phones. It is impossible to test your application across each and every type of screen size and logically it would make sense to devise a QA strategy where you identify the  most popular devices and screen sizes. This article gives insight about the popular screen sizes.

This article aims to explain two easy methods using which teams can instantly run a responsive test for their websites across the most popular screen sizes.

How to Test Websites in Different Screen Sizes

As your team ventures into putting your QA strategy into practice, the two methods that they can employ to achieve test coverage are:

• Using BrowserStack’s Free Responsive Checker Tool: This free tool from BrowserStack is handy in testing out your web applications that are hosted publicly across multiple device types and screen sizes. The limitation with this tool being the number of devices you can test responsiveness across and lack of support for non-production apps.
• Using BrowserStack Live: BrowserStack Live provides access to more than 3000 real devices with an array of features in addition to the availability of these devices 24/7 from your web browser. You get access not just to device types but different resolutions within the devices that you can use.

Method 1: Using BrowserStack’s Free Responsive Checker Tool

This method provides a straightforward way to check website on different screen sizes on various real devices through BrowserStack’s Responsive Checker tool.

Step 1: Navigate to BrowserStack’s Free Responsive Checker Tool.

Step 2: Input the URL of the website you want to test.

Step 3: Click the “Check” button to load the website across multiple devices.

Step 4: Choose a specific device, like the iPhone X, to see how your site looks on that device.

Step 5: Switch between landscape and portrait modes to check different orientations.

Step 6: See the website displayed on your chosen device in clear, enlarged dimensions.

Step 7: Select different devices in varying OS to see how the website looks in different screen sizes.

Run a Free Responsive Website Test Now

Note: This tool is limited to viewing websites on a selection of popular devices and does not allow interaction with the website’s elements. 

The second method addresses this limitation. It allows developers and testers to perform interactive responsive tests as well as cross browser testing on real mobile devices.

Method 2: Using BrowserStack Live for Interactive Web Testing on Real Devices

Out of the two methods, this comes across as the most efficient option due to the large infrastructure of cloud-based real devices that it gives access to. You can leverage these devices without the overhead of maintaining the devices for upgrades and other tasks.

Get started by following three simple steps listed below:

Step 1: Sign up on BrowserStack Live for a free trial or purchase a plan.

Step 2: Navigate to the Live Dashboard after successful sign-up.

Step 3: Select the desired OS (Android, iOS, Windows, etc) and the device-browser combination (For example Samsung S23 – Chrome) and get started with web testing on a real device.

Step 4: The device and browser start booting.

Step 5: View the device along with the Live menu. After you open your application, click Rotate.

Step 6: View the responsiveness of your application after the device rotates.

Step 7: Click Switch Browser and select Mac > Sonoma > Chrome version 125. When you open the same web site, the following is seen:

Step 8: Click Switch Browser, click iOS > iPhone > iPhone 15 with Chrome browser. When you open the same web site, the following is seen:

Step 9: Click Switch Browser, click Android > Samsung > Galaxy Tab S8 with Chrome browser. When you open the same web site, the following is seen:

Apart from interactive responsive testing, developers and QAs also get access to advanced features for mobile testing. Listed below are a few:

• Upfront access to DevTools for inspecting particular web elements in mobile view.
• Network throttling feature to test the performance of websites in poor network connectivity.
• Integrations with bug reporting tools like Jira and Slack to aid bug identification.
• Geolocation testing to test location specific behavior of a website.

Talk to an Expert

Why Test Websites on different screen sizes using Real Device Cloud

Some compelling reasons for using a real device cloud are:

• Real-world testing: Access to a larger set of devices where you can test how your website behaves on screen sizes.
• Uncover hidden issues: Catch layout problems, responsiveness glitches, and bugs that might not show up with limited devices.
• Improved user experience: Ensure a smooth experience for all users, regardless of their device, leading to higher satisfaction and engagement.
• Wider browser coverage: Test on a variety of browsers running on real devices to guarantee consistent functionality across platforms.
• Faster testing: Run tests on multiple devices simultaneously, saving you time and resources compared to manual testing.
• Future-proof your site: Some providers, such as BrowserStack, release devices the same day as the product launch. You can stay ahead of the curve by testing on the latest devices and screen sizes as they emerge.

Conclusion

Including a limited number of devices in your testing strategy just to fill in the numbers might seem like a viable option, but it doesn’t truly translate into a successful approach since you are not considering the true user experience that your users might get. Optimizing a website for a specific device type, screen size or browser won’t suffice in a world where the web is accessed from 9000+ distinct devices and several browsers.

A more robust strategy would be to use a real device cloud such as BrowserStack Live to ensure that your application is well tested without the overhead of maintaining the infrastructure.