Testing different screen resolutions on a webpage can happen in many ways. On this article, we delve into a simple method ideal for users on Windows, because you don’t need to switch between different resolutions.
The truth is that if it gets difficult to test for operability in different conditions, webmasters become less inclined to carry out the full range of testing recommended before completion of design work. For this reason we’re offering a simpler method that allows webmasters to test their sites and pages for different resolutions and browsers.
Importance of testing under multiple resolutions
Webmasters are usually advised to test their web pages/sites under the most frequently used screen resolutions because it helps to confirm whether or not the page is properly displaying and hence usable for those resolutions. In a multi-column layout, you’ll also be interested to know whether columns properly aligned and are viewable at lower resolutions than the one at which you’re designing.
Computer and mobile device screen resolutions under which to test
Below is a list of the most common resolutions for computer screens under which to test sites:
- 640 x 480
- 800 x 600
- 1024 x 768
- 1280 x 800
- 1366 x 768
- 1400 x 900
- 1680 x 1050
In addition, you should test for the following screen widths to ensure that the site is comfortably accessible on the majority of today’s mobile devices, including smartphones and tablets among others. For the below descriptions, portrait refers to the position where a mobile is held vertically such that the height is greater than the width, while landscape refers to the position in which the screen width is greater than its height. Sample mobile screed widths are as given below:
- 786 pixels – iPad portrait
- 600 pixels – Kindle portrait, Android Nexus landscape mode
- 568 pixels – iPhone 5 landscape
- 480 pixels – iPhones 3-4 landscape
- 384 pixels – Android Nexus portrait
- 320 pixels – iPhone portrait
- 240 pixels – Android (old) portrait
Note: Landscape widths for Kindles and iPads are 1024 pixels, but these are covered when testing for computer resolutions in the previous list.
There are many resolutions on the market today. It is neither necessary nor practical to attempt testing for every single screen resolution. If you test for the above and the webpage works properly, the page will still work for all other resolutions in the ranges between.
What you need
- Monitor whose resolution is the largest on the list of resolutions to be tested
Essentially, in order to test for all the screen resolutions outlined above, it makes sense to have a screen that can display at the largest resolutions. If one isn’t readily available, you can use your current monitor’s resolution as the largest and test for everything below it.
Sizer is a utility in Windows that enables you to resize whatever active Window is on your desktop at any moment. It is lightweight and available free of charge, and proves very useful for web designers to have. To download it, you can go to http://www.brianapps.net/sizer/.
- The first step, of course, is to download then install Sizer to your computer.
- Once installed, launch it from the Start Menu using the Run Command. Ensure to check the following configuration settings. You can find these towards the foot of the window:
- Click on the ‘Add’ button. This creates a second configured profile with the settings you have added. Enter the above values into their corresponding fields. Every time you finish a profile for each resolution, use the Add button to save the next one. You won’t need to create profiles for your current screen resolution, just maximize the browser window and you have it. You also don’t need to create profiles for those larger than your monitor, since you won’t test for them.
- When you have finished, it’s a good idea to select the items on the list and use the Move Down or Move Up buttons to sort the list in a way that makes sense to you. This is optional, and doesn’t have a bearing on the way the program operates. However, it’ll be easier for you to find a resolution setting you want. Use the ‘OK’ to accept changes.
How to test your site in multiple resolutions
Each time you need to determine how your site appears given each resolution size, simply open the page under testing using your browser (which you are also testing for. You can change browsers for each resolution size before going to the next one). Then, click anywhere within the browser window to transform it into the currently active window.
In the system tray, right-click the icon representing the Sizer Utility and choose the resolution you want to test for. Sizer automatically resizes the browser to fit the resolution setting specified.
You can also resize the browser window by opening the system menu of your application that’s under testing. The system menu refers to the icon found at the topmost left-hand corner of the app window. You can also activate it using the keyboard shortcut ‘Alt+Space’. Once the system menu has appeared, choose the option “Resize/reposition” which gives you a list of the resolutions that you earlier configured.
By examining your site under all of the most important screen resolutions used on computers and mobile devices, you are able to ascertain that the site is usable in each tested condition which represents a given fraction of your users. You will also be able to identify any shortcomings and resolve them before releasing the product for use by your clients.
As you can see, the Sizer Utility makes testing for multiple resolutions in Windows extremely easy and much less time-consuming.