Responsive Web Design is regarded as being the approach which suggests that web design and development should respond to the end-user’s behavior and environment based on their screen size, platform and orientation.

Responsiveness consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. When the end-user switches from their laptop over to their iPad, the website being viewed should automatically switch to accommodate that particular resolution, image size and scripting abilities.

In other words, the website should have the technology to automatically respond to the end-user’s preferences. This would eliminate the need for a different design and development phase every time a new gadget device is introduced on the market.

Along with all of the newest devices – also come varying screen resolutions, definitions and orientations. New devices with different screen resolutions are being developed every day, and each of these devices are able to handle variations in size, functionality as well as color.

With Responsiveness aimed at crafting sites to provide an optimal viewing experience, modern built web sites must now be able to support basic mobile devices that lack JavaScript. There are now many ways of validating and testing Responsive Web Designed websites, ranging from mobile site validators and mobile emulators to simultaneous testing tools.

In this article we would like to introduce our readers to several such tools by which to detect the Responsiveness of a website. Enjoy !

1. ProtoFluid 4


ProtoFluid simplifies the development of fluid layouts, adaptive CSS and responsive design. It builds precise, dynamic viewports in which to test your work. This allows you to quickly effect changes and demonstrate benefits to interested parties. It is free and lets you use other extensions like FireBug.

2. Viewport Resizer


Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page. The smartest way to share your defined environment of devices and breakpoints directly with your team and client. However, this bookmarklet should not replace a real device simulation. It rather helps you, your team and client testing statuses, transitions, text length etc. throughout different device types.

3. Responsive.IS


Responsive.Is is developed by TypeCast another impressive responsive design testing tool, which you can use to test your responsive design. Just type in a URL, and it will automatically change its size depending on the device you choose.

4. Respondr


Respondr is a lightweight, pretty useful and handy tool that lets you test your websites on different devices. You need to enter the URL of the site/page that you want to test, and then select the device of your choice. You can select an iPhone, iPad, or desktop.

5. Froont


FROONT is a web-based design tool that runs in the browser and makes responsive web design accessible to all kinds of visual designers, even those without any coding skills.
FROONT makes responsive web design visual. Design can be done in-browser with intuitive drag-and-drop tools. After all, humans judge design with their eyes therefore it seems just normal to see right away how designs will look across all different screen sizes. Each project has its own URL,that makes it easy to test the designs on real devices right away.

6. Responsivepx


With responsivepx you need to Enter the url to your site – local or online: both work – and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design.

7. Responsive Web Design Testing Tool


Responsive Web Design Testing tool has been built to help with testing your responsive websites while you design and build them.

8. Screenfly


Screenfly lets you enter a URL to test, and then you choose phone, tablet, desktop, or TV. You can also enter a custom screensize, rotate the screen, and generate a URL to share with others for testing.

9. Review.js


ReView is a dynamic viewport system that provides efficient responsive web design viewing choice. Developed in pure JavaScript according to the principles of core (mobile) first progressive enhancement. The system provides both initial ‘Opt-In’ and ‘Opt-Out’ responsive design states.

10. Responsinator


Responsinator helps website makers quickly get an indication of how their responsive site will look on the most popular devices Responsivator lets you test your web applications iphone and ipad, kindle and Android platform. It also shows your site both in portrait and landscape mode.

11. Resizemybrowser


resizeMyBrowser allows you to choose the dimensions of your browser for testing. You can choose between 15 different presets, or you can enter your own custom screen sizes.

12. Responsive Design Bookmarklet


It’s a simple responsive design testing tool, you need to drag the bookmarklet above your bookmarks bar and it will be applied in your browser. You can then choose to preview the current page on screen widths the size of tablets and smartphones.

13. Adobe Edge Inspect CC


Adobe Edge lets you preview and inspect web designs on devices.

14. I am mobile


I am mobile is another good responsive design testing tool that test your web sites on various viewports and also gives you some tips to make your websites more mobile friendly.

15. Retina Images


Retina Images serves different images based on the device being used by the viewer.
Once setup on your website (very simple!) all you have to do is create a high-res version of each image you would like optimized for retina screens and all the work is done for you. You don’t even need to change any img tags (providing they have a height or width).

