50 amazing responsive web design tools

Before you start to build a responsive site, if you have powerful development tools, you will have a better experience in the world. In this article, Denise javobs and Peter gasston recommend 50 powerful tools to support the process of building responsive sites.

Ethan Marcotte's article responsive web design and his best-selling book first introduced three elements required for building responsive sites:

1. Flexible layout and stream Grid
2. Response Image
3. Media Query

In addition, many documents cover the subject of responsive web design,

 

Initial tools

Before you begin to compile the site, it is best to figure out the element frames of the entire page and how they automatically adapt to different browser window sizes, because the resolutions and screens of different devices are different, in addition, you need to avoid the original impact of thinking on desktop application design in your mind, and do not consider the remaining responsive iterations afterwards (For details, refer to the comment by Stephen rewis ).

(Translator's note: In order to facilitate readers to search for relevant information, the original keyword is retained and not translated. Each tool is included)

1. Responsive web desigh sketch sheets

This is a collection of responsive draft charts, designed by Jeremy P Alford, and is an excellent start tool that helps you plan the conversion of different parts of the page in different solutions.

2. responsive design sketchbook

If you prefer to keep the framework unchanged, you may consider the installation book containing 50 responsive draft drawings, which is produced by APP sketchbook.

3. Responsive wireframes

One difficulty in making a responsive site is that wireframe is used to show how the design works during the response. Adobe's James meller brings together experimental tools to show you how complex lawires work through responsive wireframe.

4. Multi-device layout patterns

When planning a responsive design, it may be of great help to you if you can see how others did it before. Therefore, Luke wroblewski's multi-device layout method lists many popular methods and connects them to the example, which may be of great help to you.

5. Style tiles

Samanatha Warren's style tiles proposed a new technology in the responsive design era, instead of using a hybrid design model. Uses something similar to a palette to display a summary of the progress of the design, without the need for in-depth granularity details.

Flexible/mobile grid-related tools

As mentioned earlier, the first component required for responsive design is flexible/fluid grid. the following describes some pre-built items. You only need to download them to quickly design more responsive websites based on them.

6. Golden Grid System

Joni Korpi is the one who developed the less framework and has recently released a new version of this reliable grid system. Because it is easy to adapt from 16 to 8 to 4 columns, it is regarded as "folding ". Golden grid system also has another feature. You can use a small browser to overwrite the grid on your page during the test.

7. foldy960

The talented men at Paravel released the 960. Gs modified version and used it as the basis for responsive engineering.

8. simplegrid

Designed by Conor Muirhead and based on popular responsive technologies, it is easy to learn and apply to your responsive site engineering.

9. 1140px CSS Grid

Another great responsive grid system is the 1140px CSS grid, which is made by Melboume designer Andy Taylor and can be scaled down from a wide desktop solution to a mobile application.

10. columnal CSS Grid System

Columnal CSS grid system is produced by Nick gorsline, creative director of pulp + pixels aka. It is based on 1140px grid system, but it has some additional advantages, for example, the Development Kit and wireframing template with a sketch framework, and the CSS debugging method.

11. semantic grid system

CSS Extension applications, such as sass and less, are becoming increasingly popular. semantic grid systems made by Taylor Tate use them to render the grid system the most widely, and declared that there are no unnecessary classes or elements. For more information, visit this link: http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/

12. Susy

Like semantic grid system, Susy of oddbird creates a grid system and does not apply to additional Markup languages or special classes. However, the target user of Susy is only sass.

13. gridpak

The gridpak developed by Erskine design is one of the latest responsive grid generators. It allows you to set your columns, constrain a series of power outages, and then output CSS, JavaScript, or PNG files, to ensure that your entire team can start work from the same starting point.

14. gridset

Gridset seems to be shrouded in a fog, because it was not actually released when the author wrote this article. However, this tool, made by Mark Boulton design, is a custom-committed, non-standard grid system that can store and manage the grid online.

15. A better Photoshop grid for RWD

Ellot Jay stocks recommends dropping the old 960 Pixel Grid fact standard and using a 1000 pixel standard, which makes percentage calculation easy to process. If you agree, you can use the PSD to expand the work.

16. Fluid Grids

If your design is highly professional, you need to create your own custom mesh, you can use the fluid mesh calculator of the distinguished young Harry Roberts who receives the. NET newcomer Nomination Award.

17. Responsive Calculator

Another pixel percentage calculator, but this Calculator made by Stu Robson is a step closer than others, you can generate CSS rules for you, this means you only need to copy and paste it to your style sheet.

Responsive graphic design tools

Another key component of responsive web design. The technology for obtaining fluid images is direct, optimizing performance and loading pages for different devices. This seems to be the biggest challenge in responsive web reality. The following are some related resources.

18. Responsive Images

The filament working group has come up with a way to send pictures of the right size, a screen-based solution. This experiment uses the corresponding move-first dimension and calls two different image size references in response.

19. Adaptive Image

Matt Wilcox was inspired by the responsive images tool and Created adaptive images to use PHP and some small JavaScript to servo images for user devices without additional markup language.

20. sencha. Io SRC (originally called tinysrc)

Sencha provides a cloud service that sends images suitable for User device sizes from the cloud. If you want to see how to use it, click the link.

Docs.sencha.com/io/src/

21. fittext

Another item of paraval, fittext. JS, is a jquery plug-in designed and adapted to the size of your device using the frontend-style Web response design. For details, see the link. Trentwalton.com/2011/05/10/fit-to-scale/

22. slabtext

Inspired by the fittext and slabtype algorithms, Brian McAllister's slabtext is a jquery plug-in that allows the bold text block to adjust the size in a responsive manner while still reporting the defined width.

Media Query Tool

It is estimated that you now have a policy to address the page layout when accessing different devices, fluid grid and fluid images. Now you need media queries to change the page element to a responsive state.

23. Respond. js

One problem with responsive design is that some browsers are too outdated to read media queries. Maybe this is not a problem for your target audience, but it is still a good practice for users of older browsers, respond. JS is made by Scott jehl. You only need to support the maximum and minimum width of the attribute. For more information, click the link. Http://filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_erer_6_8_and_more/

CSS3-Mediaqueries.js

This tool was created by Wouter van der Graaf, enabling Internet Explorer or other browser users to effectively test and apply various media queries.

25. Adapt. js

Nathan Smith, it's 960. author of the original gsgrid system version, he wrote adapt. JS is a script that can detect the size of a browser and be able to servo the style sheet required, just like media queries, but does not use media queries, this means that it can still run on the browser of the old version.

26. categorizr

This device detection is performed from a completely different perspective. Brett jankord's categorizr script assumes that all users are mobile devices, unless desktop browsers or tablets are detected. In this way, your service resources are more harmonious to various browsers.

 

Responsive design (and mobile development) template tools

The soul of an efficient responsive design workflow is to allow the template to facilitate the entire design process, so that the workflow can be moved earlier from the design browser to the next release. Most template tools integrate these tools into a package: a flexible grid, enhanced by scripting language, while realizing the philosophical idea of moving first and outputting content.

27. 320 and up

Andy Clarke's 320 and up is a mobile-first template tool that inherits many popular web design tools, such as less and bootstap. This tool is a lightweight agile method that can quickly build and run a site. You can also click the link to see our interview with Andy (http://www.netmagazine.com/interviews/andy-clarke-new-320-and), which explains more about the performance of the new version.

28. Gridless

Gridless is a template tool for HTML5 and css3. It serves as the basis for your response design. It focuses more on topology and cross-browser integration performance.

29. Skeleton

Unlike the two template tools described earlier, Skeleton Development Tools start with a minimal solution. Designed by Dave gamache, this tool is based on the 960.gs grid system to reduce the scale to the mobile field. Skeleton is also a great style framework and is suitable for building systems on it.

30. Bootstrap

Built on Twitter and now open-source, this is a framework and a series of components that are suitable for Quickly Constructing a site online, the core components of his second version are already responsive.

 

Plug-ins, shim and polyfill

(Note: shim and polyfill retain the original text, so as not to affect the keyword understanding)

Although browser and software are becoming more responsive, sometimes we have to use some additional tools to ensure a consistent user experience.

31. Responsive plugin

Marios Lubinski writes a WordPress plug-in to ensure that any current WP theme solution is responsive. It is not clear how this plug-in works at present, because this plug-in has not been completed at the time of writing this article, but it will be useful after it is done as it said.

32. overthrow

For desktop browsers, the processing of content in one place is good, but the old version of mobile browsers cannot. This polyfill, called overthrow, is produced by a diligent filament Working Group for access to different devices, ensuring that all mobile users can enjoy the best possible experience.

33. mediatable

This is the jquery plug-in made by Marco pegoraro, And the respond. JS works together to help you deal with how a large data table is displayed on a small screen device. It makes the bar more responsive and adds the display/hide function to enhance adaptability.

 

Test: 123...

Another important aspect of designing a workflow in response time is that you need to know your target device and solution and test it. The following describes some testing tools.

34. resizemybrowser

This is a testing tool made by front-end developer Chen Luo (which looks like a Chinese character). It comes with a lot of browser sizes that have been pre-prepared to help you test various browsers. Of course, if there is no proper size, you can also create the required pixels by yourself.

35. responsivepx

Similar to resizemybrowser, responsivepx is made by Remy sharp and can be used to load your page in a window, in addition, you can specify the width and height of the test to test the situation generated by your media query. You can also add breakpoints during design.

36. responsive design Testing

This is a test tool made by designer/developer Matt kersley, powerful to incredible: You just need to enter the URL of your designed responsive site, this tool can see the display results of different browser sizes.

37. The responsinator

You only need to enter a URL, and this responsive robot will show you the effect in many common device sizes, with the average efficiency of a non-emotional robot. Tama Pugsley and Andy hovey are now responsible for this tool.

38. Responsive. js

Another on-page Device Simulation simulator, responsive. JS allows you to quickly refactor different sizes by entering a URL. This tool is developed by the production team of the upcoming typercast app.

39. screenqueri. es

This is also a browser size testing tool, but this tool is made by Mandar Shirke. in different places, it has a set of extended mobile phones and tablets, the grid ruler makes measurement easier.

40. aptus

This is a test site app that can use a lot of predefined sizes, but aptus is based on the Mac system and can be easily obtained through the Mac App Store, adding many additional features, for example, convenient screenshots and offline support.

41. responsive design bookmarklet

Victor coulon made a simple and effective bookmarkdonefile, which is placed in the toolbar, you can also activate it without any need, and then you can switch between the normal screen size and different preset sizes and view the difference.

42. responsive design test bookmarklet

This bookmarks tool is made by Benjamin keen and supports a more custom style policy that allows you to define your device size and other sizes you want. After activating it, it will display various sizes you selected for easy comparison.

43. screenfly

This is a tool developed by quirktools. With this tool, you can test site effects for different solutions, including desktops, tablets, mobile devices, and TVs. Desktop testing is still limited to Safari. There are many options for tablet and mobile browsers, but TV browsers only support opera.

44. Media query indicator

Johan Brook provides a pure CSS method to test media queries, starting with a browser. This tool is easy to use and can be used for testing and running at breakpoints.

45. Shim

One of the tools used to redesign the Boston World Report, the poster boy of the RWD Movement (which may be an story and the translator doesn't know what it is) shim is a node. JS, which can run a page in the same WiFi network and support many different devices, making cross-device testing easier.

46. Drive-in

If you do not have a node. JS server deployment to support Shim, so this simple version called drive-in by Scott jehi has the same functionality as Shim, but it uses PHP, Apache and one. htaccess file.

47. Adobe shadow

Adobe continued to promote web technology and withdrew from this remote debugging tool. After shadow is installed, the Chrome browser needs to be expanded on Mac or Windows platforms. Now the Android and iPhone clients are added, and you can share the page experience between different devices.

48. Opera mobile emulator + Remote debug

Installing opera and operamobile emulator is a simple way to debug mobile pages. The two use remote debugging options for communication. The establishment process is simple and quick, and the test is more effective than WebKit.

Future inspiration

Do you want to know how other people design responsive functions?

49. mediaqueri. es

You may not have seen it yet, but the visits to this mediaqueri. Es site are continuously increasing, and you have to go beyond the responsive site.

50. @ RWD

Ethan Marcotte operates a Twitter account and releases the latest) RWD responsive page design) news and tools, as well as showcase Cases