10 Tools To Responsive Design Testing


By , December 2nd, 2013 , Tags: , , , 0 Comments

In responsive design testing tools can save a lot of time. The easily switch between viewport sizes simplifies the work much easier. We ask you ten free tools and some browser extensions that you help.

Made Viewport Preview slightly: Responsive Web Design

If his website layout you want to update every few seconds, simultaneously testing for different output sizes, one is more concerned with changing the browser window as busy with the actual adjustments. Fortunately, there are a number of tools for testing Responsive Web Design – Online tools, browser extensions and bookmarklets. Here is a brief overview.

Am I Responsive?

The Responsive Web Design Tool 'Am I Responsive?'

The Responsive Web Design Tool “Am I Responsive?” With a test of page.

The tool “Am I Responsive?” by Justin Avery is one of the most intuitive test tools that are out there currently. After entering the URL, the page layout spits in four sizes from Desktop (1600 x 992 pixels), laptop (1280 x 802 pixels), tablet (768 x 1024 pixels) and Mobile (320 x 480 pixels The four devices that. you are displayed as Apple devices, you can also Drag and Drop on the screen back and forth, a nice little gimmick by the way, if you interested you for the genesis of the Tools -. Avery has written here .

# Deviceponsive

The tool # deviceponsive at work.

The tool # deviceponsive at work.

Similarly, simple such as “Am I Responsive?” Also comes # deviceponsive Javier Rivera therefore. All output variables are displayed simply with each other, in the header of the page you can also set the background color, or integrate your own logo to then share screenshots. Testing can you side with this tool for the following sizes: Macbook (1280 x 800 pixels), iPad portrait (768 x 1024 pixels), iPad landscape (1024 x 768 pixels), Kindle portrait (600 x 1024 pixels), Kindle landscape (1024 x 600 pixels), iPhone portrait (320 x 480 pixels), iPhone landscape (480 x 320 pixels), Galaxy portrait (240 x 320 pixels) and Galaxy landscape (320 x 240 pixels).

ResponsiveTest

In ResponsiveTest the name says it all.

In ResponsiveTest the name says it all.

Somewhat easier than # deviceponsive works ResponsiveTest . After entering the URL here you can select the appropriate devices from a drop-down menu, where the bandwidth is huge. Various smartphones, tablets, laptops and desktop computers to choose from. There is also the option of using individual information pixel tests carried out regardless of the device specification.

Responsive Web Design Testing Tool

The “Responsive Web Design Testing Tool” by Matt Kersley.

In the online testing tool by Matt Kersley gives you the URL of the test site and then gets five preview variations for small smartphones, iPhone, small tablets and iPad display. If you prefer to use as a bookmarklet Matt’s tool, the Ben Keen deployed solution for use.

Responsinator

The Responsinator – another tool to test responsive web design.

The Responsinator by Tama Pugsley and Andy Hovey offers by entering your own website URL Preview ten predefined variants for the most popular devices iPhone, iPad, Kindle and Android. Also Responsinator is in addition to the web version than Bookmarklet available.

Demonstrating Responsive Design

Demonstrating Responsive Design.

 

Jamie Reynolds has Demonstrating Responsive design an online tool developed which gives a chic preview in five different terminal sizes after entering to the site URL. Jamie tool is especially well suited websites for clients for rapid presentation of Responsive.

Responsivepx

Responsivepx.

In responsivepx by Remy Sharp you are a local or online URL and can then enter the desired width and height of the output, so as to find the exact breakpoint widths in pixels.Here’s a video to work with responsivepx:

ResizeMyBrowser

ResizeMyBrowser.

ResizeMyBrowser Chen Luo does not work with Opera, Chrome and Safari, as the online tool works with the resizeTo event. For Firefox and Internet Explorer but ResizeMyBrowser offers twelve predefined output sizes, open the current URL with selected width and height in a new pop-up window. You can also add your own viewport sizes. For Safari Chen recommends Resize Safari Extension .

Screenfly

The Responsive web design test tool Screenfly.

Screenfly of Quirktools includes predefined resolutions for desktop, tablet and mobile, and TV. It reflects the URL of the test site and then you can select between the different viewports. However, the TV preview the desktop preview is limited to Safari, and possible only in Opera.

Screenqueries

Screenqueries.

Screenqueri.es by Mandar Shirke is an online tool in beta, where you can raise and drop any window size by dragging, rulers and sees the number of pixels gets displayed for that. Even with Screenqueries you can specify the URL of your own test page. Pre-defined viewports are available for popular tablets and smartphones including BlackBerry available. The varying output variables for the iPhone models 3 and 4 are taken into account in Screenqueries (iPhone 4/4S with retina resolution in 640×960 pixels and iPhone 3/3GS with 320×480 pixels). Currently the site is offline due to updates unfortunately.

Responsive Web Design: Testing a browser extension

The ResponsiView extension for Chrome.

The Media Query Bookmarklet Spark Box is another simple alternative for the quick preview of Resonsive Web Designs in your browser. The Resizer code bomber is available as a bookmarklet as well as an extension for Chrome. Other browser extensions for Chrome that are comfortably integrate a site preview in different resolutions than your own menu, for example, the Window Resizer , resolution test or responsiView , All ready in the Chrome Web Store.

The Window Resizer extension for Chrome.

Chris Pederick has with Web Developer also developed a platform-independent extension for Chrome and Firefox, the next Resize functionality for the browser window still has lots of other development tools for as CSS-analysis or document information.

The Web Developer Extension for Chrome and Firefox.

The Opera Mobile emulator is a separate small application that must be installed locally. It constitutes over 50 predefined viewport sizes for terminals, for example, Samsung, Motorola, LG or Nokia. Additionally, you can add custom resolutions or emulator with Opera Dragonfly connect.

The Opera Mobile emulator as a separate application.

All of these tools for comfortable testing the display of Responsive web design in different resolutions save safe a lot of time in rapid design modifications and to simplify the preview during development. However, note that the tools for example because of iFrame embedding or supplemented scroll bars usually do not work with pixel accuracy to 100 percent. In addition, as of course are simulated only the pure viewport output of the respective terminal. Other device-specific settings that go beyond the design preview out, so stay ahead of complete exterior and Responsive web design must necessarily be additionally tested in a follow-up to the appropriate terminals themselves.

Do you know any other useful tools for testing websites on different devices? Additions as comments are always welcome.






I founded CSS Matter in 2013 with the sole ambition of design, development, creativity and innovation on the Internet, which recognize and promote the best web designers, developers and web users in the world. I'm skilled, talented, creative and very passionate about my work. I like to work closely with people to ensure that each stage of a project goes great every step of the way. I like to ensure that all of my finished projects/work reflect how highly I would like to be perceived. I'm confident that with your ideas and my expertise we can create something that makes us both smile. If you like what I do, and think we could work together then don't hesitate to get in touch with me. Skype IM : cssmatter And Email

Want to write for CSS Matter?

If you're interested in becoming part of the CSS Matter team of authors, please send an email to Manish Salunke. It's best if you already have article ideas in mind – but if you don't, he'll help you find a good topic to cover.



Get Updates On Twitter

Do you want to get real-time updates, interesting web links, site news and announcements via Twitter? Follow CSS Matter on Twitter.



Subscribe to the RSS feed Today

The best way to keep up with CSS Matter articles regularly is by putting the CSS Matter RSS feed into your feed reader.