Coyier and Walton on Responsive Web Design Process

If you’ve not seen them, these two recent and excellent reads pull together a number of instructive tips for responsive web design process.

Chris Coyier, “Notes to an Agency Starting Their First Responsive Web Project”

This is a well crafted, succinct list providing summaries (with links!) of important emerging responsive design trends.

Choice notes include:

  • “Designing first for a small screen means making the tough decisions about what is most important and what can be cut.”
  • “Don’t think in terms of exact screen sizes.” — with rationale
  • “Use as much ‘real’ of data/copy/media as you can.” — because real content makes a difference when designing for a wide range of devices and form factors
  • “Hover is totally out.” (with a helpful link to this piece by Trent Walton)

Jump to Coyier’s post

Speaking of Trent Walton, he’s just published a fantastic overview of his working process.

Trent Walton, “Where to Start”

Also a series of notes, in very readable paragraph form (and benefiting from Walton’s wonderful knack for typographic design).

Some of my favorite points, each illustrated with helpful thoughts and examples:

  • “ditching the assembly line method of site building for a more communicative, iterative process will be helpful.”
  • “I still use Photoshop, but I use it differently.”
  • “I finish in a mobile-first fashion,” but “I begin with wide views because the layout is usually more complex.”
  • “let media queried breakpoints be defined by content/layout rather than any specific device. Whenever things don’t fit or hierarchy breaks, add a media query. My favorite example of this is if we set a max-device-width media query at 480px to target an iPhone 4, the iPhone 5 wouldn’t display any of the targeted styles because the screen is larger.”

Well worth reading, contemplating, and assessing.

Jump to Walton’s post

A Little Twitter Bootstrap Book

For anyone who’d like a quick, friendly, step-by-step guide to Twitter Bootstrap basics, I’ve authored a little book for you, just released today.

Twitter Bootstrap Web Development Book Cover image
Twitter Bootstrap Web Development
Packt Publishing, November 2012
Buy Packt eBook (ePub, Kindle, PDF) or Print + eBundle
Buy Amazon paperback or Kindle edition

Contents include

  • Bootstrap’s responsive grid system
  • The responsive navbar
  • Typography, buttons, thumbnails, captions, and tables
  • Bootstrap’s excellent jQuery plugins, including
  • Drop-down menus
  • Tabbed content switching
  • Responsive carousel slider for images and captions
  • Use Bootstrap’s Customize page for basic customization of CSS and JavaScript
  • Recommended resources for going further with Bootstrap
In a word, this book is a brief, friendly introduction to the basics of using Twitter Bootstrap.
Warning: Because the book is brief, and basic, there are a slew of things it does not cover.

What this book does not cover

  • There’s no room for serious customization of Bootstrap’s built-in styles.
  • It’s not able to introduce you to working with Bootstrap’s LESS files.

I regret that. But again, the book is brief and basic. (I had constraints.)

Who would want to buy this book?

If you hate sorting through the documentation yourself, this little book will get you started. By the time you’re done, you’ll be ready to return to the Bootstrap docs with familiarity and confidence as you consult it and other recommended resources to keep rolling.

Is it up to date?

As up-to-date as I could make it! Version 2.1


Build a Faster HTML5 App with Backbone.js, Zepto.js and

This post from shares a strategy for creating Android and iOS apps from a single HTML5 codebase.

The post walks through:

  • including your JavaScript files
  • using Backbone.js to present a responsive interface
  • using the HTML5 boilerplate to reduce inconsistencies across platforms

Read it here: How to build fast HTML5 mobile apps using backbone.js, zepto.js and – Cross Platform Dev Blog

CoffeeScript: A Roundup for Beginners

CoffeeScript Logo

CoffeeScript brings new elegance and efficiency to the writing of JavaScript. It helpfully enforces JavaScript best practices. And it compiles into highly performant JSLint compliant code. The golden rule of CoffeeScript is: “It’s just JavaScript”.

Home Base

Introductory Overviews

Perspectives on CoffeeScript

CoffeeScript Basics: Introductory Articles and Tuts

CoffeeScripter’s Toolkit

  • — quickly convert JavaScript to CoffeeScript, and vice versa
  • CoffeeScript Cookbook — online recipes — “CoffeeScript recipes for the community by the community.”

CoffeeScript Books

What is this list missing?

This is a live list. Please post additional recommendations below!

Related Posts

Comparing Scripts in jQuery and JavaScript: A Comparison by Jeffrey Way

In a recent post, From jQuery to JavaScript: A Reference, Jeffrey Way gives an excellent run-down of how to get scripty things done in three idioms: jQuery, current JavaScript, and legacy JavaScript.

It’s an outstanding read.

Item number one gives a great introduction to JavaScript’s new Selectors API, which approximates jQuery for its ability to query the DOM in CSS-selector style.

So for instance, compare these three ways of doing things:

Selecting Elements




var container = document.querySelector('#container');

Legacy JavaScript

var container = document.getElementById('container');

Or consider this:

Add, Remove, and Toggle Classes




var container = document.querySelector('#box');

Legacy JavaScript

var box = document.getElementById('box'),
    hasClass = function (el, cl) {
        var regex = new RegExp('(?:s|^)' + cl + '(?:s|$)');
        return !!el.className.match(regex);
    addClass = function (el, cl) {
        el.className += ' ' + cl;
    removeClass = function (el, cl) {
        var regex = new RegExp('(?:s|^)' + cl + '(?:s|$)');
        el.className = el.className.replace(regex, ' ');
    toggleClass = function (el, cl) {
        hasClass(el, cl) ? removeClass(el, cl) : addClass(el, cl);
addClass(box, 'drago');
removeClass(box, 'drago');
toggleClass(box, 'drago'); // if the element does not have a class of 'drago', add one.

Credit: These examples are from the post, From jQuery to JavaScript: A Reference, by Jeffrey Way.

Which is better? — or Which is better When?

As Way points out, the question is not necessarily “Which is better?” but “Which is better when?” JavaScript’s new Selector API goes a long way toward making vanilla JavaScript nearly as easy to work with as jQuery. In cases where we can get things done without loading the jQuery library, our sites will travel lighter and perform a bit snappier.

They take-away: The jQuery library is fantastic when you need it, but in each case, we should pause to ask: “Do I really need jQuery in this case? — Or can I get it done in straight JavaScript?”


Design for 3 Screens — Make That 5: Jakob Nielsen’s Alertbox


Mobile use will rise, but desktop computers will remain important, forcing companies to design for multiple platforms, requiring continuity in visual design, features, user data, and tone of voice.

via Transmedia Design for 3 Screens — Make That 5: Jakob Nielsen’s Alertbox

Mozilla Developing a WebAPI to replace native apps with HTML5

Mozilla has launched an ambitious new project aimed at breaking down the proprietary app systems on today’s mobile devices. The project, dubbed WebAPI, is Mozilla’s effort to provide a consistent, cross-platform, web-based API for mobile app developers. Using WebAPI, developers would write HTML5 applications rather than native apps for iOS, Android, and other mobile platforms.

Mozilla isn’t just talking about WebAPI, it’s already hard at work and plans to develop the APIs necessary to provide “a basic HTML5 phone experience” within six months. After that, the APIs will be submitted to the W3C for standardization.

Among the APIs Mozilla wants to develop are a telephone and messaging API for calls and SMS, a contacts API, a camera API and half a dozen more.

via Mozilla WebAPI wants to replace native apps with HTML5 — Ars Technica.