<?xml version="1.0"?>
<?xml-stylesheet href="/transform" type="text/xsl"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:bibo="http://purl.org/ontology/bibo/" xmlns:bs="http://purl.org/ontology/bibo/status/" xmlns:ci="https://vocab.methodandstructure.com/content-inventory#" xmlns:dct="http://purl.org/dc/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:owl="http://www.w3.org/2002/07/owl#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xhv="http://www.w3.org/1999/xhtml/vocab#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#" lang="en" prefix="bibo: http://purl.org/ontology/bibo/ bs: http://purl.org/ontology/bibo/status/ ci: https://vocab.methodandstructure.com/content-inventory# dct: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/ owl: http://www.w3.org/2002/07/owl# rdf: http://www.w3.org/1999/02/22-rdf-syntax-ns# xhv: http://www.w3.org/1999/xhtml/vocab# xsd: http://www.w3.org/2001/XMLSchema#" vocab="http://www.w3.org/1999/xhtml/vocab#" xml:lang="en">
  <head>
    <title property="dct:title">The Redesign, Dissolved</title>
    <base href="https://doriantaylor.com/the-redesign-dissolved"/>
    <link href="document-stats#EizuDES93AnJQyNWrAbJeJ" rev="ci:document"/>
    <link href="elsewhere" rel="alternate bookmark" title="Elsewhere"/>
    <link href="this-site" rel="alternate index" title="This Site"/>
    <link href="http://purl.org/ontology/bibo/status/published" rel="bibo:status"/>
    <link href="" rel="ci:canonical owl:sameAs" title="The Redesign, Dissolved"/>
    <link href="lexicon/#E-ZY5i7K1cqzfT0p1L9ajJ" rel="dct:audience" title="Digital Media Practitioner"/>
    <link href="lexicon/#Er25AsP7lDnL8trRRAsODJ" rel="dct:audience" title="Digital Media Theorist"/>
    <link href="person/dorian-taylor#me" rel="dct:creator" title="Dorian Taylor"/>
    <link href="file/reverse-proxy" rel="dct:hasPart"/>
    <link href="person/dorian-taylor" rel="meta" title="Who I Am"/>
    <link about="./" href="3f36c30c-6096-454a-8a22-c062100ae41f" rel="alternate" type="application/atom+xml"/>
    <link about="./" href="f07f5044-01bc-472d-9079-9b07771b731c" rel="alternate" type="application/atom+xml"/>
    <link about="./" href="this-site" rel="alternate"/>
    <link about="./" href="elsewhere" rel="alternate"/>
    <link about="./" href="e341ca62-0387-4cea-b69a-cdabc7656871" rel="alternate" type="application/atom+xml"/>
    <link about="verso/" href="3f36c30c-6096-454a-8a22-c062100ae41f" rel="alternate" type="application/atom+xml"/>
    <link about="verso/" href="this-site" rel="alternate"/>
    <link about="verso/" href="elsewhere" rel="alternate"/>
    <meta content="the-redesign-dissolved" datatype="xsd:token" property="ci:canonical-slug"/>
    <meta content="It is no longer a theoretical postulate or academic curiosity. The linchpin, at least the technical one, to changing the website business, actually works." name="description" property="dct:abstract"/>
    <meta content="2013-06-15T20:13:45+00:00" datatype="xsd:dateTime" property="dct:created"/>
    <meta content="the-redesign-dissolved" property="dct:identifier"/>
    <meta content="2013-06-15T20:08:06+00:00" datatype="xsd:dateTime" property="dct:issued"/>
    <meta content="2013-06-17T12:47:18+00:00" datatype="xsd:dateTime" property="dct:modified"/>
    <meta content="2022-05-31T04:18:52+00:00" datatype="xsd:dateTime" property="dct:modified"/>
    <meta content="2022-05-31T15:10:50+00:00" datatype="xsd:dateTime" property="dct:modified"/>
    <meta about="person/dorian-taylor#me" content="Dorian Taylor" name="author" property="foaf:name"/>
    <meta content="summary_large_image" name="twitter:card"/>
    <meta content="@doriantaylor" name="twitter:site"/>
    <meta content="The Redesign, Dissolved" name="twitter:title"/>
    <meta content="It is no longer a theoretical postulate or academic curiosity. The linchpin, at least the technical one, to changing the website business, actually works." name="twitter:description"/>
    <meta content="https://doriantaylor.com/file/reverse-proxy;scale=500,300" name="twitter:image"/>
    <object>
      <nav>
        <ul>
          <li>
            <a href="giant-conf-2014-dissolving-the-redesign" rev="dct:references" typeof="bibo:Article">
              <span property="dct:title">GIANT Conf 2014: Dissolving the Redesign</span>
            </a>
          </li>
          <li>
            <a href="how-i-handle-intellectual-property" rev="dct:references" typeof="bibo:Article">
              <span property="dct:title">How I Handle Intellectual Property</span>
            </a>
          </li>
          <li>
            <a href="lowering-the-risk-of-web-development" rev="dct:references" typeof="bibo:Article">
              <span property="dct:title">Lowering the Risk of Web Development</span>
            </a>
          </li>
          <li>
            <a href="reluctant-management-consultant" rev="dct:references" typeof="bibo:Article">
              <span property="dct:title">Reluctant Management Consultant</span>
            </a>
          </li>
          <li>
            <a href="skeleton-organs-circulation-sinew-skin" rev="dct:references" typeof="bibo:Article">
              <span property="dct:title">Skeleton, Organs, Circulation, Sinew, Skin</span>
            </a>
          </li>
          <li>
            <a href="document-stats#EizuDES93AnJQyNWrAbJeJ" rev="ci:document" typeof="qb:Observation">
              <span>urn:uuid:8b3b8311-2f77-4027-9250-c8d5ab01b25e</span>
            </a>
          </li>
        </ul>
      </nav>
    </object>
  </head>
  <body about="" id="EUKHWszsLGC_p46sgPlZVL" typeof="bibo:Article">
    <p>A year ago, I set out to <a href="on-the-building-of-software-and-websites" title="On the &#x201C;Buidling&#x201D; of Software and Websites" rel="dct:references">change the economics of <abbr title="World-Wide Web">web</abbr> development</a>. Specifically, I wanted to provide agencies and other independent players with the same organizational latitude as big companies, who could dedicate an entire development team to some widget or other, but do so with a fraction of the overhead. I speak of the ability to put seamlessly into production the solution to a <em>single</em> user goal&#x2014;without having to wait for the launch of an entire website&#x2014;and subsequently get paid for it.</p>
    <section id="ETJ_97aHFYIMO_NGT2sKxK">
      <h2>The Problem</h2>
      <p>Most <abbr title="World-Wide Web">web</abbr> design projects <a href="dissolving-the-redesign" title="Dissolving the Redesign" rel="dct:references">are actually <em>redesign</em> projects</a>, because in 2013, unless a company is brand new, it already <em>has</em> a website. You <em>could</em> work incrementally if you had a blank slate, but not if there's an existing website in the way. And then there's wading through whatever hodgepodge of nonsense <acronym title="Content Management System">CMS</acronym> or other platformware left behind by the last guy, and ugh, what a nightmare.</p>
      <figure id="ExYVz6MwptP49WiCGMorvJ">
        <img style="display: block; margin: auto" src="file/reverse-proxy;scale=500,300" alt="" rel="foaf:depiction"/>
      </figure>
      <p>The solution I propose is to put up a <em>scaffold</em>, one which is invisible to the user. You use it to cover up the old site with your new work, piece by piece, until none of it is left showing through. Then you disconnect the old site, take down the scaffolding, and voil&#xE0;.</p>
    </section>
    <section id="Ei6hnevwmOI7KI2jG6c7WJ">
      <h2>What This Changes</h2>
      <p>What I'm trying to change is the all-or-nothing nature of the typical website redesign contract. With this scaffolding, you can deliver incremental results to your clients <em>into production</em>, so their business goals&#x2014;and <em>your</em> payday&#x2014;aren't waiting on some far-off launch date. What's more is that you don't have to know or care one jot about the morass that is whatever platform&#x2014;or <em>platforms</em>&#x2014;your client currently has in use.</p>
    </section>
    <section id="E_fsjJPB0hgHGMLD9I50mL">
      <h2>Here's the Proof</h2>
      <p>Because the rest of this article talks about <em>how</em> to achieve this effect, I won't make you read all the way to the bottom to see this thing in action. Here's one of the two I'm currently working on:</p>
      <p style="text-align: center; font-weight: bold"><span class="parenthesis" title="Yes, I know, the IAI is not a &#x201C;client&#x201D; per se, but the ability to tackle the site redesign incrementally is just as, if not even more necessary."><a href="http://stage.iainstitute.org/" rel="dct:references"><em>This</em></a> is scaffolding running on top of <a href="http://iainstitute.org/" rel="dct:references"><em>this</em></a>.</span></p>
      <p>Interested yet? Good. What follows is roughly how you use it:</p>
    </section>
    <section id="E8WNHmK2oQRlMSYYfpw4UK">
      <h2>Get a Server</h2>
      <p>This server&#x2731; should, as a rule, be considerably beefier than the original site. You will need <kbd>root</kbd>. Shared hosting will not suffice, neither will some app cloud doo-dad. Likewise, irrespective of whatever stack the original site runs on, this server <span class="parenthesis" title="I suppose you could try to get it to work on Windows, but don't come asking me for help with that.">should really be some kind of Unix variant</span>.</p>
      <p>So far I have installed this contraption onto two different Linux <acronym title="Virtual Personal Server">VPS</acronym> systems. I prefer <a href="http://www.debian.org/" rel="dct:references">Debian</a> and <a href="http://www.ubuntu.com/" rel="dct:references">its derivatives</a> because it's easiest to deal with. Somewhere between 1 and 2 gigabytes of <acronym title="Random Access Memory">RAM</acronym>, on top of whatever they needed originally, should probably suffice for a <span class="parenthesis" title="I'm pretty confident that even in this early stage, the scaffolding should be able to handle a few sustained megabits of traffic.">small-to-medium-sized client</span>.</p>
      <aside role="note" id="EcfIr8IoseT35g1yf9IqLI">
        <p>&#x2731; The scaffolding is stateless, so you <em>could</em> cluster it to handle a larger site, but before trying that, you should hire me to rewrite the core modules in C.</p>
      </aside>
    </section>
    <section id="EmOpqNTfLG3Co-WFnobZUL">
      <h2>Install the Scaffolding</h2>
      <p>The scaffolding makes extensive use of <a href="http://httpd.apache.org/" rel="dct:references">Apache's</a> <a href="http://httpd.apache.org/docs/current/developer/filters.html" rel="dct:references">filter mechanism</a>, and is currently prototyped using <a href="http://perl.apache.org/" rel="dct:references">mod_perl</a>, it being one of the more mature and comprehensive embedded interpreters for Apache. I say <em>prototyped</em> because there's plenty of room for improvement, but as it stands it's good enough to handle the traffic seen by the average corporate website.</p>
      <dl>
        <dt>Install <a href="http://search.cpan.org/dist/Apache2-CondProxy/lib/Apache2/CondProxy.pm" rel="dct:references">the reverse proxy</a></dt>
        <dd>The reverse proxy has one job, which is to check and see if the new server responds successfully to a request for a given <acronym title="Uniform Resource Locator">URL</acronym>. If it doesn't, the request is punted to the old server. This enables you to work at the level of the individual <em>page</em>. Not site, not section. If you combine this ability with a page composition technique I'll cover elsewhere, you can work at the level of individual page <em>elements</em>.</dd>
        <dt>Install <a href="http://search.cpan.org/dist/Apache2-HTML-Detergent/lib/Apache2/HTML/Detergent.pm" rel="dct:references">the scrubber</a></dt>
        <dd>The scrubber's job is to take <acronym title="Hypertext Markup Language">HTML</acronym> coming in through the proxy and strip it of everything but the content you're interested in, which is usually the main page content. It delivers pristine markup, ready to be re-styled.</dd>
        <dt>Install <a href="http://www.outoforder.cc/projects/apache/mod_transform/" rel="dct:references">mod_transform</a></dt>
        <dd>This is an off-the-shelf filter that will take your pristine, content-only <acronym title="Hypertext Markup language">HTML</acronym>, and slap back onto it your desired presentational markup. I personally leave it off for development, since all modern desktop and tablet browsers support <acronym title="Extensible Stylesheet Language Transformations">XSLT</acronym>. But you'll want to turn it on eventually, particularly for the millions of smartphones that run old versions of Android.</dd>
      </dl>
    </section>
    <section id="E9hDQ1jPmVbATQYs1mRtaK">
      <h2>Configure the Scrubber</h2>
      <p>This is the only part of the prep that requires any real work. The scrubber isn't smart enough&#x2014;<em>yet</em>&#x2014;to isolate the main content of a page and do anything reasonable with it on its own, so you have to tell it. This entails going through the entire original site and collecting specimens of all the variants of the site's template and content. Then you examine them in a <a href="http://en.wikipedia.org/wiki/DOM_Inspector" title="DOM Inspector &#x2014; Wikipedia" rel="dct:references"><acronym title="Document Object Model">DOM</acronym> inspector</a> to derive a set of <a href="http://www.w3.org/TR/xpath/" rel="dct:references">XPath</a> statements that uniquely match the main content. This is also your opportunity, if you see fit, to remove any burrs of yesteryear: to eliminate <samp>&lt;font&gt;</samp> tags, <samp>&lt;table&gt;</samp>-based layouts, or to upgrade to <acronym title="Hypertext Markup language">HTML</acronym> 5, which entails crafting a special <acronym title="Extensible Stylesheet Language Transformations">XSLT</acronym> transform to handle them. Expect this part of the process to take around a week or two to get right, depending on how gnarly the original site is.</p>
      <aside role="note" id="E5oUv_S3Yaf3eF_16A5L0L">
        <p>At this point, I also like to re-do the site map, which I recycle as the data source for the navigation. This makes it just as easy to tinker with the structure of the site, as it is the contents of pages.</p>
      </aside>
    </section>
    <section id="EzyqWOojp81yA8-rDjpeKK">
      <h2>Re-Create the Presentation Layer</h2>
      <p>And now for the fun part: putting the lipstick on the pig. After all, it's the exact same site that you started with, only it's been treated and sanitized, so you can do pretty much whatever you want to it. Do you duplicate the way it looked before, or do you give it a completely new skin?</p>
      <p>Having done a few of these, I can attest that trying to make a perfect copy of the original layout takes much more effort than you'd expect, because you have to copy all the mistakes that were invariably left in there as well. At this point I would recommend a slight <q>facelift</q> to your client, as part of the redesign process. Turns out it's actually easier.</p>
    </section>
    <section id="EJQR8VTVLYS6YfCmTck39K">
      <h2>Switch the <acronym title="Domain Name System">DNS</acronym></h2>
      <p>This <em>would</em> be the real test, wouldn't it? Switching the tracks to pass all traffic through the scaffolding? Will it be fast enough?</p>
      <p>I don't want to delude anybody: of course it's going to be slower. You're taking however long it took to produce a page on the original site, and adding to it the cost of transporting that content to another site, then sanitizing and manipulating it, before sending it on to the browser. While I'd love more than anything to shave this overhead down, to use this contraption, you're looking at an additional cost of around <var>100</var> to <var>200</var> milliseconds per request.</p>
      <p>The real bottleneck on the scaffolding for the moment is <acronym title="Random Access Memory">RAM</acronym>. The busier the site, the more you'll need for the scaffolding. Needless to say, curbing memory usage is a top priority for this project. Caching will help, but it'll only be as good as the cache directives coming from the original site, which in my experience are practically nonexistent for anything but static content.</p>
      <aside role="note" id="EVn4JlUu9UXmA4phLD4cWK">
        <p>It takes an <em>extremely</em> zealous <abbr title="World-Wide Web">web</abbr> developer to deign to program proper cache directives in a <acronym title="Content Management System">CMS</acronym> or other dynamic content.</p>
      </aside>
      <p>The two projects I have going using this scaffolding at the time of this writing are small enough that I'm not worried about the memory overhead. That said, I'm still waiting for the green light on both to switch the <acronym title="Domain Name System">DNS</acronym>.</p>
    </section>
    <section id="E7QW3u0CpxDSSl7prqPaaL">
      <h2>Final Details</h2>
      <p>If it wasn't implicitly clear, I specifically designed this scaffolding to work <em>beneath</em> the application layer, by altering the behaviour of the <abbr title="World-Wide Web">web</abbr> server <em>itself</em>. That means you can use <a href="intelligent-heterogeneity" title="Intelligent Heterogeneity" rel="dct:references">any combination of platforms and frameworks</a> that will function on top of&#x2014;or behind&#x2014;Apache, which in the broadest sense means nearly all of them.</p>
      <aside role="note" id="E_vnqIt919oc036VN6Mx5J">
        <p>And yes, event loop fanboys, you have to use Apache in order to use this scaffolding&#x2014;at least until you've completely covered up your client's original site. Once you're done, assuming you're running your app on some <a href="http://en.wikipedia.org/wiki/FastCGI" title="FastCGI &#x2014; Wikipedia" rel="dct:references">FastCGI</a> derivative, you can easily switch to a <a href="http://nginx.org/" rel="dct:references">more en-vogue <abbr title="World-Wide Web">web</abbr> server</a>. You can also downgrade from a dedicated server to shared hosting at that point if you judge it to be overkill.</p>
      </aside>
      <p>The overarching goal here, once again, is to open the door to other ways of arranging the <em>business</em> aspect of website redesign projects, by making it as easy as possible to deliver material value to the client, when said material value is ready to be used, and no later.</p>
    </section>
  </body>
</html>
