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.
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 like Bootstrap 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.
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.
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.
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.
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.
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.
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
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.