We’ve all been there…
A website you are designing looks great on your laptop, phone and tablet. But then someone shows you a screenshot of what the site looks like on their device and you just want to cry. What probably happened is that they are on a screen with a breaking point that you didn’t test your design for.
Responsive design is a no-brainer at this point in time. Your designs need to look right on any screen. If you’re a Divi user, you’ve already got a suite of practical tools to help you design responsively. Nevertheless, it’s always a good idea to check on the most viewports possible. Your best bet is to have one window with the Divi Builder and another with a responsive tool that you can refresh regularly.
Some people prefer to design “mobile-first”, others do it simultaneously and others design desktop first and then adjust for smaller screens. No matter your process, you need to have the right tools to check just how responsive your site is.
That’s why we’ve put together this list with some of the most practical responsive website design testing tools and sites. Try them out and see which one you are most comfortable with.
Let’s dive in.
The first responsive testing tool on the list is right inside your Chrome browser. The same tool you use to inspect a site’s code also has a feature to test screen sizes and viewports. Right-click on any website and click ‘Inspect’. Once the inspect window opens, you’ll see the icon for devices next to the button named ‘Elements.’ When you click on the devices button, your screen shows the website you’re on at different breakpoints.
You can input a specific size or simply grab and drag the corner of the window to change the breakpoint manually. This is great for checking how your design is adapting to the different viewports.
Responsive Test Tool is like most responsive testing websites, you can input the URL of the page you want to test into a search bar on the top of the screen. This particular tool has a long list of preset device sizes to choose from. If you need another size, you can choose the custom size measurements. When you want to check a change in the design, simply click on the ‘Check’ button to reload. There’s a button to toggle scrolling capabilities in the testing window and a ‘rotate’ button to check both vertical and horizontal layouts.
The developer behind this tool also created a grid system for responsive websites. You’ll find it in the lightbulb icon to the top right.
Responsive Design Checker is a site with a number of preset screen sizes and a custom size option. What this tool is missing in comparison to the tool above is the numbered ruler at the top of the screen and a rotate button. What it has in common is that the ‘Go’ button works in the same way, simply click it when you’ve made a change in the design and want to check the results.
Design Modo is a website and email builder with a free responsive test tool as part of their site. This tool has all the things that the two above tools have plus a dragging button to see how the design changes as the viewport shrink and expand. Of course, it also works as an ad and lead generation device for their main services. The only setback is that the measurements the tool shows are by resolution, not by the viewport. This can get a little confusing.
Responsinator is still one of the most popular responsive web design testing apps, probably because it looks so cool. When you add a URL, it shows the site in a number of different mobile devices in both vertical and horizontal layouts. This tool is practical for quick checks in the most common devices but it’s limited if you want to check all breakpoints.
Responsive Web Design Tester isn’t a website, it’s a browser extension. You’ll find it in your browser’s extension or add-on library. The link below is for the Chrome extension but the tool works for Safari and Firefox as well. When you click on the extension icon you can choose from a list of presets and then the site opens in a new window at the viewport size you selected. The presets are a bit outdated but you’re able to add new devices and create your own preferred groups.
This post was created with our nice and easy submission form. Create your post!