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.
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.
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.
C is for conditional, as in, an objects size is conditional to the size of the viewscreen it’s being viewed on.
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)
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
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.
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.
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.