10 essential responsive web design tools

10 essential responsive web design tools

Nowadays, every new site I visit is responsive. It feels like this adaptable way to deal with building for a multi-gadget web has turned into the standard instead of the exemption. In the event that you think of it as your business to assemble a more future-accommodating web, then these tools will offer you some assistance with accomplishing that objective. Some of them are more particular to the sorts of difficulties we confront in responsive work. Some are less specifically related, yet at the same time entirely applicable.

At long last, these tools are not requested by need. Instead, I've tried to select tools that span all the tasks we face, from design to development.

---

01. Content Priority Guide

A content priority guide is part content modeling, part stripped-down wireframe, and useful throughout developing a site.  A few months ago, I was happily managing one of my first Sparkbox web projects. I did the content audit and had an approved architecture.

The content priority guide identifies all the content on each unique page of a site. It breaks the content into items with elements and puts them all in their priority order using only text.

The content priority guide highlights what content is shared across the site. As you build more and more templates, you discover what content needs to live on the different pages of the site and where you have common elements shared across pages that need special reuse attention in a CMS.

The content priority guide helps you realize how you should structure your content within your CMS. Knowing the content well allows you to understand when something is uniquely identifiable, such as date and location, versus when it’s a text field that could feature a variety of content. Whether you use separate text fields or inline editing, you’ll be much happier if you find ways to chunk content in a CMS that lets you share content everywhere.

---

02. Pattern Lab

In chemistry, atoms are the basic building blocks of matter. They have distinct properties and can't be broken down further without losing their meaning.

Translated to interfaces, atoms are basic tags, such as form labels, inputs or buttons. They also include more abstract elements like color palettes, fonts, and animations. Atoms are abstract and aren't often terribly useful on their own, but they provide a useful reference and allow you to see all your global styles laid out at a glance.

In chemistry, molecules are groups of atoms bonded together, which take on new properties as a result.

In interfaces, molecules are groups of elements that function together as a unit. For example, a form label, search input, and button atom can combine them together to form a search form molecule. Building up from atoms to molecules encourages a “do one thing and do it well” mentality, and encourages creating reusable interface patterns.

---

03. Sketch

Vectors mean scalability. Sketch’s Vector shapes easily adapt to changing styles, sizes and layouts, allowing you to avoid a lot of painful hand-tweaking. Sometimes though, you still need to account for physical pixels. Sketch supports this, meaning that you can fine tune when you need to.

In Sketch, every shape you create is an item in the Layers List. No more hidden paths.

With our flexible boolean operations, you can combine paths to create complex shapes, while all the parts stay 100% editable. Working on a large document? Name and group layers to keep things organized, then search by name when you need to find something.

---

04. Sass

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

---

05. PostCSS 

If you think CSS preprocessing is cool, you should check out what's being done with PostCSS. The idea is simple: it's a JavaScript-based tool for 'transforming' your CSS. The most popular PostCSS plugin seems to be Autoprefixer, which parses your CSS and adds vendor prefixes to the necessary rules by checking Can I Use for support. This makes a large portion of frameworks such as Compass unnecessary.

What I love about the concept of PostCSS is that we can polyfill any of the coming CSS features based on their not-yet-implemented specifications. This is incredibly exciting and you can do it today using cssnext – another PostCSS plugin.

---

06. Chrome DevTools

Just as most modern browsers are constantly being developed, so are the developer tools that ship with them. Recently, Chrome has added a few features which I've found very useful in responsive web design. Here, I want to highlight three specific features which I think are worth looking at.

These are most easily accessed by toggling 'device mode' in the Chrome DevTools. You get there by inspecting the page and clicking the little 'phone' icon in the top-left of the inspector, next to the search icon.

---

07. Divshot

 

Divshot is a static web hosting platform. Everything served by Divshot is a static file: HTML, CSS, JS, and images. Static web hosting is great for landing pages, JavaScript applications (like those using AngularJS, EmberJS, or Backbone), blogs, and more. If you aren't familiar with the difference between static hosting and something like Ruby on Rails or PHP, this article explains the difference.

---

08. BrowserSync

Enter BrowserSync; a free, open source tool for testing and debugging sites across all the devices in your testing lab. Not only does it sync the URL of any browser, it also syncs scroll position, clicks, form inputs, toggles and submits, and refreshes or injects CSS as you make changes. It comes with a slick UI (available by default at localhost:3001) and includes the open source project weinre which enables you to remote debug any of the devices connected to your localhost.

BrowserSync has an official Grunt plugin and works seamlessly with Gulp. It's also got an API for those looking to develop other integrations. When you're dealing with today's web, BrowserSync is seriously useful. [For more on BrowserSync, check out our tutorial in the next issue].

---

 

09. Skitch

Evernote builds apps and products that are defining the way individuals and teams work today.

As one workspace that lives across your phone, tablet, and computer, Evernote is the place you write free from distraction, collect information, find what you need, and present your ideas to the world. Whatever you’re working toward, Evernote’s job is to make sure you get there.

---

10. RICG

The folks that participate in this group are largely responsible for the new <picture> element, along with the new srcset, and sizes syntax. What has me really excited, is that the next project they intend to tackle is a solution for element queries.

Element queries will enable us to selectively apply styles based on the width of the containing element, not just the width of the viewport or device. Combine this with the ideas of pattern-driven design and new specs like Web Components and the future is looking pretty bright!