-2

I'm looking for the best app, online tool or whatever exists to fully test compatibility for a responsive website I'm working on. I need to check screen sizes, browser, devices.

Is there a tool that unifies all test in one platform?

halfer
  • 19,824
  • 17
  • 99
  • 186
Gill Soriano
  • 11
  • 2

2 Answers2

-1

First of all, it is hard to say one particular tool that is the best tool to solve all your problems as there are so many aspects to Responsive websites such as

1. Breakpoints

Breakpoints are the point where the site content adjusts according to the browser width and screen resolution to provide the optimum viewing experience to the user. This is one of the most overlooked aspects of testing responsive websites, leading to a lot of rendering issues in the page. It is important to test the boundaries of the breakpoints to see when the page adjusts itself.

2. Image Size Optimization

This is the concept where we try to make the image scale according to the viewing size. There are various techniques to do this from the code. We need to do focused testing to see whether the images render correctly on different pages.

3. Page load times

Responsive websites tend to have a lot of Javascript, CSS, HTML on the client side due to multiple factors. This often has a considerable effect on page load times. A recent study conducted by Google found that 53% of users would leave your website if a page takes more than 3 seconds to load. This being the case, it becomes really critical to do performance testing on pages before we release it to the customer

I had published an article about the exact same topic. So hopefully the below details can help you out.

Different approaches and tools to test responsive websites

Browser Tools – This is one of the most widely used strategies to get different types of information about your web page.

For Example – Let’s take Chrome browser. If you press “Command+Option+C” on your Mac or “Control+Shift+C” on your Windows PC, it will open up a browser console which has various tabs. The 3 tabs more widely used by testers are:

Elements – This tab displays all the client-side JavaScript, CSS and HTML elements of the page. The tester can even vary the CSS of the page and see how different changes affect the page.

Console – This tab displays all the warnings and errors present in the page. On double-clicking them a window opens up showing information about which file and what line number the error occurs

Performance – This tab provides the options to record different flows through different pages and show page load times, screenshots and other relevant performance information related to each page accessed during the user interaction

Chrome Extensions There are various free plugins available as part of the Chrome web store to test different aspects of your responsive websites. Some of the popular plugins are:

  • Responsive Web Design Tester

  • Viewport Resizer

  • Mobile/Responsive Web Design Tester

  • Responsive Viewer

  • Responsive design tester

  • Responsinator

  • Resolution Test

  • Window Resizer

  • Image Size Info

  • Responsive Inspector

  • User Agent Switcher

  • YSlow

  • Simple Image Resizer

Tools to check screen breakpoints Apart from some of the tools mentioned above there are specific tools that can be used to check the boundaries of different breakpoints of your web pages:

Tools to do cross-browser testing

With so many combinations of browsers, OS versions, devices and screen sizes, sometimes it is just easier to test a web page on multiple form factors simultaneously to save time. There are some tools that give you this functionality:

halfer
  • 19,824
  • 17
  • 99
  • 186
Raj Subrameyer
  • 422
  • 4
  • 6
-2

Check out browser stack. You'll want to review this page to check out the mobile section.

Brendan Martin
  • 376
  • 4
  • 13