“The fire is cupped in black rock….”

Western Christians observe Easter today and maybe it is an appropriate time to post this paragraph from a brief (roughly three-page) work of stunningly crafted expressions by John Updike, Archangel :

The workmanship of the bowers will be immaculate. Where the elements are joined, the sword of the thinnest whisper will find its point excluded. Where the beams have been tapered, each swipe of the plane is continuous. Where the wood needed locking, pegs of a counter grain have been driven. The ceilings are high, for coolness, and the spaced shingles seal at the first breath of mist. Though the windows are open, the eaves of the roof are so wide that nothing of the rain comes into the rooms but its scent. Mats of perfect cleanness cover the floor. The fire is cupped in black rock and sustained on a smooth breast of ash. Have you never lacked shelter?

The three core ingredients for front-end responsive web design

Yet again I pull a couple of quotes from Ethan Marcotte (Responsive Web Design, 2011, p.9):

So what does it take to create a responsive design? Speaking purely in terms of front-end layout, it takes three core ingredients:
1. A flexible, grid-based layout,
2. Flexible images and media, and
3. Media queries, a module from the CSS3 specification.

These core ingredients can be used to:

create a design that can adapt to the constraints of the browser window or device that renders it, creating a device that almost responds to the user’s needs.

Mobile first meets media queries

Here again is Ethan Marcotte from Responsive Web Design (p. 124):

Speaking broadly, responsive design is about starting from a reference resolution, and using media queries to adapt it to other contexts. A more responsible approach to responsive design would mean building our stylesheet with “mobile first” in mind, rather than defaulting to a desktop layout. So we’d begin by defining a layout appropriate to smaller screens, and then use media queries to progressively enhance our design as the resolution increases.

The mobile first approach to web design provides focus

The mobile first approach to web design asserts not only that the mobile experience of a web site should be considered and not merely an afterthought but should have priority: design should first be for smaller (presumably mobile) viewports and the experience can then be enhanced for larger viewports. Tim Kadlec (Implementing Responsive Design: Building sites for an anywhere, everywhere web, 2012, pp. 74-75) reports that most sites are still (2012) designed for the desktop viewport then down but that they should be designed for mobile viewports then up.

Here’s Ethan Marcotte on the mobile first approach (Marcotte, Responsive Web Design, 2011, p. 113):

It’s all too easy to fill a desktop browser window with social media toolbars, links to related articles, battalions of RSS links, and tag clouds galore. (This process is called adding value, I believe.) But when we’re forced to work with a screen that’s 80% smaller than our usual canvas, nonessential content and cruft quickly fall away, allowing us to focus on the truly critical aspects of our designs.

In other words, designing for mobile devices first can enrich the experience for all users, by providing the element often missing from modern web design: focus. That’s not to say that our client’s pages are light on content, or lacking in features. But by framing our design process with that simple question [How does this content or feature benefit our mobile users?], we’ve gained a handy acid test to apply when considering each proposed element, each new piece of functionality (brackets not in Marcotte).