Your website receives visits from different devices, such as smartphones or tablets. Does your website comply with responsive design standards?
On several occasions, we have mentioned that we currently access the Internet from different devices besides the computer, such as televisions, video game consoles, tablets or smartphones. This implies that a web page will be viewed in different screen sizes and from different operating systems or platforms.
Hence the importance of responsive design or adaptive design, which allows any page or website to adapt to the device where it is being displayed so that everything works correctly.
Let’s see how to check if our site meets the requirements of the responsive design by analyzing its code or showing it by imitating browsers and mobile platforms.
Responsive Website Design Checker & Testing
The Servo technology company offers us a simple but very practical online tool. It is simply called Responsive Website Design Checker & Testing and, as the name implies, it helps us check how a web page is displayed on different devices.
Just paste the address of our website in the corresponding field and click on the Test button. Then we will only have to choose the different options to check if our website adapts to different screen sizes and navigation engines.
Specifically, we can simulate iPhone, Google Nexus, Galaxy, Kindle, iPad, Windows, Mac and different desktop screen sizes.
QuirkTools Screenfly
With a somewhat wider catalog of devices, QuirkTools Screenfly helps us view any web page from different screens, devices, and operating systems.
We indicate the address, click on Go and we will see a preview of that page or website. From the top bar, we can choose between computer screens, tablets, mobile devices or televisions.
Also, it allows you to rotate the screen, reload the page and/or open it using a proxy server to avoid geographical or vendor limitations.
Google Resizer
When Google redesigned Android with its new Material style, it launched a website with material, tools, and manuals to help designers and application programmers.
Among the tools available we will find Google Resizer, which allows us to view a web page in different screen sizes.
As in the previous cases, we indicate the address and it will be shown at the bottom in the form of a preview adapted to generic desktop and/or mobile devices. By clicking on the desktop and mobile icons, we will see that the preview has a guide with screen sizes.
On mobile, for example, we will see 480, 600, 840 or 960 screens, while in mobile devices we will find 360, 600, 720 and 1024.
Website Responsive Testing Tool
With a style similar to the previous ones, the Website Responsive Testing Tool will show any address according to the screen or device size you choose from the wide catalog.
Smartphones, tablets, computers, televisions … The tool has a menu with different resolutions and even simulates that we rotate the screen from landscape to landscape and vice versa.
As complements, it is also possible to enable or disable scrolling to navigate the main page from top to bottom, as well as check other aspects of code and web standards through its W3 Validator.
In addition to displaying the page adapted to different screen sizes, it is possible to browse through it to see if links and other subpages are also displayed correctly.
