HTML-Templates für TYPO3-Projekte

html5up
Meine Empfehlung: HTML5 up!

Seit mehr als sechs Jahren gebe ich an der Volkshochschule von Zeit zu Zeit Einführungskurse in Sachen TYPO3. Tapfer arbeiten sich die meisten Teilnehmer durch das Content Management System (CMS) und seine zahlreichen Features. Nicht immer ist das ganz einfach, doch am Ende verfügen die meisten Kursanten über belastbare Kenntnisse hinsichtlich Backend, Rechtesystem, Extensions und TypoScript. So gerüstet bleibt anschließend zumeist vor allem eine Frage, die aber nur indirekt mit dem Open Source-CMS zu tun hat: Wo bekomme ich ein ansprechendes Äußeres für meine erste TYPO3-Website her?

Denn anders als z.B. WordPress bringt TYPO3 von sich aus keine fertigen HTML-Templates für Website-Projekte mit sich. Wer sich mit dem nackten CMS zufrieden gibt, produziert Internet-Auftritte, die in ihrem rustikalen Charme an die frühen Tage des World Wide Web erinnern. Das ist natürlich nicht im Sinn der Sache, denn TYPO3 vermag sehr wohl komplexe Designvorlagen zu verwenden. Wie das geht, haben die Teilnehmer während der Schulung selbstverständlich gelernt. Nur muss man nun eine den eigenen Vorstellungen entsprechende Vorlage finden. Passende Angebote lassen sich über Google schnell und zahlreich aufspüren, doch welches Template taugt? Eine mögliche Antwort und gleichzeitig meine Empfehlung ist HTML5 UP!. Auf der Website lassen sich tolle Entwürfe ausprobieren, die sowohl in HTML5 als auch im Responsive Webdesign angelegt sind, also ganz auf der Höhe der Zeit! Die kostenlosen(!) HTML-Vorlagen können heruntergeladen, im Template-Verzeichnis (z.B. „fileadmin/template“) der TYPO3-Installation abgelegt und schließlich im TypoScript-Setup eingebunden werden.

Bei den testweise eingebundenen Screendesigns Strata und Read Only mussten im Dateiverzeichnis der HTML-Templates nur an einer Stelle Änderungen durchgeführt werden, um die Musterseite korrekt anzuzeigen: In der Datei „js/init.js“ waren die Pfadangaben zu den CSS-Dateien von Hand um das gewählte Unterverzeichnis (in unserem Fall „fileadmin/template/html5up“) zu ergänzen.

3 Stimmen

4 Gedanken zu „HTML-Templates für TYPO3-Projekte“

  1. Servus,

    prima…vielen Dank für Deine Antwort.
    Ich werde mal weiter tüfteln.
    Eigentlich bin ich recht fit in css und html.
    Aber bischen hakt es noch
    🙂

    Vielen Dank schonmal.

    Gruß

    Dirk

  2. Hallo,

    ein wirklich interessanter Artikel. Gibt es Beispiele für eine Integrierung von html5up Templates?

    Ich arbeite seit vielen Jahren mit Typo3 und kann eigene Screendesign in html umsetzen und mit Fluid Marker setzer.

    Aber an der Einbindung eines html5up Templates bin ich permanent am verzweifeln.

    Über einen kleinen Denk-Anstoss wäre ich super dankbar.

    Gruß

    Dirk

    1. Hallo Dirk,
      Typo3-seitig stehen bei der Erstellung des TypoScript-Templates ja zunächst drei Bereiche an:
      1. Rahmendesign: Dies lässt sich wie beschrieben einbinden.
      2. Navigationsstruktur: Mittels Typoscript kann diese ja wie benötigt nachgebaut und eingebunden werden.
      Bleibt 3. Seiteninhalte, und darauf bezieht sich wahrscheinlich Deine Frage. Hier ist in der Tat Handarbeit angesagt, d.h. die vorgegebenen CSS-Formate müssen auf die Typo3-generierten Inhalte übertragen werden. Man muss dafür kein CSS-Spezialist sein, sollte aber grundsätzliche Kenntnisse mitbringen.

      Der Aufwand in Sachen CSS hängt entscheidend von der Komplexität der HTML-Vorlage ab. Ich habe deshalb bisher vor allem die eher einfachen Templates von „HTML5 Up“ vewendet. Da das Ganze in „Responsive Webdesign“ angelegt ist, fällt das CSS ohnehin nicht ganz trivial aus. Also doch Handarbeit, aber im Verhältnis zur Neuerstellung eines HTML-Templates erscheint diese halbwegs überschaubar.

      Praktisch bedeutet das: Ich habe in einem Projekt das Read Only-Template verwendet. So schön, so gut. Aber dann hatte der Website-Betreiber doch noch einige gestalterische Sonderwünsche, aber nur ein kleines Budget. Also sind wir auf eine einfachere HTML-Vorlage gewechselt. Ist zwar nicht so schön, aber preiswerter anzupassen…

      Grüße, Rolf

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Time limit is exhausted. Please reload CAPTCHA.