85 Top Responsive Web Design Tools
As the mobile market continues to grow, demand for responsive website design intensifies. This has introduced a new set of tools, 10 of which we've listed below, to help lay out, design, code and plan a responsive website.
While some may overlap, each deserves a spot on the list; when combined, they can help you craft a website that provides an optimal viewing experience for users on all devices. (Along with each recommendation is a list of alternative tools that may be useful.)
If you are a designer or developer, what are some of the indispensable tools in your responsive toolbox? Please share your recommendations with our readers in the comments, below.
1. Gridset
Developed first as an internal tool that has now grown into a full-fledged product, Gridset lets web designers and developers design, prototype and build custom, responsive grid-based layouts for their projects. It can create any type of grid you require, from regular columnar grids (such as those in CSS frameworks likeBootstrap or 960.gs), to asymmetrical, compound, fixed, fluid and responsive grids. It even lets you create a library of your own grids, with a variety of presets available.
The beauty of Gridset is how fast it will allow you to build responsive prototypes (without all the calculations), providing all the measurements and tools to integrate with your existing markup. You can tailor specific grids across breakpoints you define, and create PNG files of your entire grid set, so you can view and work on your grids in the design tool of your choice.
Alternatives: Frameless, Tiny Fluid Grid, Gridpak, SimpleGrid, Responsify,Responsive.gs, Golden Grid System and Photoshop Grid for Responsive Design.
2. Bootstrap
Built by two guys at Twitter as a way to provide a clean and uniform solution to the most common, everyday interface tasks they faced as developers, Bootstrap is a "sleek, intuitive, and powerful front-end framework for faster and easier web development." It uses a 12-column responsive grid system, and features dozens of components, styles and JavaScript plugins, with basic global display, typography and link styles all set.
Using the Customizer, you can really make Bootstrap your own, and customize variables, components, JavaScript plugins and more. Bootstrap can be expanded, with a wealth of resources available, to include themes and interface-building tools.
3. Adaptive Images
Previously, making your website images responsive usually meant using a "hack-around," such as rewriting the "src" attribute or using the "noscript" tag. But there are now several tools to make this a much simpler task, including Adaptive Images, which uses one htaccess file, one php file and a single line of JavaScript to detect your visitor's screen size. It then automatically creates, caches and delivers device-appropriate rescaled versions of your embedded HTML images. What's more, it is entirely non-destructive, and works on existing websites and markups — without the need to edit anything.
Adaptive Images works on the premise that you are already using the highest-resolution images on your site, and also offers a ton of customization options. You can set breakpoints to match your CSS, set the quality of the generated JPGs, set how long browsers should cache the image for and much more.
4. Responsive Design Testing
Building a responsive website means constantly testing how it displays across mobile and tablet devices. You could resize the browser yourself, or use a browser extension or tools within your IDE; but there is an ultra-simple tool that allows you to see how a page displays on different screen sizes, in a single view. The Responsive Web Design Tool from Matt Kersley works by entering your website's URL into the address bar to test a specific page. The screen and device options are 240 x 320 (small phone), 320 x 480 (iPhone), 480 x 640 (small tablet), 768 x 1024 (iPad – Portrait) and 1024 x 768 (iPad – Landscape). However, the content width cannot be pixel-perfect, as 15 pixels have to be added to the frame to accommodate the scrollbars.
You can share the results of the test with others by adding any URL to the end of the testing page address (e.g. http://mattkersley.com/responsive/?mashable.com). One major benefit of this tool is that it can be self-hosted(available on GitHub) by downloading and installing it on your own site. You can then navigate through the frames that your website appears in, testing the entire site effortlessly.
Alternatives: Screen Queries, Screenfly, Responsivepx, Responsinator,Responsive Viewport Responsive.is, and Resize My Browser.
5. FitText
As content scales according to a user's viewport, the text will naturally wrap as the container is narrowed; but this often causes widows, orphans or your headlines to look rather ugly, and can even break the entire layout. This is where FitText comes in: It's a fantastic jQuery plugin that makes your finely tuned text inflatable. It auto-updates the font size according to the width of the element wrapping it, so you can achieve scalable headlines and a non-broken layout that can be caused by font-sizing issues. FitText works perfectly with Lettering.js or any CSS3 property thrown at it. There are options to fine-tune the text, including the ability to set min-max sizes and the level of scaling. For those that are opposed to "window.resize()," Chris Coyier created a fork of FitText that limits the number of window-resize events.
As the plugin ignores the font size you specify in the CSS file (body tag), you should set one as a fallback, in case JavaScript is turned off. Equally important is making sure the H1 tag has a display block with a specified width. Please note that FitText is only for headlines, and shouldn't be used with paragraph text.
6. Respond.js
Media Queries are extensions of CSS3, supported by most modern browsers; they allow you to specify when certain CSS rules should be applied. But one disadvantage of using media queries is that as they are part of the CSS3 specifications; they are not supported in older browsers such as in IE8 and below. With Respond.js, this problem is solved, as the script makes min-width and max-width work in IE6, 7 and 8, and it should also work with other browsers lacking support.
The script itself is incredibly small and lightweight (only 3 KB minified and 1 KB gzipped). It works unobtrusively, and doesn't rely on any other scripts or frameworks to run. It works by requesting a clean copy of your website's CSS via AJAX, and then translates any media queries it finds into equivalent JavaScript for browsers that don't support media queries directly.
7. Responsive Slides
An incredibly lightweight jQuery plugin (only 1 KB minified and gzipped) that creates a responsive slider using list items inside a single container, Responsive Slides works with a wide range of browsers, including IE 6 and up. The plugin is dependent on the images being the same size and jQuery 1.6 and up being used. The plugin uses CSS3 transitions with JavaScript fallback, and allows captions and other non-HTML elements inside the slides. There are settings for transition and timeout durations, with multiple slideshows supported, as well as automatic and manual fade.
While Responsive Slides keeps things simple, there are still a wealth of options and possibilities to customize the plugin, including optional "before" and "after" callbacks, separate pagination controls, a random order setting and the choice of where to append the controls.
Alternatives: Flex Slider, Slides.js, PhotoSwipe, Supersized, Camera,RefineSlide, Blueberry Sequence.js and Galleria.
8. Wirefy
Flat, static wireframes aren't particularly useful to show a client how responsive your design is, or what functionality is being suggested. Instead, using a rapid prototype approach may be more beneficial. Wirefy is a collection of functional responsive HTML snippets and templates that scale as the browser is resized (working across multiple devices). It builds on tools such as the Frameless grid system and Bootstrap, and uses CSS media queries that adapt to different device resolutions. It allows you to experiment rapidly with responsive wireframes, and lays a foundation for the design (while staying design agnostic), without losing sight of the content's importance.
Built on a 16-column base grid, it is packed with UI elements and styles such as typography, tables, images, forms, buttons, tab panel, breadcrumb system, paginator, menu, slideshow and much more. When compared to other frameworks, it is stripped down and doesn't focus on fancy components, but rather focuses on the users, and how they will experience your content on various devices.
Alternatives: Froont, Interactive Style Tiles, Responsive Sketch Sheets,Responsive Wireframe Template, Interface Sketch Templates, Responsive Device Diagrams, Wirify, Responsive Design Sheets, Responsive Wireframes,Webstiles, Responsive Design Sketchbook and Style Prototypes
9. Responsive Tables
Data tables in responsive design can be problematic: They can be wide and must cater to large, complex amounts of data that need to be kept together to make sense. When the viewport is adjusted, your table can suddenly look very ugly — either being too small to read easily, or zoomed in too far, requiring scrolling. But ZURB offers a simple JavaScript/CSS combination to let tables adapt to small devices and tablets without breaking your responsive layout. It works by taking the first column, which is often the unique key for a table, and "pinning" it to the left of the table, allowing you to scroll the other columns under it. This means the user is able to see the entire table.
It's a lightweight package containing two key files: responsive-tables.js and responsive-tables.css. To use it on any data table in your markup, you simply need to attach a class of .responsive, and the CSS and JavaScript will do the rest. From there, the tables are modified client-side when the window is smaller than a regular table.
Alternatives: Responsive Data Tables, Stackable.js, Footable, Responsive Tables, Responsive Tables, Responsive SEO Friendly Data Tables, Responsive Approach for Data Tables and RainbowTables.
10. FlevNav
With responsive design now at the forefront of web design, and the ever-increasing use of mobile and tablet devices, the choice of a navigation strategy is now a wide-reaching decision. It needs to be as carefully planned as your content architecture. FlexNav is a jQuery plugin that takes a device-agnostic approach to complex site navigation. It is a mobile-first concept using media queries and JavaScript to create a menu with drop downs. It features multiple nested sub-menus, with support for em units and tap targets to reveal sub-menus for touchscreens.
It's simple to set up: Start with an unordered list, add in the appropriate class and data attributes (you can also use em units), add flexnav.css to the head of your document, insert jquery.flexnav.min.js before the closing body tag and initialize FlexNav right before the closing body tag. The default speed can be changed, with the plugin being supported by most modern browsers.
Today, HTML5 is taking the world by storm as it is one of the most widely
