Highly Useful Tools and Resources for Responsive Design

With a huge amount of people using small screen devices to view the internet on a very regular basis, and that number simply growing year on year, designers have to have the knowledge, tools and resources to bring the people what they want and need.

We are not yet at a point of ignoring large screens – and may be we never will be, so the answer is responsive or mobile-first design that looks good whichever size screen it is viewed on. This list of tools and resources have been sourced to help designers at whatever level of responsive design they are, and the categories visited here are: Responsive Design Basics; Frameworks, Grids and Boilerplates; jQueries for Responsive Design; Testing Tools and Useful Sites.

Responsive Design Basics

Responsive Web Design: What It Is and How To Use It

This article, written by Kayla Knight for Smashing Magazine, is a set of guidelines for responsive web design and includes the following sections: The Concept of Responsive Web Design, Adjusting Screen Resolution, Flexible Images, Custom Layout Structure, Showing or Hiding Content and finally, A Showcase of Responsive Web Design.

Responsive Web Design - What It Is and How To Use It

Responsive Web Design Basics

This set of articles from Google Developers covers the following topics: Set the viewport, Size content to the viewport, Use CSS media queries for responsiveness, How to choose breakpoints. Written by Pete LePage.

Responsive Web Design Basics

Responsive Typography: The Basics

We have been told over and over again how important typography is in web design, and it is no different for responsive web design. This article from iA explains responsive typography in detail, step by step.

Responsive Typography - The Basics

10 Responsive Design Problems and Fixes

UX Magazine presented this article detailing some problems designers face with responsive design, and how to overcome them.

10 Responsive Design Problems and Fixes

Frameworks, Grids and Boilerplates

ZURB Foundation

Foundation is a family of responsive front-end frameworks that make it easy to design responsive websites, apps and emails that look good on any device. It is semantic, readable, flexible and completely customizable.

ZURB Foundation

Bootstrap

Bootstrap is the most popular HTML, CSS and JS framework for developing responsive, mobile first projects on the web. It ships with vanilla CSS, but its source code utilizes Less and Sass. You get extensive documentation for common HTML elements, dozens of custom HTML and CSS components and jQuery plugins.

Bootstrap

Responsify

Responsify is a browser-based tool that allows you to create your own responsive template. It acts as a foundation for you to build upon. You can customize the grid to suit your content, rather than trying to make the content fit the grid.

Responsify

Skeleton

Skeleton is a lightweight responsive boilerplate, using around 400 lines of CSS. The grid is a 12-colum fluid grid with a max width of 960px, that shrinks with the browser/device of smaller sizes.

Skeleton

jQueries for Responsive Design

Intention.js

What should an element’s classes be on mobile vs tablet? Where should advertising markup be placed when viewed on a desktop browser? Does the page require an alternate slideshow widget on touch-enabled devices? These are all scenarios that Intention.js can handle, altering the page based onusers’ devices. Context.js creates a set of common page contexts for width thresholds, touch devices, high-res displays and a fallback. You can download the Intention.js and Context.js bundle from this page.

Intention.js

JResponsive

A simple jQuery plugin that allows you to add a dynamically-resized layout to any page or element, customize the layout the way you want with or without top, right, left or bottom navigations.

JResponsive

ReStable

ReStable is a very simple and lightweight jQuery plugin that makes tables responsive, making them collapse into ul lists.

ReStable

Restive.js

Restive.JS is a JQuery Plugin that helps you quickly and easily add features to your Web Site to enable it respond and adapt to virtually every Web-enabled Device. Using a combination of Device Detection, Advanced Breakpoints Management, and Orientation Management, Restive.JS will give your Web site an uncanny ability to stay robust in the face of a constantly changing device landscape.

Restive.js

bigSlide

bigSlide is a very lightweight jQuery plugin for creating off-screen slide panel navigation. You can slide any element using either the default .push class, or a class of your choosing.

bigSlide

FitText

A jQuery plugin for flexible headlines and display text. FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

FitText

FlowType

FlowType helps to keep content legible by changing font size based on a specific element’s width, allowing for a perfect character count per line at any screen width.

FlowType

CollagePlus

This plugin for jQuery will arrange your images to fit exactly within a container. You can define the padding between images, give the images css borders and define a target row height.

CollagePlus

OWLCarousel

OWLCarousel is a touch enabled jQuery plugin that lets you create a responsive carousel slider. It is fully customizable and includes multiple sliders, CSS3 3d transitions and customizable controls.

OWLCarousel

SlidesJS

SlidesJS is a responsive slideshow plugin for jQuery. It is touch-enabled and uses CSS3 transitions.

SlidesJS

ResponsiveSlides

Another responsive jQuery slider, this one uses elements inside a container. The advantage of this slider is that it is very lightweight (1.4kb minified and gzipped).

ResponsiveSlides.js

FitVids.js

A lightweight, easy to use jQuery plugin for fluid width video embeds.

FitVids.js

Testing Tools

Am I Responsive

A method of testing your site for how it looks on different screen sizes. Very quick and a pleasant result.

Am I Responsive

Designmodo Responsive Test

This is another easy to use and quick responsive test. Simply input the URL of the site you wish to test, then you can use the slider to drag the screen size or input the dimensions, or use their list of devices which includes the most popular brands and sizes.

Designmodo Responsive Test

Useful Sites

Can I Use

Can I use provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

Can I Use

Responsive Resources

A very comprehensive list of responsive resources collected by Brad Frost, and available through GitHub. The resources are split into sections, including: Strategy, Design Tools, Layout, Media Queries, Typography, Images, Components, Development, Testing, Content Management Systems and Email.

Responsive Resources

Responsive Design Knowledge Hub

Another list of responsive tools and resources, this one is brought to you by Ugurus, and you will find the resources divided into the following sections: Definition, Core Concepts, Frameworks, Selling, Tutorials & Tools, Examples & Inspiration, Workflow & Processes.

Responsive Design Knowledge Hub

Conclusion

Whether you are just starting to embark upon responsive design, or you need to brush up your skills or even if you just need the help of jQuery plugins or code snippets, it’s all here!

Hopefully you will find the information in this article of great help to you one way or another – so don’t forget to bookmark it for future reference.

Please share your opinions on any of the above tools and resources for responsive design, or links to any instances where you have used one or more of those we have featured.

Advertisement