20 Best Responsive Web Design Tools

As mobile devices have become a primary gateway to the Internet, developers have sought a way to make their websites friendly to virtually every screen size and device type, using either adaptive or responsive design. Over the past year or so, responsive design has emerged as the clear standard for creating a website that can scale its content and images to tablets, smartphones, and traditional desktop computers. For those looking to embrace this method of web design, there are a few key tools that can make development and deployment easier and a bit quicker.

1. SimpleGrid

Simple Grid

Every good responsive design starts off with a solid grid that determines which content will get wrapped, reduced in size, or pushed down the page, as the screen size gets smaller. There are a number of great tools for accomplishing this, but SimpleGrid is easily one of the best. The system is designed to work with basic, CSS-driven frameworks, and can be used to generate a basic responsive grid with as many as six columns. With built-in CSS classes and a robust amount of documentation, developers will find that this is the best foundation on which to build their more mobile and responsive design.

2. Modernizr

Modernizr

Responsive design demands browser compatibility with the latest CSS and JavaScript technologies, but many browsers just don't support those things. For example, Internet Explorer didn't even support the CSS3 standard until version 10, even as competitors like Safari, Chrome, Firefox, and Opera had implemented support years earlier. The goal of Modernizr is to detect incompatibilities with today's web standards and implement conditional code to present a cohesive and visually identical design to users of older browsers. It is perhaps the most advanced solution for doing this, and is present on virtually all responsive website designs currently being served to everyday visitors.

3. Bootstrap

Bootstrap

The Bootstrap framework is a key overlay for a grid-based layout, enacting sensible design elements that cater to users of smartphones, tablets, and desktops alike. Best of all, it comes with a unique "Customizer" feature that can be used to customize virtually every included design element. This makes it a sensible option for first-time responsive developers or those new to web design entirely. The system is developed by the folks at Twitter, and it offers one of the most robust developer communities of any major framework currently available. Furthermore, Bootstrap is one of the most popular and widely used frameworks on the market, implemented on a number of top-tier websites around the world.

4. Fluid Responsive Slideshow

Modernizr

Sliders and jQuery-based presentation tools have become a hit with developers, but many are not compatible with the goals of responsive design. For those users who create and publish content with WordPress, the Fluid Responsive Slideshow is a great way to bring desktop-style slides and presentation to mobile devices using a combination of HTML5, CSS3, and light JavaScript. The solution integrates easily into WordPress, pulling from existing content and transforming it into a robust slideshow that will be cross-platform compatible and easily scalable to both tablet screens and smaller smartphone devices.

5. Genesis Framework

Genesis

WordPress users have long sought a reliable framework built with their content management system in mind, and the Genesis Framework is exactly that. The framework was built by an independent template development company and, perhaps best of all, it comes with a vast WordPress control panel interface that allows for intricate column control, design modification, and more. Thanks to integration with a large number of templates and a column-based grid system that caters to desktops first, then mobile devices, the Genesis Framework is among the most popular options for WordPress-specific designs and portable content creation.

6. Responsive Slides

Responsive Slides

For those designers who are not currently using the WordPress content management system, Responsive Slides is perhaps the best way to bring a responsive, jQuery-style slider to a design that will be viewed on many different devices and screen sizes. The JavaScript implementation of this responsive slider is barely a single kilobyte, which means it won't weigh down page file sizes or loading times on slower mobile connections. With a variety of options and areas of implementation, this unique slider deserves a look by those creating a rich, responsive alternative to a desktop-only design.

7. Frameless

Frameless

Most grids used in responsive designs are "fluid" meaning that they scale with the design as it gets smaller. Some developers prefer to simply "cut off" content and push it down when the browser viewport reaches a certain reduced width. When this is the case, Frameless is the best option. It allows for an unlimited number of columns that will stretch infinitely, with CSS-designated break points that will give the design a more static feeling on each platform.

8. Adobe Edge Inspect

Adobe Edge

If a responsive design doesn't properly scale down when a visitor comes to a website via a smartphone or tablet, then all of the time spent learning about grids, columns, and frameworks will have been for nothing. Instead of taking a chance on success, developers should consider using Adobe's "Edge Inspect" tool. The tool can be used to go to a website on its own, slowly scaling down and checking the site for effective responses as the screen sizes get smaller, rotate into landscape mode, and perform other common tasks done by today's smartphone and tablet users.

9. RWD Calculator

RWD

Getting the right column width, element size, margin, and padding, can be pretty tough within the confines of responsive design. For those developers who don’t want to spend the time doing the math themselves, the RWD Calculator can easily evaluate a few pieces of data for a given design element and then return the perfect width, height, margin, and padding, so that the element doesn't force the website to be too wide or unusable on smaller devices.

10. The Responsive Grid System

Responsive Grid

The Responsive Grid System, which sometimes is called Responsive.gs by developers, is a unique grid-based design method that can expand up to 24 columns in width. The system is designed as a "mobile first" implementation of responsive design, setting it apart from the many desktop-first grid layouts that are used by a larger number of developers. For those catering more specifically to mobile devices, this is a great way to design content that is mobile-friendly from the ground up.

11. The 1140 CSS Grid

1140

The 1140 CSS Grid uses a 1140px implementation of responsive design that is designed to work perfectly on a desktop display of 1280px in width or larger. When that display gets smaller, the design becomes fluid and naturally adapts to work with even the smallest viewports. It's yet another way to create a solid and responsive foundation for more complex and CSS-driven web designs.

12. Responsinator

Responsinator

For those who are not sold on Adobe's Creative Suite and Creative Cloud products, Responsinator is a solid, web-based alternative to the Edge Inspector. The tool can show how a website will look on any viewport, ensuring that the design is bug-free and ready to go on smartphones, tablets, and desktops alike.

13. Adaptive Images

Adaptive Images

When a site's written content needs to be reduced in size to meet the smaller viewport found on a smartphone or tablet, images must follow suit. That's actually easier said than done, as images don't naturally scale very well, or at all, in most cases. For several years, early responsive developers have used a series of hacks and tag modifications that have gotten the job done in a sloppy manner. Now, with Adaptive Images, that is no longer the case. The script actually detects the device's viewport size and, with the help of a PHP script and the .htaccess file, scales images and uses better versions for each device's width and display. The days of complex, standards-breaking hacks are over.

14. Foundation

Foundation

Where Bootstrap is customizable and easy to learn for new developers, Foundation is the polar opposite. The Foundation Framework, while easy to learn, is the most advanced system currently available to mainstream developers. With a number of mobile-first design elements and column implementations. Foundation can be used to create truly unique sites that don't easily show off their column-dense design. For those that believe in unconventional design that breaks the mold, Foundation represents the best ally for making such design available to a wide segment of mobile device users around the world.

15. Adobe Dreamweaver CS6

Adobe

Adobe's latest version of Dreamweaver comes with a fluid, responsive design template that integrates media queries and CSS3 design cues that will make developing responsive layouts easy for those new to designing in the first place. Thanks to the WYSIWYG nature of Dreamweaver, and the fact that it integrates perfectly with Adobe Edge Inspector, it's possible to see a design develop visually on all viewports at once.

16. Fluid Grid Calculator

Fluid Grid

Getting the right grid width is pretty tough, especially for developers who aren't used to the nature of responsive web designs. The Fluid Grid Calculator determines the appropriate grid width for each need, making it easier to develop columns and an appropriate CSS file.

17. Retina.js

Retina

Learning how to scale images down to a smaller device screen is really great, but it still represents a unique problem when catering to iOS devices. While these devices do have smaller screens, their larger retina display means that "scaled" images will appeal choppy, fragmented, and visually less pleasing. That's where Retina.js comes in. Developers can place the JavaScript at the top of their HTML document and use it to automatically replace standard resolution images with retina counterparts. It's all done by adding the Apple-approved "@2x" suffix to any image in any directory. The script will look for these images and automatically replace them.

18. Retina Images

Retina

No development approach should be without competition, and that's exactly what Retina Images offers to Retina.js. Increasingly, developers are sensitive about including a bit too much JavaScript into their designs. To meet this concern, Retina Images uses a cookie, a PHP file, and the .htaccess file, to determine the pixel ratio of a device and deliver the proper images to users if they happen to be using an iOS device with a retina display. It should be noted that both Retina.js and Retina Images can detect retina MacBook Pro laptops as well, and they'll serve retina graphics to those devices just as they would to iPhones, iPods and iPads.

19. LESS Framework

Less

Though it has been replaced by Frameless in many circles, the LESS Framework is still offered to developers and it represents a really great way to create a simple, responsive design using a large number of columns. Perhaps best of all, LESS was one of the first frameworks to promote different designs for portrait and landscape modes on today's mobile devices. It remains one of the only solutions for doing so, although the Frameless successor has enabled this functionality as well. For those looking for something a bit more basic than Frameless, LESS Framework is a solid option.

20. Respond.js

Respond

No responsive design is worth risking functionality in early versions of Internet Explorer, as well as any other browser that doesn't support CSS3. CSS3, as many people know, is key to using things like media queries, CSS-based rounded corners and drop-shadows, and many other unique design elements that don't even require graphics. The Respond.js framework detects these limitations and compensates for them, essentially bringing CSS3 compatibility to browsers that have long been abandoned by Microsoft, the Firefox team, and other development circles.

A Wealth of Tools and Information for Those Embracing Responsive Design

From bare bones grid generation to advanced frameworks and design tools, it's never been easier to develop an engaging and unique responsive design. Developers can take their pick of numerous frameworks, a few great grid options, and tools, that will make it possible to scale images and check for browser incompatibilities. With the right combination of the tools mentioned here, web designers will find that responsive design is far less intimidating, and much more easily implemented, than the wider web development community would have them believe.

By: David Walsh

Written 2013-05-09 (Updated 2016-10-10)
david for reviews7

Written by David Walsh


David Walsh is the editor in chief here at Web Hosting Search. Having been in the industry for many years now he knows pretty much everything about everything. At least that's what he keeps telling everyone at the office. So, don't hesitate to drop him a line  if you've got a question - david(a)webhostingsearch.com.

Share your thoughts

Show all related articles..

Best Value Hosting 2016


Why wait? Get today's best deals now!