Ten Tools for Responsive Development

If you haven’t started thinking about responsive design yet, then I obviously haven’t nagged you enough. Responsive design and development is where our thoughts need to be.

Right now, to be fair, it’s just desktop and mobile. But soon enough, expect that we’ll be designing for smart TVs as well which will (in my opinion) mark the moment that the last nail gets driven into the coffin of fixed-width web design.

Before your site ends up six feet under, give it a last minute jolt with the digital defibrillator. Check out these ten tools for responsive design and development.

Required Reading

A List Apart

Start here for your introduction to responsive design. This article by Ethan Marcotte from May of 2010, aptly titled: Responsive Web Design, is a great place to learn why we need responsive design over subdomains and mobile quarantine zones.

Responsive Web Design

Also by Ethan Marcotte, Responsive Web Design ($9.00 for the e-book on A Book Apart) is the next thing to read if your whistle has been made sufficiently wet by the above article.

Responsive Development

Sencha

Optimizing images for mobile viewing can be tricky, so thank Sencha for making it easier. For mobile-friendly images, just prepend http://src.sencha.io to any image url, and Sencha will automagically resize it to fit the window of the screen it’s being viewed on. Like, for the image below, just do the following:

Check out this example using an image of Cookie Monster on a mobile device or tablet, see how it gracefully resizes? Awesome.

Responsive Cookie Monster

C is for conditional, as in, an objects size is conditional to the size of the viewscreen it’s being viewed on.

Elastic Videos

Resizing your YouTube, Vimeo or other video content can be a challenge. This post on Web Designer Wall makes it less challenging.  (demo)

Conditional Loading for Responsive Design

Posting related content to an article is a great idea, but it can really increase loading time. This script by Jeremy Keith uses Ajax to delay loading of supplemental content until it detects whether the viewport is wide enough to handle it.  (demo)

Mobitest

Mobile development should be smaller, faster, more agile than desktop, but it’s frequently the other way around. While your iPhone or Android device might have more computing power than the old Mark IIs, it still has less than your desktop. Mobitest allows you to test loading speed of your mobile content across various devices.

Responsive Foundation & Core Files

Bootstrap

I’ve talked about Bootstrap before and think it’s a great candidate for responsive development. I’ve not used it (yet), but I’m itching to, especially since I discovered the themes on Bootswatch and the awesome applications featured on built with bootstrap.

Foundation

I love Foundation. I’ve used it for everything from personal sites to custom content on Facebook and WordPress development. It’s currently my choice for responsive development.

Modernizr

Modernizr is a must-have for responsive development. Simply put, it’s a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. Most frameworks already use it, so you won’t need to do a separate install, but there’s value in knowing what it does.

LESS and SASS

Again, you might not need to know these if you start with a complete responsive framework, but it doesn’t hurt to familiarize yourself with the language. Both LESS and SASS are advanced CSS frameworks that allow for simpler, more streamlined code. SASS (syntactically awesome stylesheets, also Sassy CSS) is the framework in use with Foundation, where LESS is the foundation for Bootstrap.

Just the beginning.

We’ve barely begun this journey into what’s possible with responsive design, so now’s the time to educate yourselves, and other, on the possibilities.

Is there a tool you love for responsive development that’s not listed here? Share it with us here.

Sean Enns

Sean Enns is a marketing professional who started in marketing and sales in 1997. In 2004, he began his career in search engine optimization and corporate communications.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus