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 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 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.
10 Responsive Design Problems and Fixes
UX Magazine presented this article detailing some problems designers face with responsive design, and how to overcome them.
Frameworks, Grids and Boilerplates
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.
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.
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.
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.
jQueries for Responsive Design
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.
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.
ReStable is a very simple and lightweight jQuery plugin that makes tables responsive, making them collapse into ul lists.
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.
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.
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.
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.
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.
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.
SlidesJS is a responsive slideshow plugin for jQuery. It is touch-enabled and uses CSS3 transitions.
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).
A lightweight, easy to use jQuery plugin for fluid width video embeds.
Am I Responsive
A method of testing your site for how it looks on different screen sizes. Very quick and a pleasant result.
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.
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.
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 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.
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.