![]() But for a simple tool that gets the job done this works great and it’s one of the few testing tools that offers a 240px width by default. However you can’t click any links or browse through other pages within the panes, so this is really best for testing singular pages. The preview panes do feature scrollbars so you can move through content effortlessly. Instead it’s a plain inline site previewer with 5 fixed widths: 240px, 320px, 480px, 768px, 1024px. ![]() This one’s a lot simpler than others and doesn’t have many frills. Matt Kersley’s Responsive Toolĭesigner & developer Matt Kersley released his own free testing tool for responsive layouts. It’s not a complete resource for responsive testing but it’s a great place to gather info and it comes from perhaps the most authoritative company on the web. Keep this saved as a trustworthy mobile testing tool. This is a little too generic for designers but Google offers tips based on problem areas & page elements that could use improvement. Once the test runs you’ll either pass or fail as a mobile-friendly site. Instead it’s a dedicated mobile tool for pinpointing issues within your site on mobile. This testing tool isn’t really a previewer and it doesn’t help you spot UI bugs. Google is full of great tools for webmasters and their Mobile-Friendly Test is one such example. To top it off you can mark bugs and share them with your team on your favourite project management tool such as Jira, Asana etc. It comes with an in-built debugging tool, where you can validate your fixes on the go. Making it easier to compare the mobile view on different devices simultaneously. It also supports mirror action, where your actions on the first device get replicated in the other one as well. With this testing tool, you can directly compare different mobile views simultaneously with the side-by-side view. It also allows you to save these custom devices for any future use. You can perform responsive tests on 25+ mobile views & in case you find your favourite device missing, you can add a custom device, with the screen resolution and size you want. Is a live mobile view debugging tool that allows you to check the mobile view of the website on various viewports and debug them on the go. So if you’re struggling to test 1920px monitors on your smaller MacBook screen this tool is well worth bookmarking. Surprisingly these large sizes work well even on small monitors because the preview pane resizes based on ratio, not total pixel width. The site also supports large screen sizes with desktop monitors up to 24″ wide. In the sidebar you’ll find a ton of predefined screen sizes for common devices like Nexus tablets, Kindles, and even newer phones like the Google Pixel. You can alter the width/height however you want and even use it to match certain screen ratios if you use an aspect ratio tool. Once you enter a URL you have full control over the responsive testing space. Need to quickly check if a website really is responsive? Then try using this Responsive Design Checker made specifically for custom screen sizes. It’ll automatically match whatever site you’re previewing to avoid SSL errors. Responsinator offers both types for previewing sites depending on the URL you enter. Another cool feature is the switch between HTTP and HTTPS. You’ll also find iPad device previews also in portrait and landscape. Devices include the most common iPhones and the Android Nexus devices, both with portrait and landscape previews. ![]() This way you can scroll down through each device and preview the site on each one. Instead of using a horizontal scrollbar this site lists each device preview in a vertical column. One similar app you also might enjoy is Responsinator. An excellent testing tool for responsive design and it supports a lot of variety in device styles. That dropdown even supports a custom width/height setting if you want to see how your site appears on specific monitors. Plus from the dropdown menu there’s a wide selection of smartphones, tablets, and laptops for testing specific devices. The label above each screen tells you the exact size and which device it matches to. The site works in a long horizontal style where you have to scroll sideways to see all the screen formats. With this site you can preview how any website looks on a variety of devices. The XRespond app calls itself a “virtual device lab” and I’d say that’s pretty spot on. Best of all these support many device sizes so you can get a good feeling for how your layout should look from smartphones to desktops. And these free tools are my top picks for responsive testing since they’re all super easy to use. You can look for usability issues on different screen sizes all from one handy tool. I actually recommend testing your ideas with responsive design tools to see how your site looks at each stage. This does require more effort but the end result is worthwhile. Every modern website needs a responsive design.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |