As responsive web design evolves, Brad Frost looks at some of the best tools, resources and thinking for crafting exceptional responsive experiences. At the best of times, it requires multiple rounds of discussions between clients, designers, and developers, resulting in multiple iterations of the design, and the website itself. Today, we’re going to give you the tools. Comprise of frameworks, services, and downloadable scripts, we think they are going to be a great help when it comes to responsive web development.
Tools have started to spring up to provide us with shortcuts and helpers for common responsive web design tasks. Let’s take a look at just few that I find the most useful. Note that this is by no means an exhaustive list, so if you have another tool to share, be sure to post a comment. If you like our art collection, so check out these other posts will interest you too: Beautiful Free Flickr WordPress Plugins, Best Free Online Brainstorming Tools, Cool Examples of Business Logo Designs and Free GUI Sets for Web Designers.
Macaw provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS. It’s time to expect more from a web design tool.
2. Semantic Grid System
Semantic Grid System is used to design responsive grid layouts. It uses pre-processed CSS extensions like LESS, SCSS or Stylus to deliver maximum efficiency. You can select column and gutter widths, choose the number of columns and switch between pixels and percentages.
The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. Columnal is an elastic grid, while some code inspiration (and the idea for subcolumns) are taken from 960.gs. Columnal makes responsive prototyping a little easier. It is 1140px wide, but since it is fluid, will respond to the width of most browsers.
4. Adaptive Images
Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embedded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.
5. Interface Sketch
If you’re designing a website or app, these simple templates are designed to help you sketch your ideas on paper. The templates are in PDF and contain multiple pages and layouts. Simply download a template, print out the pages you need and start sketching.
6. 320 and Up
320 and Up is a CSS media queries boilerplate, which serves to be the starting template for your responsive design. It follows a completely reverse approach than the several other boilerplate available.
7. Responsive Wireframes
Responsive Wireframes is an experimental tool created by James Mellers of Adobe. It is built with only HTML and CSS (no images or JS were used) which you can use to visualize how your responsive design would look like on actual browsers of various desktops and mobile devices.
Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.
9. Responsive Web CSS
Responsive Web CSS takes a slightly different approach. It lets you create a layout by adding div elements for each section of the page and then setting the size of each div depending on how you want it to appear across different devices. Once you have all the elements and sizes in place, you can download a skeleton HTML+CSS for your site.
Isotope is an amazing jQuery plugin, which proves to be very useful while designing a responsive design. It not only helps to rearrange the elements of a page when the browser window is resized or the screen size is smaller, but it also helps to filter those elements.