Testing your website across multiple screen sizes will help you catch possible errors in layout and user experience.
With so many different screen sizes and resolutions on the market today it can be nearly impossible to design for every possible scenario… but that doesn’t mean you shouldn’t try!
How to test responsiveness
While there are plenty of tools on the market to test your website at different resolutions, I’ve almost always found testing by hand to be most effective.
If you have different desktop/laptop computers, you can test from all available. If you have a tablet and/or mobile phone you can test layouts from those too just by visiting the website on those devices.
While that doesn’t account for every possible scenario, it will give you a first-hand impression of how your site looks and behaves on different devices.
If you like to take that testing further, you can try something like What is My Screen Resolution, which will give you the option to test at virtually and size screen under the sun.
Here are a few things to keep in mind while you’re testing on different devices:
- Do my menus behave properly as the screen size decreases?
- Do clickable elements still appear ‘clickable’ when there is no hover state (touchscreen devices)?
- Is the text too large or too small?
- Are clickable elements too close together to easily tap to click?
- Do multi-row columns stack in the right order?
- When the screen size is small, is there any horizontal scrolling (there shouldn’t be)?
Additional responsive testing resources
Software testing help has a massive article on the topic if you’d like to go more in-depth.
Responsive Design Checker is a quick and easy way to test on various per-defined sizes.
Google’s mobile friendly test will give you a passing or failing grade with some (albeit confusing) instructions on what to fix.