Zaubertrick mit doppeltem Boden

Auf den ersten Blick schien der Aufbau unserer vorherigen Website nicht weiter auffällig: Es gab eine Begrüßung, eine Projektübersicht, gefilterte Unterseiten. Doch genau hier kommen wir an einen Punkt, der unter der Haube anders war, als bei den meisten anderen Seiten, die wir gestaltet haben: Eigentlich gab es gar keine Unterseiten. Der gesamte Auftritt war eine einzige, statische HTML-Seite – kein CMS, keine Templates, alle Unterseiten waren ein pfiffiger Trick.

Das Prinzip war recht simpel: Im Markup jedes Projektes waren Kategorien und Metaangaben in data-Attributen hinterlegt, die es ermöglichten, virtuelle Übersichten zu generieren. Per JavaScript wurde die Gesamtansicht je Kategorie dupliziert und gefiltert, die Navigation gesteuert und per Animation von einer Ansicht zur nächsten gewechselt. Die Website war auch ohne JavaScript voll funktionsfähig, in diesem Fall fehlte lediglich die zuvor genannte Filterung. Ein Zaubertrick mit doppeltem Boden sozusagen.

Hinter den Kulissen

Das Markup eines Projektes sah beispielsweise wie folgt aus:

<section 
    id="stilbluete" 
    class="project block-stilbluete" 
    data-categories="Webdesign"
>
    <aside class="meta centered">
        <a href="#stilbluete">
            <span class="meta-designer">hn</span>
            <span class="meta-number">01/1</span>
        </a>
    </aside>
    <article class="text-slides">
        <p>
            <a href="http://stil-bluete.net">
                Stil-Blüte Handarbeit &amp; Co.
            </a>
            ist ein Wollgeschäft in Braunschweig, welches sich auf
            außergewöhnliche Handstrickgarne spezialisiert hat. Der
            Internetauftritt umfasst Onlineshop, Kursanmeldung und
            Informationen rund um das Ladengeschäft, bei denen auch
            Jack-Russel-Terrier Rudi seine Abenteuer als Ladenhüter mit
            den Lesern teilt. Die Gestaltung sollte sich in ihrer
            Klarheit bewusst von gängigen Onlineshops abheben. Für die
            Website entstanden ein eigenes Iconset sowie kleinere
            Illustrationen.
        </p>
    </article>
    <small class="text-center fineprint">
        <time class="uppercase" datetime="2009">seit 2009</time>
        Website, Shop, Icons, Illustration, Symphony
    </small>
    <div class="card centered grid">
        <div class="column size-12 ratio-3-2">
            <a 
                href="media/stilbluete-startseite.png" 
                class="image-placeholder" 
                data-alt="Screenshot stil-bluete.net" 
            >
                → Link zum Bild
            </a>
        </div>
    </div>
</section>

Das Attribute data-categories benannte eine oder mehrere Kategorien auf deren Basis dann die Navigation geschrieben und die Unterseiten erstellt wurden:

function createCategoryFilters() {
    var ul = document.querySelector('#footer .footer-filters');

    // Add category filters
    categories.forEach(function (category) {
        var li = document.createElement('li'),
            a = document.createElement('a'),
            text = document.createTextNode(category);

        // Set filter link
        a.setAttribute('href', 'kategorie/' + createHandle(category));
        a.setAttribute('class', 'footer-filter');

        // Append Elements
        a.appendChild(text);
        li.appendChild(a);
        ul.insertBefore(li, ul.firstChild);
    });
}

function createCategoryPages() {
    // Setup pages
    categories.forEach(function (name) {
        var clone = slides.querySelector('.slide-all').cloneNode(true);

        clone.classList.remove('slide-all');
        clone.classList.remove('slide-active');
        clone.classList.add('slide-' + createHandle(name));
        clone.classList.add('slide-hidden');

        // Filter page by category
        [].forEach.call(clone.querySelectorAll('section'), function (project) {
            var currentCategories = project
                .getAttribute('data-categories')
                .split(', ');

            if (currentCategories.indexOf(name) == -1) {
                project.parentNode.removeChild(project);
            }
        });

        slides.appendChild(clone);
    });
}

Jetzt noch schnell einen Screenshot gemacht. Schön wars!