Responsive Web Design: WEBJX collection of 50 responsive design tools

Article Introduction: before you start to set up a response site, if you can have a strong development tools will make your world a different style. In this article, Denise Javobs and Peter Gasston recommend 50 powerful tools to support your process of building responsive sites.

Before you start to set up a response site, if you can have a strong development tools will make your world a different style. In this article, Denise Javobs and Peter Gasston recommend 50 powerful tools to support your process of building responsive sites.

In Ethan Marcotte's article "Responsive web Design" and his best-selling book, the first to introduce three elements needed to build responsive sites:

1. Flexible layout, streaming grid
2. Response picture
3. Media inquiries

There is also a lot of literature covering the theme of responsive web design,

Initial tools

Before you start working on your site, it's a good idea to figure out the elements of the entire page and how they automatically adapt to different browser window sizes, because different devices have varying resolutions and screens, and avoid thinking about desktop application design in mind. And don't think about the rest of the response iterations (refer to Stephanie Rewis's comments) afterwards.

(Translator Note: In order to facilitate the reader to search for relevant information, the original text of the keyword is not translated, each tool is accompanied by a screenshot)

1. Responsive Web Desigh Sketch Sheets

A collection of responsive draft charts, designed by Jeremy P Alford, is an excellent starting point tool that can help you plan the transformation of various parts of your page in different solutions.

2. Responsive Design Sketchbook

If you prefer to keep the frame still, you might consider a thread-bound book containing 50 draft response drafts, produced by app Sketchbook.

3. Responsive Wireframes

One of the difficulties in making a response site is how the design works when you use wireframe to display the response. James Meller of Adobe has assembled experimental tools to show you how complex layouts work through responsive wireframe.

4. Multi-Device Layout Patterns

When designing a responsive design, it can be very helpful to see what others have done before. So Luke Wroblewski's multiple device layout, listing a number of popular ways, and connecting to the sample, can be of great help to you.

5. Style Tiles

Samanatha Warren's style tiles presented a new technology in the era of responsive design, rather than using a hybrid design model. Use something like a palette to show the progress of the design without needing to drill down into granular detail.

Flexible/mobile grid-related tools

As previously stated, the first component required for responsive design is Flexible/fluid Grid. Here are some of the things that have been pre-built, and you just need to download to quickly design a more responsive site on their basis.

6. Golden Grid System

Joni Korpi, who developed the less framework, 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 considered "folded". Golden grid system also has another feature that allows you to overwrite the grid on your page with a small browser while testing.

7. Foldy960

Paravel's talented men have released a 960.gs revision and used it as a basis for responsive engineering.

8. Simplegrid

Designed by Conor Muirhead, based on fiery response technology, it is easy to learn and apply to your response site project.

9.1140px CSS Grid

Another great response grid system is the 1140px CSS grid, made by Melboume's designer Andy Taylor, which can be scaled down to mobile applications with a lenient desktop solution.

[1] [2] [3] [4] [5] Next page