Comp to Code from the Content Out

A no-nonsense approach
for building out contemporary web comps
without compromising on quality.


The method proposed here is carried out in three phases: analyze the comp; create semantic markup; and apply streamlined CSS.

We begin with a design concept and move step-by-step towards a static reconstruction of that concept with HTML and CSS.

So let's imagine we have created or been given a webpage layout concept for one or more pages of a website. All the planning for the site is finished and now we must make the transition from this composition concept, or "comp" to a functional reconstruction and we'll do it using a content-out approach.

Why a Content-out Approach?

For all the advances we've seen in the technologies we use to build web pages, we continue to struggle to build sites that are marked simply and cleanly and make the best use of those technologies. We tend to just continue what we're doing, grafting in the new technologies piecemeal rather than thinking critically about how they ought to be used to make the web a better place.

We're long overdue for a refresh in our approach to building pages from comp to code.

A content-out approach puts our most important aspect front and center—the content. As great advocates from the web standards movement suggested, we should start with simple, clean markup that adds the most meaningful structure to the content, and build out from there in consecutive circles.

The process described here uses this fundamental idea but in a way that is truly possible now thanks to advances in CSS such as flex box and the CSS Grid Module. See the resources section to learn more about these technologies on their own.

Introducing the Case Studies

As the process is explained we'll also look at each phase in real practice through three case studies of sites that vary in nature and complexity.