Content Prototyping in Responsive Web Design

Published: September 27, 2011

You should gather and produce content prior to starting the design, says Ben Callahan, and you should consider using a content prototype to organize the content:

A content prototype is an HTML-and-CSS-based fluid-grid prototype, consisting of layout and typography, that consists of the project’s actual content. Its greatest usefulness may be in determining where to apply media queries to make the Web design responsive.

For centuries, we have shaped our layouts and typefaces according to the meaning of the content. This has traditionally been done on fixed-width pages. We have inherited a fixed-width mentality in designing for the Web, when in fact the Web is not fixed-width. Users come to our websites for content. We should strive to present this content in the most appropriate and readable way possible.

Ben Callahan @ Smashing Magazine

23 Examples of Screenshots in Web Design

Published: September 19, 2011

A screenshot a digital image of a computer display, like a photograph of what you see on a monitor.

You might make screenshots for a variety of reasons, not least of which is the desire to impress potential clients with pictures of web sites you have created.

For inspiration, see: 23 Examples of Screenshots in Web Design.