原文来自于:http://codegeekz.com/responsive-web-design-testing-tools/

转:15 Best Responsive Web Design Testing Tools的更多相关文章

  1. Understanding Responsive Web Design: Cross-browser Compatibility

    http://www.sitepoint.com/understanding-responsive-web-design-cross-browser-compatibility/ In the las ...

  2. 响应式Web设计(Responsive Web design)

    中文名 响应式Web设计 提出时间 2010年5月 英    文 Responsive Web design 解    释 一个网站能够兼容多个终端 目    的 解决移动互联网的浏览 优    点 ...

  3. Responsive web design 学习笔记

    Advanced Styling with Responsive Design 此笔记为Coursera同名课程笔记. Week1 什么是响应式设计? 响应式设计: It is designing y ...

  4. 自适应网页设计(Responsive Web Design)

    引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...

  5. 自适应网页设计(Responsive Web Design)(转)

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  6. (转)自适应网页设计(或称为响应式web设计)(Responsive Web Design)

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  7. 自适应网页设计(Responsive Web Design)(转)

    作者: 阮一峰 出处:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移 ...

  8. 阮一峰:自适应网页设计(Responsive Web Design)别名(响应式web设计)

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  9. [转]如何设计自适应屏幕大小的网页 Responsive Web Design

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

随机推荐

  1. [Java Concurrent] 并发访问共享资源的简单案例

    EvenGenerator 是一个偶数生成器,每调用一个 next() 就会加 2 并返回叠加后结果.在本案例中,充当被共享的资源. EvenChecker 实现了 Runnable 接口,可以启动新 ...

  2. Selenium webdriver 开始

    最早接触的selenium是 selenium IDE,当时是为了准备论文.为了用IDE还下载了Firefox浏览器.后来接触过两个项目都需要selenium,一个采用selenium webdirv ...

  3. 2016 cocoapods的安装和使用以及版本升级遇到的问题

    一.CocoaPods是什么? CocoaPods是一个负责管理iOS项目中第三方开源库的工具.CocoaPods的项目源码在Github上管理.该项目开始于2011年8月12日,在这两年多的时间里, ...

  4. 索引时利用K-邻近算法过滤重复歌曲

    最近一直在做公司搜索的优化与维护,做完索引和搜索的分离之后,又有一个新需求,因为做的是歌曲方面的搜索,所以在数据库中有多个同歌名,同演唱者的的数据,这样在用户搜索的时候,会出来一大堆不同版本的歌曲,影 ...

  5. Linux命令之查找

    在Linux中,有非常多方法能够做到这一点.国外站点LinuxHaxor总结了五条命令,你能够看看自己知道几条.大多数程序猿,可能常常使用当中的2到3条,对这5条命令都非常熟悉的人应该是不多的. 1. ...

  6. cocos2d-x CCAction:动作(转)

    透明度变化的功能挺不错.   瞬时动作 瞬时动作不需要时间,立即完成 [cpp]   //放置,=setPosition()   pRole->runAction(CCPlace::create ...

  7. myqltransactionRollbackexception deadlock found when trying to get lock

    linux 下远程连接mysq 命令: mysql -h "1.0.0.1" -u username -p 1 获 取锁等待情况 可以通过检查 table_locks_waited ...

  8. vim 开发配置(转载)

    原文:http://www.cnblogs.com/ma6174/archive/2011/12/10/2283393.html 花了很长时间整理的,感觉用起来很方便,共享一下. 我的vim配置主要有 ...

  9. Android(java)学习笔记255:JNI之JNI概念

    1. JNI是什么? java native interface (java本机接口) 比如方法声明: public final native Class<?>  getClass(): ...

  10. Ubuntu 14.04 配置vsftpd实现FTP服务器 - 通过FTP连接AWS

    测试主机:亚马逊AWS EC2 系统:Ubuntu 14.04 想用AWS来做服务器玩,结果发现其不能像简单使用阿里云服务器那样用ftp连接,反正也不熟悉ftp服务器搭建,那就乘这个机会学习一下如何利 ...