Content Prototyping In Responsive Web Design: Related Resources

About The Author

President and Founding Partner of Sparkbox, a design and software studio working hard to create a better web. With a background in computer science, a career as … More about Ben ↬

Email Newsletter

Weekly tips on front-end & UX.
Trusted by 200,000+ folks.

Useful resources, by Ben Callahan, related to the previously published article “Content Prototyping In Responsive Web Design”.

This overview features the useful resources related to the article Content Prototyping In Responsive Web Design, written by Ben Callahan.

Content Precedes Design
An intense debate was born when this citation was made by Jeffrey Zeldman himself. The question indeed is, “Should content always precede design?”

Content Precedes Design

A Richer Canvas - Mark Boulton
On the Web, we usually have to abandon the notion of a page. Let’s look at this practically. To design a layout system for a website, we now have to consider many different variables.

A Richer Canvas - Mark Boulton

Content First - Jeremy Keith
This is a really exciting time for Web design. The increasing diversity of modern devices is driving people to try to figure out how to deal with mobile devices in the best possible ways.

Content First - Jeremy Keith

Media Queries - W3C Specification
A media query consists of a media type and a zero or more expressions that check for the conditions of particular media features. Among the other media features that can also be used in media queries are ‘width’, ‘height’ and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

Media Queries - W3C Specification

Fluid Grids - Ethan Marcotte
Fluid layouts are an undervalued commodity in Web design. They put control of our designs firmly in the hands of our users and their browsing habits. They’ve also utterly failed to seize the imagination of Web designers.

Fluid Grids - Ethan Marcotte

Powerful New CSS Techniques and Tools - Smashing UX Design
The hard work of front-end designers never ceases to amaze us. Over the last months, we’ve seen Web designers creating and presenting a plethora of truly remarkable CSS techniques and tools. Smashing Magazine has collected, analyzed, curated and featured thr latest useful resources for your convenience, so you can use them right away or save them for future reference.

Powerful New CSS Techniques and Tools - Smashing UX Design

Make Your Mockup in Markup - Megan Fisher
A big thanks to our design hero Dan Cederholm; Megan Fisher came to the conclusion that a website’s design should begin where it’s going to live: in the browser.

Make Your Mockup in Markup - Megan Fisher

Using Media Queries in the Real World - Peter Gasston
In order to make pages that adapt easily to different device viewports, you must make decisions about how to mark up your content in a way that allows for that adaptation…

Using Media Queries in the Real World - Peter Gasston

Ethan Marcotte

Ethan Marcotte

Responsive Web Design - Ethan Marcotte, A Book Apart
From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users’ needs.

Responsive Web Design - Ethan Marcotte, A Book Apart

The Goldilocks Approach - Chris Armstrong
With over 4 billion mobile devices in use around the world, mobile browsing is rising fast. We can no longer assume that our sites will be viewed on a desktop monitor with an average resolution.

The Goldilocks Approach - Chris Armstrong

Media Query Bookmarklet - Rob Tarr
One thing that quickly gets noticed when starting building responsive websites is that we constantly resize our browsers. We would resize the browser to the largest media query, and then step down and watch the changes so we know what media query we are looking at. This is not quite the best way to design a website.

Media Query Bookmarklet - Rob Tarr

Samsung Smart Zipel Refrigerator - Gizmodo

Samsung Smart Zipel Refrigerator - Gizmodo

The Mobile context - Mark Kirby
The mobile context is being discussed at a great deal at the moment in regards to mobile Web. What does it mean? How can we use it? How can we make assumptions about the context a user is in, based on their device?

The Mobile context - Mark Kirby

You Say Responsive, I Say Adaptive - Ben Callahan
You’ve probably read the opinions floating around about how the term “responsive Web design” isn’t an adequate name for the technique. A lot of smart folks have weighed in, providing critique, explaining what they would call it if they had written the article — some even stating that it’s a great name.

You Say Responsive, I Say Adaptive - Ben Callahan

Further Reading

Smashing Editorial (mrn)