• Tweet

• Tweet

Now a days usage of Tabs and Smart phones has increased heavily. So, Directly or indirectly Demand for Responsive website design is more serious than ever. This trend is excepted to be increased as the mobile internet users increase, due to heavy demand web designers has become hot cakes in the present market. In this post we provide you 20 necessary tools while playing with responsive web design. Enjoy..

1. Simple & lightweight responsive slider

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using list items inside .It works with wide range of browsers including all IE versions from IE6 and up. It also adds CSS max-width support for IE6 and other browsers that don’t natively support it. Only dependency is jQuery (1.4 and up supported) and that all the images are same size.

2. Responsinator

3. Responsive Design with CSS3 Media Queries

Screen resolution nowadays ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn’t work any more. Web design needs to be adaptive.

4. Responsive CSS3 Slider Without JavaScript

The actual slider is much like any JavaScript slider. It floats all of the content areas (articles) next to each other. And then hides the overflow. We then animate the margin of the inner div, so if we have 5 articles, moving the left-margin -100% would give us the second article.

5. Blue Berry

Blueberry is an experimental open source jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

6. Hammer JS

A JavaScript library for multi-touch gestures.

7. Responsive Grid System

The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.

8. Panoramica

Panoramica is built with the intent of adapting to as many window sizes as possible. It has a fully fluid layout that gives it tremendous flexibility, allowing you to cater to both large and small screens alike. Its polished portfolio heavily emphasizes the use of images, displaying a clean slideshow in every portfolio item. And of course, you can customize its appearance through its extensive options panel.

9. Seamless Responsive Photo Grid

Let’s say you have a bunch of images you want to display, and the goal is to get them edge-to-edge on the browser window with no gaps. Just because you think that would be cool. They are of all different sizes. You don’t care if they are resized, but they should maintain their aspect ratio.

10. Style Tiles

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

11. The Semantic grid system

12. Mattkersley

This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website’s URL into the address bar at the top of this page (not your browser’s address bar) to test a specific page.

13. Responsive PX

14. Yoko

A responsive WordPress theme Yoko which was designed by talented designers Ellen and Manuel from Elmastudio and released for the Web design community. Of course, the theme is absolutely free to use in private as well as commercial projects.

15. Get Skeleton

Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

16. CSS Grid

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

17. Simple Grid

Simple Grid is prepared for 4 distinct ranges of screen size: screens < 720px, screens > 720px, screens > than 985px, and screens > than 1235px. So people visiting your site will receive a layout that’s tuned to the size of their browser window. Say goodbye to horizontal scrollbars.

18. Retina

Retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.

19. Mobile Boiler plate

A best practice baseline for your mobile web app.

20. Photo Swipe

Image Gallery for mobile and touch devices like iPhone, iPad, Android, Blackberry 6 and Desktop all supported.

Hope you all like the above collection, Please post your valuable comments. Thank you.

Author Bio - James is the webmaster of WebHostingJuice. He selects the best web hosting and has selected BlueHost as the #1 hosting. He will also show you the best discount for BlueHost. Read his BlueHost review to learn more