The use of mobile devices for internet access and web browsing is becoming increasingly popular. As a result, more users expect to see mobile versions of websites—both convenient and visually appealing. Yet surprisingly, many websites (almost half, in fact) are still not optimized for proper display on mobile devices. But is it truly necessary to adapt websites? Why do people often talk not just about “adaptation” but “responsiveness”? Today, we’ll explore this question and look at some free tools that let you test your website/design and see what can still be improved.
It’s no secret that for 100% design efficiency, a website should look and function the same on every mobile device, desktop, or even gaming console (yes, they have browsers too). You also need to account for specific device designs like Blackberry, iPhone, and iPad, especially in terms of screen sizes and aspect ratios.
Responsiveness and Adaptivity
The concept of responsive design was first introduced by Ethan Marcotte in an article for A List Apart. RWD (Responsive Web Design) refers to a layout that automatically changes based on the screen size of the device it's viewed on. That’s why you might see a website as single-column on a smartphone and three-column on a desktop. Responsive design adapts to different browsers, screen sizes, operating systems, and hardware. Images, graphics, text, sections, and blocks all automatically scale, giving users a better and more visually pleasing experience.
Besides RWD, there’s also Adaptive Web Design (AWD) . Unlike RWD, AWD involves creating separate layouts for each device. As a result, such websites are less efficient and require more time and investment to develop. During page load, the server detects the device and loads the appropriate layout. This makes AWD slower and more complex overall.
Over time, these two concepts have merged and evolved. Today, best practice is to build responsive sites that adapt automatically to any screen size, with only one version hosted on the server. If a client specifically requests a site tailored for Apple devices, the required models and screen dimensions must be clarified in advance.
Practical Tips for Effectiveness
Theory is one thing. In practice, it's a whole different story. To build a truly responsive website, it must be tested on as many devices as possible—including those soon to be released (since their screen sizes are usually known in advance). Of course, most people don’t have the budget or access to a wide range of physical devices for testing. Luckily, there are online tools that let you test your layout quickly and realistically by simulating a wide variety of mobile devices.
If you look at the countless websites launched daily, most follow modern trends and design standards, sometimes appearing as if they’re built only for desktop use and won’t function well on mobile. Let’s bust that myth!
XRespond
The Xrespond app calls itself a “Virtual Device Lab.” This tool shows how any website appears on various devices. It uses a wide horizontal layout, so you’ll need to scroll sideways to see all screen versions. Each preview includes the screen size and device name. There’s a vast selection—from smartphones and tablets to laptops and desktops. You can even define custom resolutions to test how your site looks.
We tried Core 3 Technologies, a distributor of IT network products. On desktop, the site features sleek loading animations, parallax effects, and more. And on mobile? It looks just as good.
On the other hand, the online store L’Etoile isn’t responsive at all to various screen sizes.
Responsinator
Another fun tool is Responsinator. Unlike the horizontal layout of XRespond, this site offers a vertical scrolling experience. Just scroll down to see how your website responds.
It features mockups for common iPhone and Android Nexus devices in both portrait and landscape orientations. iPad views are also included. One unique feature is the ability to switch between http and https to see how your site displays under both protocols.
Let’s take a look at the website for the web design and development conference Mirror Conf and the e-commerce store Tina.
Responsive Design Checker
If you need to quickly test your site’s responsiveness, try Responsive Design Checker. It’s built for common screen resolutions and gives you full control after entering your site’s address. You can adjust width/height and use aspect ratio tools. On the left panel, you can choose from three device types and their variations. This tool even includes new devices like Google Pixel that are missing from other services.
Yes, it even supports desktop monitors with 24-inch screens. And if you're viewing on a smaller screen, the preview panel scales content based on ratio, not raw pixels. So even if you’re using a tablet, you can still test layouts for 1920px width. This site is definitely bookmark-worthy.
Google Mobile Test
Google also offers a wide range of webmaster tools. One of them is the Mobile-Friendly Test. It's not a visual preview tool and won’t help you spot UI bugs, but it does detect general mobile compatibility issues with your website.
You’ll get a pass/fail result showing whether your site is mobile-friendly. While this info may be too general for designers, Google also provides helpful recommendations and highlights problematic elements.
So while this isn’t a full-fledged responsive tester, it’s a valuable check to see whether your site is optimized for mobile users. Plus, the feedback comes from one of the most authoritative tech companies in the world.
Am I Responsive
If you're looking for pixel-perfect layout testers, Am I Responsive might not be your favorite. Still, it has its perks.
Just enter a URL and see your site displayed on four devices: smartphone, tablet, laptop, and desktop. It’s not to scale, but gives you a general visual sense.
It’s perfect for taking mockup screenshots to show clients how the site will appear across devices. Then, you can use rendering tools for more accurate scaling—if your browser window and screen size allow.
This tool even works with localhost addresses, so you can test local versions of your site before uploading them online.
Designmodo Responsive Test
Another great tool we truly recommend is the Designmodo Responsive Test, from the well-known Designmodo project. Like others, it shows how your site looks at various screen widths inside a browser.
But this one has a standout feature: grid control. You can check how your page appears on a pixel grid or adapt it to specific project needs.
You can move the preview panel to pick exact widths or browser window sizes for layout testing. You can even manually input your desired dimensions.
And yes, the icons in the top right corner let you pick from preset screen sizes for different devices and recheck your design accordingly.
Browser Dev Tools
We’re calling this section “Browser” because the tool is available in Google Chrome, Opera, Yandex Browser, and others—though it was originally created by Google.
These tools let you emulate mobile screen sizes and see how your website appears. Apple, Microsoft, and Google devices are all supported.
To enable it, open a website and press Ctrl + Shift + M to enter developer mode (also called “Inspect Element”). In the top-left of the developer panel, click the two-device icon. From there, you can select predefined devices or input custom screen dimensions.
Conclusion
Of course, there are many other apps and services to evaluate your design’s effectiveness across devices. Some are paid—like CrossBrowserTesting, Browser Stack, Ghostlab—but we’ve focused here on useful free tools for designers.
You can also test mockups directly in Photoshop while designing. But that’s often inconvenient, especially when building for both desktop and mobile. Today, we skipped over sources of design inspiration—but sometimes, it’s these technical tools that can spark fresh ideas. How? By improving what already exists. Imagine spotting a design flaw you’d normally miss—one that only appears on a tiny smartphone screen. Yes, it happens.