Web designers always love those good and new jQuery plugins or tools that can make their work easier. Today’s online market has been divided into hundreds of thousands tiny segments. So as the tools for web designers and developers, one small requirement could bring out a new plugin or library to satisfy. In this article, we rounded up some latest new tools and plugins that have responsive layout issue considered. Such as navigation menu, tables, sliders, etc., which are ready to put in your next responsive web project. Plus there are new tools dedicated to responsive grid generation and wireframing. Here we go.
Before head to these responsive tools, you might consider to look over our previous articles on responsive frameworks, typography tutorials and responsive website examples.
- 14 Responsive Web Design Frameworks Easy to Start With
- 21 Essential Web (Responsive) Typography Tutorials and Tools
- 21 Inspiring Unique Responsive Web Design Examples
RefineSlide is a simple jQuery plugin for displaying responsive, image-based content that has many awesome animation effects. It uses CSS transition wherever possible to make suitable for varied performance across browsers and platforms. You can check it in your browser on this demo page.
This simple JS/CSS combo will let your tables adapt to small device screens without everything going to hell. Built by Zurb, which is the creator of Foundation (A great responsive front-end framework). They made Responsive Tables specifically for Foundation but would work just fine with any responsive site. Check out the example table.
HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it’s container. If you already tuned your site into responsive grids but the navigation menu is the only pain-in-the-ass, this plugin might save you time and automatically fits the browser length.
Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3. It works with all major latest browsers and of course fallbacks for old browsers.
A tiny jQuery plugin that automatically converts menu list item navigations to a select dropdowns for small screen. It also automatically selects the current page and adds selected=”selected” for that item.
Not including those fancy animations and transitions means 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. And it’s fully responsive.
Ideal Forms is the ultimate framework for building and validating responsive HTML5 forms. It is fully responsive that adapts to the container, no css media queries needed. It’s recently updated with responsive issue and support hidden fields. Check out the form demo.
Responsify is a browser based tool, which allows you to create your own responsive template. Think of it as a foundation for you to build upon. You can customise the grid to suit your content, rather than trying to make the content fit the grid.
Style tiles by Samantha Warren is not a wire framing tool and better be defined as a design approach/process. I reckon this process is already been used by many designers but hasn’t been ”standardised” like this. You can download the PSD from the website and start to try this kind of “Present clients with interface choices without making the investment in multiple photoshop mockups.”
There are also plugins like Wookmark(Fluid Grid of Images), FixText, SlabText that has responsive layout considered, which we already covered in 40 Best jQuery Plugins Every Web Developer Should Have. You might want to check them out as well.