Tools to test the responsiveness of a website and prepare responsive website presentations

Tools to test website responsiveness

What are the best tools to test the responsiveness of a website? What are the choices when it comes to preparing a responsive website presentation for clients?

What are the best tools to test the responsiveness of a website?
Tools to test the responsiveness of a website and prepare responsive website presentations

In focus: Client-facing website responsiveness presentation

Test responsiveness of website on device

Main aspects of this responsiveness test

It's a special case when you test and present the responsively designed website in front of the clients. It's very important to come across as a well prepared professional. Getting lost between open tabs and bookmarked URLs during the website responsiveness presentation wouldn't look good. The best, if you can do the responsiveness test and the presentation in one platform.

  • The responsive view needs to be accurate on all mobile screen sizes to demonstrate the responsive breakpoints
  • Rotating and changing the devices needs to be quick and easy to keep the audience focused
  • The functions needs to be available from localhost and support remote website presentation for international clients

Website responsiveness test tools for that case

OnDeviceApp for presenting responsively designed websites on device

Tools to test the responsiveness of a website and prepare responsive website presentations

In focus: Responsively designed website finalization

Website responsiveness test without devices

Main aspects of this responsiveness test

When you're preparing to launch or hand over a responsively designed website you need a final look at the design elements if they behave as expected. Nothing too detailed, just an overview to avoid any misalignment and finalize the design.

  • An overview of the screen sizes needs to be available by default for media-query crosscheck
  • Easy access needed for the high number of devices with their CSS resolution displayed
  • Quick and easy reload of the page need to be ensured
  • The tool needs to provide a live website preview to check the interactions in their context

Website responsiveness test tools for that case

Emmet Re:view Google Chrome plugin,Sizzy, Matt Kersley,Limelight Responsive Tool and several responsiveness testing browser add-ons.

Tools to test the responsiveness of a website and prepare responsive website presentations

In focus: Founding the layout and the website responsiveness

Tools with ruler to test the responsiveness of a website

Main aspects of this responsiveness test

Setting up the responsive layout, especially from scratch, requires guides, rulers and a clear view of the resolutions need to be considered. The most convenient way to work on that is probably to drag and expand the viewport width from one resolution to another.

  • The rules and guides are need to be constantly visible to set up the breakboints and the elements' width accurately
  • Grids and additional guides are advantageous for pixel perfect execution
  • Compatibility with developer tools is needed to fix the misalignments

Website responsiveness test tools for that case

Designmodo, Screenfly, and some of the developer toolbars and IDEs.

Tools to test the responsiveness of a website and prepare responsive website presentations

In focus: Basic website responsiveness overview

Quick tools to test the responsiveness of a website

Main aspects of this responsiveness test

If you already finished with work and you need to send a very simple responsive view to the clients, you can make screenshot from one the tools below. They most probably used by website owners anyway, who want to check the design they received.

  • Picture of the devices or at least an illustration of the device around the screens is needed
  • Needs to be freely available with a manageable amount of devices to test
  • Little or no setting should be required for a quick overview

Website responsiveness test tools for that case

Ami.responsivedesign.is, responsivedesignchecker.com.

Tools to test the responsiveness of a website and prepare responsive website presentations

Testing and presenting responsively

Tools to test the responsiveness of a website and prepare responsive website presentations

What are the best tools to test the responsiveness of a website?
Created by Tech Tool Lab Ltd - Twitter - 2017 London