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.
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.
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.
Corner Bakery – A simple small business site: The first case study we can examine with our method is the prototype for The Corner Baker website. This small business was seeking a simple website that would share key information about the store's offerings for visitors as well as the opportunity to place bulk or catering orders online.
Act On It — A single page web application: This web application allows users to manage tasks in categories and projects using a simple color coding system.
Folio — A multi-page web application: This web application allows students in a University design program to manage their ongoing portfolio of work, organize into collections, submit required portfolios for program benchmarks, and present their work to clients. It also allows professor to set up and review portfolios. Finally, portfolios can be shared with people outside the university through public views.