Content first in site design and development
“In the beginning was the Word ….” John 1:1.
From years of web development experience, we’ve learned that developing websites without real content rarely goes as expected. The issues that arise from the flawed process result in client dissatisfaction and the loss of profits, goodwill and follow on work for the web developers or design agency. S: A Content-first Approach to Redesigning Your Website.
The usual way to start the design process is by sketching home pages or mapping the site’s pages, its information architecture. They’re often first things we show them. It comes as no surprise then that people believe that these are the pillars of the whole site.
Many of the site’s visitors might never even see the homepage if they land there via search. Given the increasing frequency with which visitors use such so-called deep links, the home page becomes less important and the high value content pages that that much more valuable in the result.
… very few users actually meet their goals right on the homepage of any given website, so it follows that very few organizations will reach their own objectives—much less their users’—by focusing only on the homepage.
Fitting content to design is equivalent to fitting the foot to the shoe. At a minimum, that makes walking difficult. Sadly, that’s how web design has developed historically.
When you ask a designer to design without the content that will be used for the final site you may as well be asking an architect to design a house without specifying the number of bedrooms, ensuites, kitchens and bathrooms.
The key to designing a site is to make the focus the core tasks its users need to accomplish. This recognizes that people come because they want to get something done. To do that, a site must be designed from the inside and out*.
Designing from the inside out means developing a site with real or working content. In the end, experience has shown that a design constructed without real content may look all right but it will never be as good as a design with it.
The first step in the design workflow is to inventory the things that need to be on the page whether or not they exist yet. In this context, inventory means merely a list and not the traditional content inventory which has a larger scope, purpose and value.
By looking at at “top content” and “time on site” data, we can determine which pages in the site are drawing the most eyeballs and interest and therefore the most sought after and valuable.
The second step is to use the inventory to identify the different pages—product page, contact form, news listing, news page, article—required for the site.
The third step is to identify for each page the content components that should be on that page. Components refers to the discrete parts of a page, the logo, navigation, title, body (and its components if structured), links, citations or references, etc. that make up a page. (“Body” in this context is both a component of a page and an HTML element.)
This approach reverse-engineers the design process of the website from most-sought-after content up—until we got to the homepage. At that point, having written the content for other pages, designing the home page is greatly simplified and expedited.
It also means that design decisions are made in the right context, the content of the site and the optimal organization and presentation of it.
In content-driven website design, we make the most sought after and therefore valuable content the most important to the site’s design. By focusing on the what users want to accomplish, find the content they need, it follows that the organization will reach its own objectives.
* “Inside and out” is the core model; see the Core+Paths: A Design Framework for Findability, Prioritization and Value | SlideShare (, 2007) and Core Model Workshop presentation (, 2014) presentations. Note that the terminology is “from the inside and out” rather than the common usage, “inside out.” “Inside” refers to inward paths to the relevant content (search, referrers, direct traffic, campaigns, front page, social media, etc.) and “out,” paths forward from that content (e.g., more detailed information, shopping cart, soclal media share, subscription, etc.).