Contao 4.3 mit Composer installieren

Um Contao 4.3 zu installieren wird zuerst Composer benötigt, der über getcomposer.org heruntergeladen bzw. installiert werden kann.

Erstellen Sie einen Ordner für die Website und installieren Sie Contao 4.3 mit folgender Eingabe:

cd <pfad>
composer create-project --no-dev contao/managed-edition .

Ersetzen Sie dabei <pfad> mit dem Pfad zu dem soeben erstellten Ordner in dem Contao installiert werden soll.

Stellen Sie nun in der Webspace-Konfiguration den Unterordner web als Hauptverzeichnis (Document Root) ein. Danach rufen Sie das Install-Tool auf und führen wie üblich die einzelnen Schritte durch.

Nachdem alle Schritte des Install-Tools abgeschlossen sind, ist unter /contao das Backend von Contao 4 zu sehen.

Erweiterungen installieren

Mit folgenden Eingaben werden alle Erweiterungen mit Composer in einem Schritt installiert:

composer require \
    madeyourday/contao-rocksolid-frontend-helper:^2.0 \
    madeyourday/contao-rocksolid-custom-elements:^2.0 \
    madeyourday/contao-rocksolid-columns:^2.0 \
    madeyourday/contao-rocksolid-icon-picker:^2.0 \
    madeyourday/contao-rocksolid-slider:^2.0 \
    madeyourday/contao-rocksolid-theme-assistant:^2.0 \
    madeyourday/contao-rocksolid-mega-menu:^2.0 \
    madeyourday/contao-rocksolid-antispam:^2.0

Nun muss erneut das Install-Tool aufgerufen werden um die Datenbank zu aktualisieren.

Theme installieren

Nachdem Contao 4 inklusive Erweiterungen erfolgreich installiert wurde können Sie der üblichen Installationsanleitung des Themes ab dem Schritt Theme herunterladen und importieren folgen.

Aktualisieren Sie die Symlinks des Web-Ordners nach der Installation des Themes indem Sie im Contao-Backend unter System › Systemwartung › Daten bereinigen den Punkt Symlinks neu erstellen ausführen.

Fertig

Contao 4 und Ihr RockSolid Theme sind nun einsatzbereit und bereit für Ihre Inhalte.

Icon-Font in IcoMoon importieren

IcoMoon Menüleiste

Für die Anpassung des Icon-Fonts verwenden wir in diesem Artikel die kostenlose Online-Software IcoMoon. Öffnen Sie dazu die Seite icomoon.io/app in Ihrem Browser, klicken links oben auf den Button Import Icons und wählen den SVG-Icon-Font rocksolid-icons.svg aus. IcoMoon erstellt nun automatisch ein neues Icon-Set mit dem Namen rocksolid-icons.

Icons verändern oder austauschen

IcoMoon Menüleiste

Um einzelne Icons zu verändern oder mit einem anderen Symbol auszutauschen, wählen Sie in der Menüleiste den Stift-Button Edit und klicken auf das gewünschte Icon. Einfachere Modifikationen wie Größe, Position oder Name des Icons können direkt vorgenommen werden. Um das Icon mit einem Grafikprogramm zu bearbeiten klicken Sie auf Download (SVG). Mit dem Klick auf Replace können Sie eine SVG-Datei auswählen, mit der das Icon ersetzt werden soll.

Icon-Bearbeitungsoptionen

Icons hinzufügen

Iconset-Menü

Für die Erweiterung des Icon-Fonts um neue Icons gibt es mehrere Möglichkeiten. Um ein einzelnes Icon, das als SVG-Datei vorliegt hinzuzufügen, klicken Sie rechts neben dem Icon-Set rocksolid-icons auf das Menü-Symbol, dann auf Import to Set und laden das gewünschte SVG-Icon hoch. Auf diese Weise können Sie auch einen kompletten Icon-Font hinzufügen.

IcoMoon selbst bietet auch einige Icon-Fonts zur Auswahl, um diese hinzuzufügen scrollen Sie nach unten und klicken auf Add Icons From Library und fügen die gewünschten Icon-Fonts zur Übersicht hinzu. Makieren Sie nun die gewünschten Icons aus dem hinzugefügten Icon-Font und wählen Sie im Menü von rocksolid-icons den Punkt Copy Selection to Set.

Icon-Font exportieren

IcoMoon Fußzeile

Wenn Sie die Anpassungen und Ergänzungen abgeschlossen haben, wählen Sie im Menü von rocksolid-icons den Punkt Select All und klicken rechts unten auf Generate Font und danach ebenfalls rechts unten auf Download. Ersetzen Sie die Icon-Font-Dateien auf Ihrem Webspace mit den Dateien aus dem Ordner fonts des Download-Pakets. Achten Sie dabei darauf, dass Sie die Dateien in rocksolid-icons umbenennen müssen.

Damit auch die Suche des Icon Picker die Icons erkennt, kopieren Sie die Datei style.css des Download-Pakets in den Ordner der Icon-Font-Dateien und benennen Sie sie in rocksolid-icons.css um. Löschen Sie die Datei rocksolid-icons.html falls sie existiert.

Fertig

Die neuen Icons sind nun einsatzbereit und können in allen Custom Elements mit Icon Picker ausgewählt werden.

Liebling, wir haben die Content-Bilder geschrumpft.

Zentrale Bildgrößen definieren

Um die Einstellung der Bildgrößen für Redakteure zu vereinfachen und die Wartbarkeit für Administratoren zu verbessern, können Bildgrößen in den Theme-Einstellungen nun zentral definiert werden.

Um eine neue Bildgröße anzulegen navigieren Sie im Backend zu Layout › Themes › Bildgrößen. Dort können Sie einen Namen vergeben und die üblichen Einstellungen (Breite, Höhe, Modus) setzen. Danach können Sie in jedem Inhaltselement oder Modul, das über eine Einstellungsmöglichkeit für die Bildgröße verfügt auf die angelegten Definitionen zurückgreifen.

Die zentrale Einstellung der Bildgrößen erleichtern es, vor allem Redakteuren, konsequent dieselben Einstellungen zu verwenden. Gleichzeitig kann sichergestellt werden, dass keine Bildgrößen gewählt werden, die das Layout negativ beeinflussen. Und unabsichtlich in voller Größe eingebundene Bilder sollten damit ebenfalls der Vergangenheit angehören.

Die Praktikanten atmen auf: Bei einem Design-Update oder Relaunch müssen künftig nicht mehr sämtliche Bilder einzeln editiert werden um z. B. die Bildgröße oder Proportionen an das neue Design anzupassen.

Die verschiedenen Arten von Responsive Images

Es gibt grundsätzlich zwei Arten von Responsive Images.

Bei der ersten Variante werden Bilder mit unterschiedlicher Auflösung angezeigt, abhängig von der Größe und der Pixeldichte des Bildschirms. Der Bildausschnitt und die Proportion des Bildes bleiben jedoch gleich. Hierfür wird das srcset- und das sizes-Attribut eingesetzt.

Beispiel für ein Responsive Image ohne Veränderung des Ausschnitts.

Die zweite Variante wird als „Art Direction“ bezeichnet. Dabei wird abhängig von der Bildschirmgröße, des Bildschirmformats und möglichen anderen Faktoren ein anderer Bildausschnitt und/oder eine andere Proportion des Bildes angezeigt. Hierfür wird das <picture>-Element verwendet.

Beispiel für ein Responsive Image mit verändertem Ausschnitt und verschiedenen Proportionen.

Responsive Images ohne „Art Direction“ in Contao

Unterschiedliche Auflösungen für verschiedene Pixeldichten (z. B. „Retina“) können eingerichtet werden, indem man in den Bildgrößen-Einstellungen die gewünschten Pixeldichten einträgt. Wenn Sie für eine Größe von 100x100 die Pixeldichten 0.5x, 1x, 2x vergeben, wird automatisch für jedes Bild, das dieser Größe zugeordnet ist ein 50x50, 100x100 und 200x200 großes Bild erzeugt.

Um zusätzlich verschieden breite Bildschirme zu unterstützen, muss das sizes-Attribut in den Einstellungen vergeben werden. Diese Einstellung teilt dem Browser mit, in welcher Breite das Bild angezeigt wird.

Wenn das Bild immer in voller Breite des Fensters angezeigt wird, tragen Sie 100vw ein. Wenn ein Bild z. B. auf kleineren Bildschirmen in voller Breite angezeigt wird und in größeren immer 500 Pixel breit ist, tragen Sie (max-width: 600px) 100vw, 500px ein. Auch mehrere Media-Queries können verwendet werden z. B. (max-width: 600px) 100vw, (max-width: 900px) 60vw, 500px.

Die Einstellung folgt dem Schema: Media-Query in Klammern (optional), gefolgt von Wert und Einheit. Mehrere Angaben getrennt durch Komma.

Wenn nun bei einer 100x100-Bildgröße unter Sizes 100vw und unter Pixeldichte 0.5x, 1x, 2x eingestellt ist, erzeugt Contao ein 50x50, 100x100 und 200x200 großes Bild und der Browser entscheidet anhand der Sizes-Einstellung und der Daten des Bildschirms welches dieser Bilder geladen wird.

Der Zoom-Faktor und der bedeutende Bereich von Bildern

Der bedeutende Bereich eines Bildes kann im Contao-Backend in der Dateiverwaltung festgelegt werden. Editieren Sie dafür das gewünschte Bild unter System › Dateiverwaltung und markieren Sie den Bereich mit dem Mauszeiger. Dabei sollte der Bereich des Bildes markiert werden der für den Informationsgehalt von Bedeutung ist bzw. möglichst immer sichtbar sein sollte.

In den Einstellungen der Bildgröße kann nun ein Zoom-Faktor angegeben werden. Bei 0% wird das gesamte Bild angezeigt, bei 100% wird nur der zuvor markierte bedeutende Bereich des Bildes angezeigt und von 1% bis 99% werden Zwischenschritte des Ausschnitts berechnet.

Links: Zoom 0%, Mitte: Zoom 50%, Rechts Zoom 100%

Responsive Images mit „Art Direction“ in Contao

Pro Bildgröße können Sie zusätzlich Media-Queries anlegen. Navigieren Sie dazu im Contao-Backend nach Layout › Themes › Bildgrößen, editieren eine Bildgröße und klicken auf Neues Bildgrößen-Media-Query. Dort können Sie ein beliebiges CSS-Media-Query angeben wie z. B. (max-width: 600px), (orientation: portrait) oder print und zugehörige Größeneinstellungen definieren.

Dabei gilt es die Reihenfolge der Media-Queries zu beachten, denn der Browser geht diese Liste von oben nach unten durch und nimmt den ersten Eintrag mit passendem Media-Query. Wenn keines der Media-Queries zutrifft, werden die Haupteinstellungen der Bildgröße verwendet. Die komplette Konfiguration einer Bildgröße mit „Art Direction“ könnte folgendermaßen aussehen:

• Bildgröße 1000x200, Exaktes Format, 0% Zoom
  • Media-Query (max-width: 600px) 600x300, Exaktes Format, 100% Zoom
  • Media-Query (max-width: 900px) 900x350, Exaktes Format, 50% Zoom

Browser-Unterstützung und Polyfill

Die Browser-Unterstützung für Responsive Images ohne Art-Direction und mit Art-Direction ist noch nicht sehr weit fortgeschritten, man kann das Feature jedoch mit JavaScript nachrüsten. In Contao ist standardmäßig ein Script enthalten, das nur aktiviert werden muss.

Den JavaScript-Polyfill aktivieren

Navigieren Sie zu den Layouteinstellungen unter Layout › Themes › Seitenlayouts im Bereich Responsive Bilder und aktiveren den Punkt Das Image-Polyfill laden. Der Image-Polyfill ist optional, denn Browser die <picture> oder srcset nicht verstehen, ignorieren diese Angaben einfach und laden die Standardgröße des Bildes.

Performance

Da Contao jede Variante eines Bildes erstellen und abspeichern muss, sollte man für die Server-Performance bei kleinen Webhosting-Paketen darauf achten, nicht zu viele Varianten einzustellen. Denn für jede eingestellte Pixeldichte und für jeden Media-Query berechnet Contao ein eigenes Bild und speichert es auf dem Webserver.

Für die Performance im Browser sollte beachtet werden, dass es bei aktiviertem Image-Polyfill vorkommen kann, dass zwei Server-Abfragen für ein Bild ausgeführt werden müssen. Einmal für die Standard-Variante und ein zweites Mal für die „richtige“ Variante des Bildes. Um das zu verhindern, sollten Sie die Standardgröße so wählen, dass sie für die meisten Besucher bereits passt. Wenn eine Website z. B. hauptsächlich in mobilen Browsern aufgerufen wird, sollten die Standardgrößen darauf ausgerichtet sein.

Fazit

Administratoren bzw. Designer können ab Contao 3.4 umfangreiche Einstellungen für die Bildgrößen vornehmen. Der Workflow für Redakteure hat sich gleichzeitig vereinfacht: Bild hochladen, bedeutenden Bereich auswählen, Bild einfügen und vordefinierte Größe auswählen. Fertig.

Alle RockSolid Themes und Erweiterungen setzen ab sofort standardmäßig auf Responsive Images. Mit unserem Free Theme Open Sauce können Sie die beschriebenen Punkte einfach nachvollziehen, sehen Sie sich dafür die Bildgrößen Slider und Tagline genauer an.

Dank

Es war sehr spannend für mich, an diesem wichtigen neuen Contao-Feature mitzuarbeiten. Ich möchte mich bei Yanick Witschi für seine Unterstützung und bei der gesamten Contao-Community für das rege Interesse an dem Thema bedanken. Ich freue mich darauf bald mehr (Contao-)Websites mit Responsive Images zu sehen.

Dieser Artikel ist Teil einer Serie.

1. Teil: Mehrsprachige Contao-Websites erfolgreich planen und umsetzen
2. Teil: Multi-Language Websites mit Contao erstellen und verwalten – so klappt es!
3. Teil: Experten-Tipps für mehrsprachige Contao-Installationen

Core-Übersetzungen anpassen und globale Labels definieren

Die deutschsprachigen Standardübersetzungen finden Sie in den Übersetzungsdateien im Ordner system/modules/core/languages/de. Sie können die Dateien mit jedem Browser öffnen um die IDs der Texte zu finden, die Sie anpassen möchten.

Updatesicher überschreiben können Sie die Texte in dem Sie die Datei system/config/langconfig.php anlegen, die Datei wird, sobald sie existiert, automatisch von Contao geladen. Darin können Sie eigene globale verfügbare Textbausteine (Labels) definieren und zusätzlich die Standardübersetzungen von Contao und von Third-Party-Erweiterungen überschreiben bzw. anpassen.

Beispiel für das Anpassen des häufig verwendeten Zurücklinks

// Die Bezeichnung in allen Sprachen ändern
$GLOBALS['TL_LANG']['MSC']['goBack'] = '«';

// Die Bezeichnung in einer bestimmten Sprache ändern
if ($GLOBALS['TL_LANGUAGE'] == 'de') {
    $GLOBALS['TL_LANG']['MSC']['goBack'] = 'Zurück zur Übersicht';
}
elseif ($GLOBALS['TL_LANGUAGE'] == 'en') {
    $GLOBALS['TL_LANG']['MSC']['goBack'] = 'Back to overview';
}

Der Text für den Zurücklink aus dem Beispiel kommt aus der Datei default.xlf und hat die ID MSC.goBack, er kann daher mit ['MSC']['goBack'] über das Language-Array angesprochen werden.

Die Sprachdateien sind derzeit noch nicht durchgängig benannt, so heißen die meisten Sprachdateien nach der jeweiligen Datenbanktabelle, einige weichen jedoch von diesem Schema ab. Die Datei default.xlf ist z. B. ein Sammelsurium verschiedenster Texte, die an diversen Stellen in Contao zum Einsatz kommen und daher eine gute erste Anlaufstelle für viele Texte, die im Frontend ausgegeben werden.

Erweiterungen für Übersetzungen meist eine default.php in ihrem language-Ordner im Verzeichnis der Erweiterung unter system/modules ab.

Der Label-Inserttag

Der Label-Inserttag wird mit den Übersetzungen aus den Sprachdateien des Contao-Core bzw. der installierten Erweiterungen und den Texten, die Sie in der langconfig.php individuell festlegen können ersetzt.

// Beispieldefinition in der langconfig.php
$GLOBALS['TL_LANG']['meinbereich']['mein_label_1'] = 'Mein Label 1';

// Beispiel für die Ausgabe des Labels
{{label::meinbereich:mein_label_1}}
// Ausgabe: Mein Label 1

// Beispiel für die Ausgabe eines Core-Textes aus der Datei default.xlf
{{label::PTY:error_404:0}}
// Ausgabe: 404 Seite nicht gefunden

Mehrsprachige Contao-Templates

Bevor Sie PHP-Logik einsetzen um zwischen verschiedenen Inhalten in den Templates zu unterscheiden, sollten Sie versuchen, Texte, die in den Templates stehen müssen, mit Hilfe der global definierten Textelemente zu übersetzen – wie oben beschrieben.

Beispiel für in der langconfig.php global gespeicherte Texte

// Eigene globale Texte
if ($GLOBALS['TL_LANGUAGE'] == 'de') {
    $GLOBALS['TL_LANG']['meinbereich']['mein_label_1'] = 'Mein Label 1';
}
elseif ($GLOBALS['TL_LANGUAGE'] == 'en') {
    $GLOBALS['TL_LANG']['meinbereich']['mein_label_1'] = 'My Label 1';
}

Ausgabe eines global definierten Labels in einem Template

<h1><?php echo $GLOBALS['TL_LANG']['meinbereich']['mein_label_1']; ?></h1>

Wenn in manchen Ihrer Sprachen Änderungen an den Templates notwenig sind, können Sie zusätzlich mit PHP-Logik auf die aktive Sprache prüfen und Änderungen vornehmen (z. B. wenn Teile des Templates nicht in allen Sprachen benötigt werden).

Beispiel für PHP-Logik im Template

<?php if($GLOBALS['TL_LANGUAGE'] == 'en'): ?>
    <!-- English Content -->
<?php elseif($GLOBALS['TL_LANGUAGE'] == 'de'): ?>
    <!-- Deutscher Inhalt -->
<?php endif; ?>

RockSolid Custom Elements übersetzen

Mit den RockSolid Custom Elements können Sie eigene Inhaltselemente erstellen, die exakt auf Ihren und den Bedarf Ihrer Redakteure abgestimmt sind. So können Sie z. B. eine Kombination aus Titel, Bild und Kurztext in einem einzigen Element speichern um WYSIWYG-Chaos auf Team-Seiten und bei vielen weiteren komplexeren Inhalten zu vermeiden.

Die Feldbezeichnungen und Feldbeschreibungen der Custom Elements lassen sich im Backend einfach übersetzen. Öffnen Sie die Config-Datei des jeweiligen Elementes und tragen Sie die mehrsprachigen Texte nach dem folgenden Schema ein:

'label' => array(
    'en' => array('Field Name', 'Description'),
    'de' => array('Feldname', 'Beschreibung'),
),

Allgemeine Informationen dazu, wie Sie eigene Inhaltselemente anlegen können, finden Sie in der Dokumentation der Custom Elements.

Layout, CSS und Schriften

Layout-Änderungen einkalkulieren

Denken Sie daran, dass sich die Textlängen sowohl von Menüpunkten als auch von Fließtexten, je nach Sprache und Stil des Übersetzers, recht deutlich unterscheiden können. Es ist daher wichtig möglichst keine Texte in Grafiken und Bildern zu speichern, sondern Buttons und Interface-Elemente mit Hilfe von CSS3 aufzubauen.

Die Länge der Menüpunkte und Texte kann je nach Sprache und Stil der Übersetzung deutlich variieren, beim Theme Open Sauce passt sich die Navigation problemlos an.

Bei Sprachen, die von rechts nach links gelesen werden wie z. B. Arabisch, sollten Sie schon im Vorfeld daran denken, dass sich sowohl die Textausrichtung als auch die Anordnung des Layouts umkehren. Mehr dazu.

Multi-Language Schriften

Nicht jede Schrift unterstützt alle für Fremdsprachen benötigten Zeichen. Systemschriften, die einen erweiterten Zeichensatz unterstützen sollen wie z. B. Arial Cyrillic müssen oft nachinstalliert werden, sind jedoch nicht zwangsläufig frei verfügbar. Webfonts, die für den internationalen Einsatz gemacht sind deshalb möglicherweise einfacher zu handhaben. Hochwertige Free-Fonts und Schriften für den Corporate-Einsatz unterstützen zumindest den Latin-1 Zeichensatz, der die westeuropäischen Sprachen wie Englisch, Deutsch, Italienisch, Französisch etc. abdeckt.

Für Sprachen wie Kroatisch, Ungarisch, Polnisch oder Türkisch kann es bei manchen Schriften, gerade für den Headline- und Title-Einsatz, für einzelne Zeichen bereits spannend werden. Und wer auf Kyrillisch, Griechisch, Chinesisch, Japanisch, Arabisch etc. übersetzen möchte muss sich die verwendeten Schriften besonders gezielt aussuchen.

Das Schriftprojekt Noto strebt eine vollständige Unterstützung des Unicode-Zeichensatzes an.

Die meisten Font-Bibliotheken bieten deshalb eine Möglichkeit nach Sprachunterstützung zu filtern (z. B. auch Google Fonts und Font Squirrel).

Free-Fonts die von internationalen Unternehmen verwendet, gesponsert oder vorangetrieben verwendet werden bieten oft besonders umfangreiche Zeichensätze, bei denen die nicht-lateinischen Glyphen in Anmutung und Ausrichtung den lateinischen gut entsprechen. Dazu zählen z. B. Droid, Open Sans, Roboto, Ubuntu, Fira Sans und Source Sans Pro.

Besonders breite Abdeckung strebt das Schriftprojekt Noto von Google an, das von der Droid-Schriftfamilie abgespalten wurde. Zukünftig soll der gesamte Unicode-6.2-Raum abgedeckt werden (110.182 Zeichen). Vereinfachtes und traditionelles Chinesisch, Japanisch und Koreanisch sind bereits Teil der Zeichensammlung.

Zur Technik: Empfehlenswert ist die Schrift mit dem jeweiligen erweiterten Zeichensatz erst dann zu laden, wenn sie benötigt wird. Zusätzlich benötigen arabische bzw. asiatische Zeichen oft einen größeren Schriftgrad um die gleiche optische Größe zu erreichen und für einen ähnlichen Grauwert auf der Seite zu sorgen.

Um den Schriftgrad sprachabhängig zu vergrößern, können Sie via CSS direkt den HTML-Tag ansprechen oder eine eigene Klasse vergeben. Beispiel:

<html lang="zh">
    <body class="chinese">

:lang(zh), .chinese {
    font-size: 125%;
}

Mehrere Sprachen auf einer Seite

Gibt es einzelne Seiten auf denen sich Inhalte in verschiedenen Sprachen befinden (z. B. mehrsprachige Einstiegsseiten, Zitate) oder falls Sie auf allen Seiten zweisprachige Inhalte parallel anzeigen möchten, weil z. B. nur kurze Beschreibungstexte nötig sind (etwa für ein Fotografie-Portfolio), können Sie die Sprache auch innerhalb der Seite definieren. Das sorgt für die richtige Aussprache für blinde Benutzer, die auf einen Screenreader angewiesen sind.

Contao bietet für einzelne Wörter oder Sätze einen eigenen Inserttag {{lang::*}}:

{{lang::fr}}Au revoir{{lang}}

// Wird zu
<span lang="fr" xml:lang="fr">Au revoir</span>

Sind ganze Seitenteile in einer anderen Sprache lassen sich diese wie folgt auszeichnen:

<blockquote lang="fr">
    <p>Il n'est rien de réel que le rêve et l'amour.</p>
</blockquote>

Die Sprache einer verlinkten Seite lässt sich mit dem Attribut hreflang angeben:

<!-- Französischer Inhalt, deutscher Linktext -->
<a href="" hreflang="fr">Französische Seite</a>

<!-- Französischer Inhalt und Linktext -->
<a href="" lang="fr" hreflang="fr">Page français</a>

Sind die Inhalte auf einer Seite gleichmäßig verteilt, sollten Sie das Sprachattribut entweder vom HTML-Tag entfernen oder auf die „Hauptsprache“ z. B. Englisch setzen <html lang="en">. Die Sprache der Inhalte kann dann auf der Seite wie bereits gezeigt gekennzeichnet werden:

<div lang="de" xml:lang="de">
    Deutscher Inhalt
</div>
<div lang="en" xml:lang="en">
    English content
</div>

Beispiel der Seite hostel64.com mit Englisch und Japanisch jeweils auf der selben Seite.

Encoding und Schreibrichtung

UTF-8-Kodierung explizit angeben

Egal ob ein- oder mehrsprachig, Sie sollten Ihre Website als UTF-8 kodiert ausliefern. Der De-facto-Standard wird von Contao bereits zur Speicherung der Daten verwendet, daher werden wir nicht näher darauf eingehen. Damit die Ausgabe korrekt funktioniert, kontrollieren Sie nur, ob sich nachfolgende Meta-Tags im Template befinden und fügen sie bei Bedarf ein.

HTML4 (veraltet):

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

HTML5 und standard in allen RockSolid Themes:

<meta charset="UTF-8">

Umgekehrte Schreibrichtung beachten

Für von rechts nach links geschriebene Sprachen wie z. B. Arabisch, Hebräisch oder Urdu sollte das dir-Attribut (Direction) des HTML-Tags auf rtl (right-to-left) gesetzt werden.

<html dir="rtl">

Zusätzlich wird die Ausrichtung des Textes via CSS text-align auf right gesetzt.

Beispiel der Seite des arabischen Providers »du« mit geänderter Textausrichtung und horizontal umgekehrtem Layout – inklusive kleiner Unachtsamkeiten.

Beachten Sie, dass die Sakkaden (Augenbewegung) von Menschen die von rechts nach links lesen allgemein genau umgekehrt verlaufen – wichtige Elemente wie Logo, Navigation etc. sollten also ebenfalls die Seite wechseln. Das übliche f-förmige Lesemuster ist, statt von links nach rechts und von oben nach unten, genau invertiert wie eine Studie der Nielsen Normal Group zeigt. Allgemeine Usability-Richtlinien haben der Untersuchung zufolge internationale Gültigkeit – müssen jedoch teilweise seitenverkehrt angewendet werden.

User testing on 3 continents confirmed that the main usability guidelines hold worldwide, but many other considerations exist to better support international users. – Jakob Nielsen

Fazit: Rechnen Sie ausreichend Zeit für Right-to-Left-Sprachversionen ein. Angefangen vom WYSIWYG-Editor über Erweiterungen, die Probleme machen können, warten garantiert einige Überraschungen auf Sie. Darüber hinaus müssen Layout und Inhalt horizontal umgekehrt werden – also unter anderem auch Abstände, Rahmen und Bilder.

Am besten sollten Sie eine Right-to-Left-Sprachversion deshalb schon vorher einplanen um Floats und Ausrichtung möglichst flexibel zu halten oder um z. B. besonders häufig mit display: inline-block zu arbeiten, damit auch Boxen und Container von der geänderten Textrichtung direkt betroffen sind.

Öffnen Sie die Datei system/config/localconfig.php und löschen folgende Zeile:

$GLOBALS['TL_CONFIG']['installPassword'] = 'xxxxx';

Danach können Sie /contao/install.php im Browser aufrufen und ein neues Passwort vergeben.

Dieser Artikel ist Teil einer Serie.

1. Teil: Mehrsprachige Contao-Websites erfolgreich planen und umsetzen
2. Teil: Multi-Language Websites mit Contao erstellen und verwalten – so klappt es!
3. Teil: Experten-Tipps für mehrsprachige Contao-Installationen

Tl;dr: In 5 Minuten zur mehrsprachigen Contao-Website

Um Ihre Website mit Contao mehrsprachig zu machen sind grundsätzlich keine Erweiterungen nötig. Wie Sie Ihre Seite in nur fünf Minuten mehrsprachig machen, erfahren Sie in der nachfolgenden Kurzanleitung. Die Schritte funktioniert mit jedem RockSolid Theme und Themes, die den Contao-Standards folgen.

1. Schritt: .htaccess.default in .htaccess umbenennen bzw. falls bereits geschehen die Weiterleitungen aktivieren (standardmäßig bereits aktiv)

Benennen Sie die Datei .htaccess.default im Hauptverzeichnis Ihrer Contao-Installation in .htaccess um – falls noch nicht geschehen.

Sollten Sie die Weiterleitungen am Ende der Datei gelöscht oder auskommentiert haben, stellen Sie die Zeilen wieder her. Davor sollten Sie gegebenenfalls überprüfen welchen Grund das Entfernen ursprünglich hatte, damit es nicht zu Problemen kommt.

2. Schritt: Navigieren Sie zu: System › Einstellungen

1. URLs umschreiben aktivieren
2. Wenn gewünscht: Die Sprache zur URL hinzufügen aktivieren

3. Schritt: Den Seitenbaum duplizieren

Den Seitenbaum duplizieren, umbenennen und ggf. den Sprachen-Fallback aktivieren. Auf die Fallback-Sprache werden alle Benutzer geleitet, für deren Browser-Spracheinstellung sie keine eigene Sprachversion anbieten.

Beispiel zum Sprachen-Fallback: Bei Deutsch-Englisch würden Sie z. B. Englisch als Fallback-Sprache wählen, wenn Sie schon derzeit viele internationale Besucher auf Ihrer Seite haben, die zukünftig automatisch auf die englischen Version weitergeleitet werden sollen. Nur Besucher mit deutschen Spracheinstellungen würden so auf der deutschsprachigen Seite landen.

4. Schritt: Seiten, Inhalte und Module anpassen

Inhalte anpassen: Das Anpassen der Inhalte, die sich in Artikeln befinden, funktioniert, wie Sie es erwarten. Öffnen Sie die jeweiligen Seiten bzw. Artikel des neu entstandenen Seitenbaums und passen Sie dort die Titel, Aliase (= URL) und Inhalte an.

Module anpassen: Mit Hilfe der Inserttags können Sie Inhalte in Modulen sprachspezifisch anpassen und sparen es sich so viele Module für jede Sprache anlegen zu müssen. Statt die Module für jede Sprache zu duplizieren nutzen Sie folgende Inserttags:

// Verschwindet gänzlich wenn die Sprache nicht 'en' oder 'de' ist
{{iflng::en}}Your name{{iflng::de}}Ihr Name{{iflng}}

// Zeigt in der deutschen Sprachversion den deutschen Inhalt und für alle anderen den Fallback
{{ifnlng::de}}Your name{{ifnlng}}{{iflng::de}}Ihr Name{{iflng}}

Module wie Nachrichtenliste, Nachrichtenleser, FAQ-Liste etc. müssen für jede Sprache dupliziert werden um die jeweils richtige Inhaltsquelle (z. B. News-Archiv) wählen zu können.

Beispiel für News-Module mit Sprachpräfix und ein Navigationspfadmodul, das in allen Sprachen zum Einsatz kommt, weil die Überschrift innerhalb des Moduls mit Inserttags übersetzt wurde - siehe oben.

Denken Sie daran, dass Sie Inserttags auch verschachteln können, um z. B. verschiedene Artikel zu laden oder andere Unterscheidungen zu treffen.

Beispiel: Artikel/Inhalte sprachabhängig laden

{{iflng::en}}
    {{insert_article::21}}
{{iflng::de}}
    {{insert_article::54}}
{{iflng}}

Beispiel: Datum sprachabhängig ausgeben

{{iflng::en}}
    Today's date is {{date::m/d/Y}}
{{ifnlng::en}}
    Heute ist der {{date::d.m.Y}}
{{iflng}}.

Beispiel: Iflang innerhalb einer Überschrift einsetzen

Das Beispiel zeigt deutlich, dass Inserttags innerhalb von Contao praktisch überall funktionieren. Genau das macht sie für Übersetzungen sehr hilfreich.

Optional: Haben Sie eigene Templates, die Texte enthalten oder möchten Teile von Templates in einer Sprache entfernen bzw. anpassen können Sie dies mit PHP-Logik tun. Mehr dazu im dritten Teil der Artikelserie.

5. Schritt: Sprachversion verlinken

Setzen Sie an der gewünschten Stelle in Ihrem Layout einen Link auf die neue Übersetzung. Zum Beispiel die Startseite der englischen Version.

Optional: Sprach- und Newswechsler

Anstatt den Startpunkt der verschiedenen Sprachversionen manuell zu verlinken, entscheiden sich manche Webmaster dazu die Erweiterung [changelanguage] zu installieren um beim Umschalten der Sprache jeweils wieder auf der richtigen Seite zu landen, sofern die Seite in der Übersetzung existiert.

So funktionierts: Der Sprachwechsler fügt allen Seiten ein Feld hinzu, das es Ihnen erlaubt die jeweilige Übersetzung zuzuordnen. Haben Sie die Verknüpfung getroffen, können Sie das Modul „Sprachwechsler“ an einer beliebigen Stelle in Ihren Layouts einfügen um zwischen den Sprachen zu wechseln.

Mit der Erweiterung [newslanguage] kann in Verbindung mit [changelanguage] auch zwischen News-Beiträgen in verschiedenen Sprachen gewechselt werden.

Fehler: Häufige Probleme

Die Sprachversionen werden nicht verlinkt

Verlinken Sie die Sprachversionen nicht, kann das dazu führen, dass nicht alle Inhalte korrekt von Suchmaschinen und anderen Bots indiziert werden können.

FAQ: Häufige Fragen

Wie kann ich kleine Flaggen zur Sprachwahl mit [Changelanguage] verwenden?

Flaggen für die Sprachwahl zu verwenden ist, aus verschiedenen Gründen, keine Gute Idee. Möchte man es dennoch tun können Sie auf Flaggen-Icons und CSS zurückgreifen. Weitere Informationen und Beispiele dazu finden Sie im Community-Forum.

Lesen Sie demnächst den dritten Teil der Artikelserie zum Thema: Experten-Tipps für mehrsprachige Contao-Installationen. Tragen Sie sich jetzt in den Newsletter ein und erhalten Sie einmal im Monat wertvolle Inhalte rund um Contao.

Dieser Artikel ist Teil einer Serie.

1. Teil: Mehrsprachige Contao-Websites erfolgreich planen und umsetzen
2. Teil: Multi-Language Websites mit Contao erstellen und verwalten – so klappt es!
3. Teil: Experten-Tipps für mehrsprachige Contao-Installationen

Wichtige Fragen zu Beginn

1. Welche Sprachen bringen Ihnen Erfolg?

Eine Website zu übersetzen kostet Zeit, Geld und Nerven. Und wie jede andere Marketingmaßnahme muss sich eine neue Sprachversion am Ende rechnen. Werten Sie erst Ihre Zugriffszahlen nach Sprachen und Ländern aus, um realistisch abzuschätzen wie viele neue Besucher bzw. zusätzlichen Absatz die Sprachversion bringen kann.

Um eine informiertere Entscheidung zu treffen, sollte erst einen Teil der Website, etwa die Startseite und/oder einige Hauptpunkte übersetzt werden, so erhalten Sie ein erstes Gefühl für die Auswirkungen der mehrsprachigen Suchmaschinenplatzierungen.

Wenn Sie schnelle Ergebnisse möchten, empfiehlt es sich zusätzlich länder- und sprachspezifische bezahlte Werbung (z. B. AdWords) zu schalten, um Erfahrungen im neuen Markt zu sammeln. Die üblichen Kennzahlen wie Klick- und Absprungrate, Besuchszeit und vor allem Besucherzahl geben Ihnen einen ersten Eindruck des aktuellen Potenzials Ihrer Website im neuen Markt. Zusätzlich können Sie testen welche Keywords und Begriffe in der Zielsprache ankommen.

2. Schätzen Sie die Kosten und zusätzlich nötigen Ressourcen richtig ein?

Denken Sie daran, dass jede Änderung am Inhalt fortan übersetzt und mehrmals durchgeführt werden muss, um die verschiedenen Sprachversionen aktuell zu halten.

Ein Beispiel: Sie schaffen neue Inhalte, lassen das Ergebnis übersetzen, oder tun es selbst, und anschließend fügen Sie die Texte mehrmals ein. Nachdem Sie den ursprünglichen Inhalt zwei Wochen später adaptieren, weil Kunden wiederholt Fragen zu einem Punkt hatten, geht das Spiel von neuem los.

Die Preise für die Übersetzung einer einzelnen Seite beginnen zwar schon bei ca. € 5, die Kosten können jedoch rasant steigen, wenn Sie jemanden beauftragen möchten, der a) etwas von der Materie versteht und b) den nötigen Wortschatz mitbringt. Qualität kostet gerade bei Fachübersetzungen schnell Geld.

3. Ist Ihre Dienstleistung bzw. Ihr Produkt bereit für weitere Sprachen?

Gibt es die Bedienungsanleitung in der neuen Sprache? Erfüllt Ihr Produkt alle Auflagen und Bedingungen um es exportieren zu dürfen? Ist die Logistik bereit zum Versenden ins Ausland? Sind Ihr Team und Sie bereit zum Erbringen Ihrer Dienstleistungen zu reisen?

4. Können Sie mit Kunden kommunizieren, die mit Ihnen in Kontakt treten?

Eine Sprache lesen und grundsätzlich verstehen zu können, unterscheidet sich stark davon sie zu sprechen und zu schreiben. Sind Sie und Ihr Team bereit dafür professionell mit internationalen Kunden in Kontakt zu treten?

5. Sind Sie innerbetrieblich auf Exporte vorbereitet?

Beispiele: Verkäufe in einer anderen Währung, Umsatzsteuer im EU-Ausland und die damit verbundene „zusammenfassende Meldung“, Ausfuhrzölle etc.

Ein Beispiel für einen Verwaltungsmehraufwand, der durch internationalen Verkauf entsteht: Ab 1.1.2015 müssen auch Dienstleistungen die auf elektronischem Weg erbracht werden wie z. B. E-Books, Webhosting, Software etc. in dem Land versteuert werden, in dem sie erbracht wurden. Verkaufen Sie Ihre Leistung also z. B. von Deutschland nach Österreich müssen 20 % statt 19 % Umsatzsteuer berechnet werden. Weitere Informationen dazu.

6. Was muss alles übersetzt werden?

Denken Sie daran, dass oft auch Materialien wie PDFs, Videos und Grafiken übersetzt werden müssen. Genauso wie externe Inhalte und Werbung wie z. B. AdWords, Banner und Partnereinträge.

7. Reicht eine Übersetzung oder benötigen Sie eher eine Lokalisierung?

Internationalisierung, Übersetzung, Lokalisierung/Adaptierung – alles eins? Mitnichten.

Eine Internationalisierung wird eher als produktbezogener Schritt verstanden und bedeutet nicht zwingend, dass auch eine Übersetzung nötig ist, etwa für den Verkauf eines deutschen Produktes im gesamten deutschsprachigen Raum. Außerdem wird der Begriff teilweise für das Schaffen der Möglichkeit einer Übersetzung oder Lokalisierung verwendet.

Stark vereinfachtes Beispiel: Eine Internationalisierung wäre es wenn Nutella mit deutschsprachiger Verpackung im DACH-Raum verkauft wird.

Und während eine Übersetzung nur die sinngemäße Wiedergabe eines Inhalts in einer anderen Sprache bedeutet, ginge eine Lokalisierung einen Schritt weiter und würde den Inhalt so anpassen, dass er die gleiche Wirkung erzielt und sich den sprachlichen, regionalen und kulturellen Gegebenheiten des Zielmarktes anpasst. Das kann Stil, numerische Formate, Datum und Zeit sowie Farben und Symbole einschließen.

Fortsetzung des obigen Beispiels: Eine Übersetzung wäre es, wenn Nutella mit mehrsprachiger Verpackung angeboten würde. Und eine Lokalisierung ist es, wenn Nutella auch noch seine Konsistenz anpasst, damit Deutsche ihr Schwarzbrot und Franzosen ihr Baguette perfekt damit schmieren können.

Nun zum spannenden Teil

Nachdem ich Ihnen alle Lust auf eine Übersetzung bzw. Lokalisierung Ihrer Website genommen habe, kommen wir zum spannenden Teil: Wie stellen Sie es an, wenn Sie sich trotz allem dazu entschieden haben? Und zwar so, dass es reibungslos und effizient klappt.

Den richtigen Partner für die Übersetzung finden

Online-Übersetzungsagenturen

Die Preise bei den gängigen Online-Übersetzungsbüros gehen von ca. € 40 für 1000 Wörter für die Korrektur einer automatischen Übersetzung (nicht empfehlenswert) bis hin zu ca. € 240 für zertifizierte und professionelle Übersetzungen.

Bei einigen Anbietern wie z. B. Translated.net, 24translate.de und easytrans24.com lässt sich das Fachgebiet des Textes manuell angeben. Tolingo lässt Sie Branche und Textart in einem zweiten Schritt wählen.

Die bekanntesten Anbieter für Online-Übersetzungen

• www.tolingo.com – Sehr professionell, aber für kurze Texte wegen des Grundpreises etwas teurer. Große Auswahl an Sprachen. Sitz in Hamburg.
• www.translated.net – Viele Sprachen, viele Übersetzer, jedoch ohne DIN EN 15038 Zertifizierung und wegen des Sitzes in Rom, sind als Privatperson 22 % USt. zu bezahlen
• www.24translate.de – 24Translate versucht mit einer Preis-Leistungs-Garantie und einem 6-Augen-Prinzip besonders hohe Qualität sicherzustellen. Standort Hamburg.
• www.easytrans24.com - Bieten auch Lektorat und Korrektorat bestehender Texte aus vielen Quellformaten. Standort Hamburg.
• www.lingoking.com – Wortwiederholungen werden automatisch verrechnet. Weitere Leistungen: Telefondolmetschen und Dolmetschervermittlung. Standort München.

Bitte beachten Sie, dass dieser kurze Überblick keinen fairen Vergleich ermöglicht. Wägen Sie daher selbst ab, welcher Service Ihren Anforderungen entspricht oder noch besser: Vergeben Sie erst kleinere Aufträge an verschiedene Anbieter, um herauszufinden mit welchem die Zusammenarbeit am besten klappt, bevor Sie die gesamte Übersetzung beauftragen.

Lokales Übersetzungsbüro oder Freelancer

Das nächstgelegene Übersetzungsbüro muss nicht teurer sein als einer der Online-Services. Ein Vorteil ist aber, dass sich freie Übersetzer oder Agenturen bei Bedarf leichter auf Ihren Arbeitsablauf einstellen können – oder es zumindest versuchen. Da die Online-Anbieter hunderte oder eher tausende Aufträge in kurzer Zeit abzuwickeln haben, bleibt weniger Raum für persönliche Sonderwünsche.

Möchten Sie Ihre Übersetzung z. B. direkt innerhalb von Contao abwickeln, ohne die Inhalte zu ex- und importieren lässt sich das Übersetzungsbüro von nebenan leichter überzeugen, als einer der Online-Platzhirsche. Sich zuerst in Ihrer Umgebung umzusehen kann sich also auszahlen.

Im Gegenzug wird es kleinen Büros oder Einzelpersonen schwerer fallen, Ihnen ein Vier- oder gar Sechs-Augen-Prinzip für die direkte Korrektur der Übersetzung anzubieten.

Es liegt bei Ihnen und den Anforderungen Ihres Auftrages ob Ihnen besonders persönliche Betreuung, hohe Standards oder beides gleichermaßen wichtig sind.

Einen lokalen Partner für die Übersetzung finden

In der deutsche Bundesverband der Dolmetscher und Übersetzer e.V. bietet eine umfangreiche, durchsuchbare Datenbank an Experten, auch aus Österreich und der Schweiz. Die private Seite uebersetzer-verzeichnis.com umfasst ebenfalls eine große Auswahl an Übersetzern aus Deutschland, macht jedoch starken Gebrauch von bezahlten Anzeigen.

UNIVERSITAS, der Berufsverband für Dolmetschen und Übersetzen in Österreich, sowie die Dolmetscher- und Übersetzervereinigung der Schweiz, bieten einen ähnlichen Service.

Achten Sie bei der Auswahl darauf, dass sich der jeweilige Experte mit dem thematischen Schwerpunkt Ihrer Texte wohlfühlt und den Fachjargon beherrscht. Wenn es um eine englische Übersetzung geht, sollten Sie im Idealfall auch darauf achten, ob es sich um einen amerikanischen, britischen oder z. B. australischen Nativespeaker handelt.

Briefing und Beauftragung

Wie jeder andere Experte, benötigt auch ein Übersetzer genaue Angaben darüber was Sie erreichen möchten. Investieren Sie daher ausreichend Zeit und Energie in ein detailliertes Briefing.

Informationen zu gewünschtem Sprachstil und Ton

Was soll der Text beim Leser auslösen? Wie lautet die Handlungsaufforderung oder was soll nach dem Lesen zurückbleiben? Für welche Zielgruppe ist der Text bestimmt? Stilistisch flott und ungezwungen oder seriös und besonders sachlich? Welche Art von Website betreiben Sie?

Machen Sie dem Übersetzer klar, mit welchem Hintergrund Sie den Ausgangstext verfasst haben und wen Sie damit ansprechen möchten. Je mehr Informationen Sie geben, desto leichter ist es die bestmögliche Wirkung auch in der Zielsprache zu erreichen.

Zusätzliche Informationen und Referenzmaterialien

Wenn Sie Ihre Texte für ein bestimmtes Produkt oder Ihren Shop übersetzen lassen, stellen Sie Produktbilder zur Verfügung. Möchten Sie Interface-Elemente Ihrer Website oder App-Übersetzen lassen, dann fügen Sie Screenshots bei oder geben Zugang zur Originalversion. So kann der Übersetzer einfacher erkennen in welchem Kontext seine Worte stehen werden.

Sind Grafiken oder PDFs zu übersetzen liefern Sie den Inhalt entweder als Rohdaten mit oder stellen die Texte separat zur Verfügung.

Eigennamen, Unternehmenssprache und Fachbegriffe

Legen Sie einen Glossar an, wenn Sie Fachwörter oder Teile Ihrer Unternehmenssprache auf bestimmte Weise übersetzt haben möchten. Das gilt auch für No-go-Begriffe oder häufig falsch verwendete Wörter, die Sie keinesfalls im Text haben möchten. Auch nicht alltägliche Abkürzungen sollten erklärt werden, damit sie übersetzt werden können.

Beispiel: Wir würden z. B. definieren, dass der Begriff „Homepage“ nur verwendet werden darf, wenn tatsächlich die Startseite einer Website gemeint ist. Und „Webseite“ nur, wenn eine einzelne Seite eines Internetauftritts gemeint ist.

Nicht zu übersetzende Textteile markieren

Markieren Sie Textteile, wie z. B. Inserttags oder interne Referenzen wie die URL der Seite deutlich bzw. trennen Sie sie klar vom eigentlichen Inhalt ab.

Empfehlenswerte Dateiformate für Website-Übersetzungen

Ein wesentlicher Teil eines effizienten und nervenschonenden Arbeitsablaufes für Übersetzungen ist das gewählte Dateiformat bzw. Medium, das für die Zusammenarbeit mit dem Übersetzer genutzt wird.

Die üblichen Dateiformate

Vorteile: Diese Formate können praktisch von jedem ohne weitere Erklärung geöffnet und bearbeitet werden. Für kleine Seiten und Textmengen geeignet.

Nachteile: Zwar könnte man die Übersetzungen relativ übersichtlich mit Leerzeilen o.ä. trennen, ein automatischer Import wird jedoch nicht möglich sein. In der Praxis erhalten Sie das übersetzte Dokument, wie es ist, zurück.

Vorteile: Kann praktisch jeder öffnen und ohne weitere Erklärung bearbeiten. Plus: Es ist grundsätzlich ein strukturiertes Dateiformat. Heißt: Der Zusammenhang von Original und Übersetzung ist nicht nur klar (auch bei einzelnen Wörtern und Sätzen), sondern kann bei Bedarf automatisch verarbeitet werden. Für kleine und mittlere Seiten gut geeignet.

Vorteile: Kann bei kleineren laufenden Anpassungen und Korrekturen leichter aktuell und synchron gehalten werden, das vermeidet Dateinamen wie 2014-05_uebersetzung_example_de_final_v4.doc.

Nachteile: Viele (gerade Teilzeit-) Übersetzer arbeiten häufig offline, was mit beiden Tools zwar grundsätzlich möglich ist, die Skepsis gegenüber einem möglicherweise noch unbekannten Werkzeug jedoch weiter erhöht. Sofern Ihre Texte später online erscheinen ist es vermutlich kein Gegenargument, dass es sich bei beiden Tools um Cloud-Services handelt.

Gängige Formate professioneller Übersetzer

Computer-Aided Translation (CAT) Tools machen es in der Regel möglich Inhalte im Kontext zu sehen und speichern bereits übersetzte Texte im sogenannten Translation Memory zu speichern. Das erleichtert und beschleunigt nicht nur die Übersetzung sondern stellt sicher, dass die gleichen Begriffe konsequent wiederverwendet werden.

Vorteile: Wenn es Ihnen möglich ist Ihre Inhalte gesammelt in einem strukturierten Textformat zur Verfügung zu stellen, das Ihr Übersetzer direkt mit der CAT-Software seiner Wahl öffnen kann, dann tun Sie es. Denken Sie daran, dass Sie die fertige Übersetzung im Anschluss verarbeiten müssen.

Nachteile: Wenn Ihre italienische Schwägerin oder der Onkel aus England die Übersetzung vornehmen sollen, werden sie mit diesen Formaten wenig Freude haben. Zwar gibt es einige gute kostenlose Tools, die Lizenzen für die professionellen Standardwerkzeuge kosten jedoch mehrere hundert Euro.

Kostenpflichtige Software

• SDL Trados
• Across
• memoQ
• Swordfish

Freie Software

• Lokalize
• Qt Linguist
• Virtaal
• OmegaT
• Pootle

Inhalte aus Contao für die Übersetzungen exportieren

Die derzeit einzige angebotene Lösung, um Inhalte (auch aus News, Events, Formularen und unseren Custom Elements) zum Übersetzen aus Contao zu exportieren und anschließend zu importieren, ist die kommerzielle Erweiterung Language Tools.

Die Erweiterung kostet je nach gewünschtem Exportformat (.csv, .xml, .xliff) zwischen € 350,00 und € 550,00. Nach dem Kauf kann sie für beliebig viele eigene Projekte verwendet werden.

Besonders für Sprachen wie Hebräisch oder Russisch, die für Unkundige keinen Interpretationsspielraum mehr zulassen ist der Ex- und Import eine deutliche Arbeitserleichterung. Ob Sie und Ihr Übersetzungsdienstleister mit den Daten arbeiten können, lässt sich vorab mit den auf der Website der Language Tools zur Verfügung gestellten Demo-Daten überprüfen.

Einschränkung: Das FAQ-Modul wird zum Zeitpunkt dieses Artikels noch nicht unterstützt, ist jedoch, genauso wie eine Anbindung an MetaModels und Isotope, bereits in Planung.

Fazit: Wie gut der Export aus Contao mit den Language Tools wirklich funktioniert können wir, ohne die Erweiterung selbst getestet zu haben, nicht beurteilen. Die Behandlung der verschiedenen Module, Inhaltselemente und „losem“ HTML wie Content-Links und Bildern ist für die Entwickler eine große Herausforderung und ganz ohne nachzuarbeiten wird eine Übersetzung auch mit diesem Hilfswerkzeug eher nicht möglich sein.

Inhalte direkt mit Hilfe des CMS übersetzen

Die Inhalte direkt „an Ort und Stelle“ zu übersetzen, ist je nach Struktur und Größe der Seite eine effiziente und grundsätzlich einfach zu bewerkstelligende Vorgehensweise – sofern der Übersetzer davon überzeugt werden kann auf ein CAT-Tool zu verzichten.

Vorteile: Kein hin und her kopieren. Keine durch den Dateitransfer verursachten Reibungsverluste. Content-Links, Bilder und Co. können in einem Arbeitsschritt angepasst werden.

Beachtenswert: Funktioniert nur für Inhalte, die direkt und leicht erreichbar sind. Alle anderen Textteile müssen separat zur Verfügung gestellt werden, da man es seinem Übersetzer kaum zumuten kann einzelne Module oder gar Templates ausfindig zu machen.

Während der Übersetzung noch nicht mehrsprachig verfügbare Inhalte sollten dokumentiert werden um zu verhindern, dass falsche Links und fehlende Videos, Downloads etc. zurückbleiben.

Ist es nicht möglich eine Arbeitskopie der Seite und Datenbank zu erstellen, weil z. B. laufend an der Ausgangssprache gearbeitet wird, sollten zumindest regelmäßige Backups gemacht werden.

Zusätzlich sollten die Rechte des Benutzers für den/die ÜbersetzerIn so eingeschränkt werden, das ungewollte Änderungen an der Live-Version der Website möglichst ausgeschlossen sind. Stichworte: Aus versehen die Originalseite übersetzt, Inhalte gelöscht oder verändern etc.

Fazit: Sofern sich der Übersetzer in der Lage fühlt, nach einer Einschulung, mit dem CMS zu arbeiten und der Spagat gelingt die Texte aus Templates, E-Mails und Co. zusätzlich zur Verfügung zu stellen, ist die Übersetzung direkt mit Hilfe des CMS eine angenehme Lösung für alle Beteiligten.

Vorteile eines professionellen CAT-Programmes, wie eine Translation-Memory-Funktion, die alle Inhalte speichert und bereits übersetzte Inhalte direkt vorschlägt fallen jedoch weg. Auch ein eventuelles Lektorat muss direkt über das CMS erfolgen. Insgesamt also ebenfalls eher eine Lösung für kleine bis mittlere Seiten.

SEO und URL-Struktur

Damit Ihre neue Sprachversion nicht unverhofft zu einem SEO-Nach- statt Vorteil führt sollten Sie vor allem darauf achten, dass die Sprachversionen leicht zugänglich, also direkt verlinkt sind, und es nicht durch auf über verschiedene Wege zugängliche Seiten wie z. B. /de und /de/home zu Duplicate Content kommt.

Empfehlenswerte URL-Stukturen

Je nachdem ob Sie auf einzelne Länder oder ganze Sprachen abzielen, sind die am besten geeigneten URL-Schemen example.com/de und example.de. Weitere mögliche Strukturen und Ihre Vor- und Nachteile finden Sie unter anderem in den Google Webmaster Richtlinien.

Unterverzeichnisse und eine internationale Domain (example.com/de)

Die mit einfach umsetzbare Variante mit Unterverzeichnissen ist praktikabel, effektiv und günstig, das macht sie für praktisch alle Seiten, die Sie je mit Contao betreiben werden zur richtigen Wahl. Nur wenn Sie gezielt einzelne Länder ansprechen möchten oder Ihre Seite auf verschiedene Serverstandorte verteilen möchten, können länderspezifische Domains Vorteile bringen.

Die Idee hinter der Struktur mit Unterordnern ist, dass eine gTLD, also eine internationale Domain wie .com, org oder .eu, verwendet wird und die Ausrichtung auf die Zielländer mit anderen Methoden erfolgt. So kann das Hauptzielland bei Google z. B. über die Webmaster Tools definierten werden.

So erlaubt es diese Variante, die Vorteile einer länderspezifischen Domain mit denen einer internationalen weitgehend zu verbinden, ist dabei jedoch flexibler, einfacher und günstiger in der Unterhaltung. Darüber hinaus wird die gesamte Linkpower, anders als bei einem Subdomain-Schema wie de.example.com, auf einer Domain gesammelt, was zu einem höheren Page-Rank der Startseite führen kann.

Länderspezifische Domain (example.de)

Länderspezifische Domains sind von vornherein einer geografischen Region zugeordnet, die für den Benutzer deutlich erkennbar ist. Trotzdem können länderspezifische Websites Sprachversionen nach dem Schema example.de/it anbieten, ein gutes Beispiel dafür wäre etwa ein deutsches Hotel, das seine italienischen Gäste in deren Landessprache ansprechen möchte.

Geografisch eindeutig zugewiesene Domains sind vor allem für Projekte von Vorteil, deren Angebot vor allem regional ausgerichtet ist. Hauptsächlich deshalb weil meinprojekt.de unterbewusst darauf schließen lässt, dass das jeweilige Projekt oder Produkt einen stärkeren regionalen Bezug hat als z. B. meinprojekt.com/de.

Der Vorteil, dass sich (sehr) große Seiten einfacher auf verschiedene Server aufteilen lassen, hat in einer Zeit, in der der Einsatz eines CDN und andere Geschwindigkeitsoptimierungen sehr einfach möglich sind kaum noch Bedeutung.

Checkliste für die Vorbereitung Ihrer Übersetzung

Häufige Fehler

1. Die Ausgangsversion wird während der Übersetzung verändert

Die Ausgangssprache wird nach Beauftragung der Übersetzung weiter verändert bzw. die fertige Übersetzung bleibt so lange liegen, dass sich das Original bereits verändert hat.

2. Länderspezifische Ausdrucks- und Schreibweisen werden vernachlässigt

Häufigstes Beispiel: British vs. American English. Ob feine Unterschiede wie colour/color, jewellery/jewelery oder die Schreibweise mit -ise statt -ize wie in localisation/localization, bis hin zu komplett unterschiedlichen Begriffen wie football/soccer oder chips/french fries.

Je nachdem woher Ihre Zielgruppe stammt, könnte ein Brite demnach besser für Ihre Übersetzung geeignet sein als z. B. ein Amerikaner oder Australier. Zwar wird jeder Englischsprechende verstehen, worum es geht, eher zuhause wird er sich jedoch mit der gewohnten Schreibweise fühlen. Und findet man in Ihrem Shop zwar ein mobile phone, aber kein cell phone kann der Unterschied noch direkteren Einfluss haben.

Überlegen Sie sich also gut, welche Sprache Ihre Zielgruppe spricht und wählen Sie den Übersetzer entsprechend.

3. Übersetzung mit Hilfe von Google Translate und Praktikant

Ihre Inhalte sind ein Verkaufsinstrument und von der Qualität Ihrer Texte, schließen Kunden unterbewusst direkt auf die Qualität Ihrer Produkte und Dienstleistungen. Übersetzungen, vor allem in Sprachen, die Sie selbst nicht beherrschen, sind Vertrauenssache. Beauftragen Sie einen professionellen Übersetzer der a) etwas von der Materie im Text versteht und b) die Sprache perfekt beherrscht.

4. Standardphrasen werden 1:1 übersetzt

Ob „Jetzt unverbindlich anfragen“, „In den Warenkorb“ oder „abonnieren Sie unseren Newsletter“ statt die Übersetzungen für gewohnte Bedienelemente neu zu erfinden, sollten Sie einen Blick auf andere Websites werfen um zu vergleichen bzw. Ihren Übersetzer bitten besonders bei Interface- und Call-to-Action-Elementen auf verbreitete Schreibweisen zu achten.

5. Flaggen statt Textlinks für die Sprachwahl

Deutsch ist Amtssprache in Belgien, Brasilien (z. B. Domingos Martins), Deutschland, Italien (Südtirol), Liechtenstein, Österreich, der Schweiz und der Slowakei (Krahule). Indien hat 23 Amtssprachen, die Schweiz vier. Die Iren sprechen zwar English, manche klicken deshalb trotzdem ungern auf die Flagge des Vereinigten Königreichs. Und obwohl Englisch weder im Vereinigten Königreich, noch in den USA, die offiziell festgelegte Amtssprache ist (sic!), ist sie es in mehr als 70 anderen Nationen.

Da viele Sprachen also in mehr als einem Land gesprochen werden, ist es wenig sinnvoll Landesflaggen als Symbole für Sprachen zu verwenden.

Betreiben Sie hingegen eine länderspezifische Seiten oder einen Shop, wäre das ein Ausnahmefall, in dem Landesflaggen sinnvoll sein können. Apple etwa bietet seine lokalisierten Onlineshops teilweise in mehreren Sprachen, den kanadischen Shop z. B. in Englisch und Französisch. In diesem Fall repräsentieren die Flaggen korrekterweise die Länder.

6. Datum, Währung und Zahlen

Ist der erste Tag der Woche nun Sonntag oder Montag? Schreiben Sie das Datum als dd.mm.yy oder mm/dd/yy und nutzen Sie Kommas als Tausendertrennzeichen und Punkte als Dezimaltrennzeichen?

Fragen über Fragen und das war erst der Anfang. Groß- und Kleinschreibung (Title Case), Anführungszeichen und Abkürzungen für vieles, mit dem wir schon in unserer Muttersprache kämpfen, gibt es in anderen Sprachen eigene Regeln. Einen minutiösen Überblick der Regeln für englische Übersetzungen, gibt der English Style Guide der Europäischen Kommission.

7. Die Übersetzung wird nicht unabhängig überprüft

Google und der gesunde Menschenverstand sagen es einem: „Eine schlechte oder offensichtlich maschinell angefertigte Übersetzung kann bewirken, dass Ihre Website einen negativen Eindruck hinterlässt“.

Viele Online-Services bieten deshalb standardmäßig ein Vier- oder Sechs-Augen-Kontrolle. Sollten Sie Ihre Übersetzung also von einer lokalen Agentur oder selbst vornehmen, beauftragen Sie einen Lektor mit der Überprüfung.

Lesen Sie den zweiten Teil der Artikelserie zum Thema: „Multi-Language Websites mit Contao erstellen und verwalten – so klappt es!“. Tragen Sie sich jetzt in den Newsletter ein und erhalten Sie einmal im Monat wertvolle Inhalte rund um Contao.

Tipp: Nutzen Sie die Möglichkeit zwischen der Template- und HTML-Ansicht zu wechseln, um die Beispiele einfach nachvollziehen zu können.

Template-Blöcke

Mit den Funktionen block() und endblock() lässt sich ein Template in Bereiche unterteilen. Das Template einer Formularzeile könnte folgendermaßen aussehen:

<div>
    <?php $this->block('label') ?>
        <label><?php echo $this->label ?></label>
    <?php $this->endblock() ?>
    <?php $this->block('field') ?>
        <input type="text" name="<?php echo $this->name ?>">
    <?php $this->endblock() ?>
</div>

<div>
    <label>Vorname</label>
    <input type="text" name="vorname">
</div>

Vererbung und updatesicheres Überschreiben

Wenn Sie von diesem Template mit extend() ableiten, können Sie die einzelnen Blöcke überschreiben oder erweitern, mit parent() können Sie den Inhalt des ursprünglichen Blocks einfügen.

<?php $this->extend('form_row') ?>
<?php $this->block('label') ?>
    <label class="special-label"><?php echo $this->label ?></label>
<?php $this->endblock() ?>
<?php $this->block('field') ?>
    <div><?php $this->parent() ?></div>
<?php $this->endblock() ?>

<div>
    <label class="special-label">Vorname</label>
    <div><input type="text" name="vorname"></div>
</div>

Sie können extend() auch verwenden um nur die Template-Daten zu modifizieren, bevor das eigentliche Template verarbeitet wird. Das folgende Beispiel erweitert das Galerie-Template um eine CSS-Klasse mit der Anzahl der Bilder pro Reihe. Dabei kann dem Template der gleiche Dateiname wie dem Core-Template gegeben werden – so passen Sie das Template updatesicher an.

<?php $this->extend('ce_gallery') ?>
<?php $this->class .= ' images-per-row-' . $this->perRow ?>

<div class="ce_gallery block images-per-row-4">
    <ul>
        ...
    </ul>
</div>

Verschachtelte Blöcke

Zusätzlich können Sie Blöcke verschachteln, um noch genauer festzulegen welche Bereiche verändert werden. Ein gutes Beispiel dafür ist das Template fe_page in Contao 3.3. Mit dem Block body könnte z. B. der komplette Inhaltsbereich überschrieben werden. Würden Sie etwa nur den Footer anpassen wollen, überschreiben oder erweitern Sie nur den Block footer.

Fazit

Die Erweiterung des Template-Systems ist eines der wichtigsten neuen Features, die Contao je erhalten hat. Die Möglichkeit Templates „updatesicher“ zu überschreiben, wird vielen Benutzern die Vorbehalte nehmen die Templates und damit das HTML-Markup bei Bedarf projektspezifisch anzupassen.

Alle RockSolid Themes verwenden bereits die neuen Template-Funktionen. Für mehr Beispiele laden Sie sich unser kostenloses Theme Open Sauce für Contao 3.3 herunter und sehen sich den Templates-Ordner an.

Sobald ich auf ein Problem stoße, kann ich mein Gehirn oft dabei beobachten, wie es versucht Energie zu sparen. Statt mir einen Moment Zeit zu nehmen und zu überlegen was ich eigentlich erreichen will bzw. wo der Haken liegen könnte, ertappe ich mich ganz automatisch dabei ein Browser-Fenster zu öffnen und zu suchen. Häufig dauert die Suche wohl genauso lange, wie die Lösung mit anderen Mitteln gedauert hätte.

Copy & Paste ist bequem, wir machen es jeden Tag. Es ist Teil unserer Arbeit.

Wie oft habe ich schon das selbe Code-Snippet gesucht, kopiert und eingefügt. Manches Script bleibt dabei ein Hexenwerk, weil ich mich nie damit befasst habe, wie es im Kern funktioniert. Und nächstes Mal suche ich wieder danach, weil ich dachte „das brauche ich nie wieder“. Für einige Snippets, die ich wirklich häufig verwende, habe ich mittlerweile zumindest einen Katalog angelegt.

Es geht uns doch allen ähnlich. Das Ergebnis ist, dass wir nicht besser darin werden strukturiert zu denken und unsere Probleme in Teilstücke zu zerlegen um sie zu lösen, sondern gut darin nach Fragen zu suchen und Strg + C zu drücken.

Wenn wir es schaffen unsere Gehirne häufiger davon überzeugen, dass es Spaß macht Probleme zu lösen, können wir es im Anschluss auch häufiger mit den Glücksgefühlen belohnen. Überzeugen wir unsere Gehirne davon, dass sie zum Entdecken, Spielen und Learning-by-doing gemacht sind. Auch wenn wir einfach nur die Deadline einhalten möchten oder das Projektbudget schon derart überzogen ist, dass wir eigentlich kein einziges Watt Hirnleistung mehr investieren dürften.

Das bedeutet natürlich nicht, dass wir aufhören sollten Entdeckungen zu teilen, unsere eigenen Lösungen zu verbessern und zu erkunden wie andere arbeiten. Seiten wie das Stack Exchange Netzwerk, Github, Coderwall oder Codepen machen die rasante Weiterentwicklung erst möglich. Und diese Weiterentwicklung ist größtenteils positiv. Auch wenn sie uns manchmal überfordert. Und ja, auch unsere Themes sind eine Abkürzung, die bewusst eingesetzt werden sollte. Wie jede Art von vorgefertigter Lösung.

Es ist genauso gekommen, wie Tim Berners-Lee es auf der ersten Website angedacht hatte.

The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents. — Tim Berners-Lee

Ein relativ großer Teil der Menschheit hat bereits heute Zugriff auf einen Ozean an Inhalten, viele weitere folgen täglich. Mengenmäßig gesehen entstanden praktisch alle Texte, Inhalte und Bilder, die je geschaffen wurden in den letzten paar Jahren. Fast eine Million neue Websites kommen Tag für Tag dazu. Milliarden an Forenbeiträgen werden täglich erstellt und beantwortet.

Doch nur 8% der Stack Overflow Nutzer beantworten mehr als 5 Fragen und gehören damit zu der Gruppe, die aktiv zu Lösungen beiträgt (Quelle). Nach der 1%-Regel, sind 90% der Internetnutzer reine Zuschauer, 9% editieren bzw. partizipieren und nur 1% Prozent schafft aktiv neue Inhalte (Quelle). Die Zahlen lassen sich auf die meisten Foren umlegen. Dabei ist es gar nicht zwangsweise nötig noch mehr Inhalte zu verfassen, wir müssen nur öfter von der Zuschauerbank aufstehen.

Entscheiden wir uns bewusst dafür unsere Gehirne öfter aus dem Energiesparmodus zu holen, um gemeinsam Probleme zu lösen. Geben wir nicht auf, wenn etwas nicht auf Anhieb funktioniert. Wir schulden es uns und unserer (beruflichen) Zukunft. Je größer das Problem, desto größer die Belohnung, wenn wir es lösen.

Als Basis habe ich unser Free-Theme Open Sauce unter Contao 3.2.9 installiert. Ohne Anpassungen ist die Performance der Website auch mit unserem schlanken Theme noch deutlich verbesserungswürdig.

Performance Report von gtmetrix.com

Die Seitenladezeit von fast vier Sekunden ist für eine einfache Webseite viel zu lange. Die PageSpeed und YSlow Wertung ist dementsprechend niedrig.

Voraussetzungen

Für den ersten und wichtigsten Schritt der Optimierungen sollte Ihr Webspace einen Apache-Webserver mit den aktivierten Modulen mod_deflate, mod_filter, mod_expires und optional auch mod_mime und mod_headers einsetzen. In der Regel sollte jeder moderne Webspace mit einem Apache-Webserver diesen Anforderungen entsprechen.

Schritt 1: .htaccess.default aktivieren

Im Wurzelverzeichnis jeder Contao-Installation liegt standardmäßig die Datei .htaccess.default. Diese Datei beinhaltet sehr viele Optimierungen für den Webserver, darunter Cache-Einstellungen für JavaScript-, CSS- und Bilddateien, Optimierungen für einzelne HTTP-Header und Kompressionseinstellungen für viele weitere Dateitypen. Aktiv werden diese Einstellungen jedoch erst, wenn die Datei in .htaccess umbenannt wird.

Nach der Aktivierung haben sich die PageSpeed- und YSlow-Punkte bereits auf 89 verbessert.

Performance Report von gtmetrix.com nach Aktivierung der .htaccess-Datei

Schritt 2: Seiten-Cache-Einstellungen

Die Beispielseite mit unserem Contao Free Theme Open Sauce benötigt für den Aufbau des HTML-Codes ca. 0,3 bis 0,4 Sekunden. Die meisten Seiten ändern sich jedoch nicht bei jedem Aufruf, deshalb ist es unnötig den HTML-Code jedes mal neu zu erstellen. Mit dem Seiten-Cache von Contao wird eine Seite zwischengespeichert, sobald sie das erste Mal aufgerufen wird. Bei jedem weiteren Aufruf wird die zwischengespeicherte Version der Seite verwendet, anstatt sie neu aufzubauen.

Der Seiten-Cache wird in Layout › Seitenstruktur beim Startpunkt der Website unter Cache-Einstellungen aktiviert. Für Websites mit wenigen Besuchern sollte als Cachezeit mindestens 24 Stunden ausgewählt werden. Für einzelne Seiten mit dynamischen Inhalten, oder Inhalten die sich mehrmals täglich ändern, kann in den Seiteneinstellungen die Cachezeit verringert oder komplett deaktiviert werden.

Unter System › Einstellungen › Frontend-Einstellungen sollte zudem als Cache-Modus „Nur den Servercache verwenden“ ausgewählt werden. Dadurch wird sichergestellt, dass beim leeren des Server-Caches keine veralteten Inhalte im Browser-Cache des Besuchers verbleiben.

Nach diesen Einstellungen verringert sich die Antwortzeit des Servers für den HTML-Code auf 0,06 Sekunden. Die Gesamtladezeit hat sich bereits auf ca. zwei Sekunden verringert.

Schritt 3: Bilder optimieren

Unter System › Einstellungen › Dateien und Bilder sollte man die JPEG-Qualität soweit senken, dass die Anzeigequalität gerade noch in Ordnung ist, meistens im Bereich zwischen 50 und 80.

Ein sehr wichtiger Punkt bei Bildern ist der Unterschied zwischen der tatsächlichen Bildgröße und der dargestellten Bildgröße. Wenn Sie z. B. in einem Bild-Inhaltselement eine Bildgröße von 320 x 160 einstellen, durch das CSS das Bild auf der Seite jedoch nur in der Größe von 120 x 60 dargestellt wird, verbrauchen Sie unnötig viel Bandbreite für das zu große Bild.

Die jeweils richtige Größe der Bilder, also die Größe in der das Bild vom Browser tatsächlich dargestellt wird, können Sie am einfachsten mit den Entwicklertools des Browsers herausfinden (Rechtsklick Element untersuchen). In Chrome: Mit der Maus über den Pfad des Bildes fahren oder in Firefox: Auf den Reiter Box-Modell wechseln.

Entwicklertools, Chrome links und Firefox rechts, zeigen die dargestellte Größe: 120 x 60

Schritt 4: JavaScript zusammenfassen

Je weniger Dateien für eine Seite geladen werden müssen, umso kürzer wird die Ladezeit. Meine Testinstallation lädt im unoptimierten Zustand 2 CSS-Dateien und 6 JavaScript-Dateien.

Die 2 CSS-Dateien sind die Stylesheets aus dem Seitenlayout und von Google-Fonts. Diese beiden Dateien können nicht zusammengefasst werden, da Google-Fonts an verschiedene Browser verschiedene Stylesheets ausliefert.

Die 6 JavaScript-Dateien teilen sich in ein Hauptskript im Header der Seite, 4 JavaScript-Dateien aus jQuery-Templates und einer JavaScript-Datei aus der Layouteinstellung Eigener JavaScript-Code. Alle diese Dateien können zu einer einzigen Datei zusammengefasst werden.

Dafür kopieren wir jedes verwendete jQuery- oder MooTools-Template unter Layout › Templates › Neues Template in das Templates-Verzeichnis. Danach editieren wir z. B. das Template j_colorbox.html5 und ersetzen den Aufruf für die JavaScript-Datei:

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/colorbox/<?php
    echo COLORBOX; ?>/js/colorbox.min.js"></script>

Durch folgenden PHP-Code:

<?php
$GLOBALS['TL_JAVASCRIPT'][] =
    'assets/jquery/colorbox/'.COLORBOX.'/js/colorbox.min.js|static';
?>

Nachdem wir diesen Vorgang für alle verwendeten jQuery- und MooTools-Templates wiederholt haben, fehlt nur noch die JavaScript-Datei aus der Seitenlayouteinstellung Eigener JavaScript-Code. Dafür erstellen wir je nach verwendetem JavaScript-Framework eine neue Template-Datei j_scripts.html5 oder moo_scripts.html5 mit folgendem Inhalt:

<?php
$GLOBALS['TL_JAVASCRIPT'][] = $GLOBALS['TL_CONFIG']['uploadPath']
    .'/opensauce/js/script.js|static';
?>

Tauschen Sie dabei den Pfad /opensauce/js/script.js mit dem Pfad aus der Layouteinstellung Eigener JavaScript-Code aus. Danach bearbeiten Sie die Datei files/opensauce/js/script.js und fügen als erste Zeile jQuery(function(){ und als letzte Zeile }); ein. Wenn Sie MooTools anstatt jQuery verwenden muss die erste Zeile window.addEvent('domready', function() { lauten. Damit wird sichergestellt, dass das Skript erst ausgeführt wird, sobald das Dokument geladen wurde.

Nun wird nur noch eine einzige JavaScript-Datei geladen.

Schritt 5: CDN einrichten

Ein Content Delivery Network ist ein verteiltes Netzwerk von Servern, die für die Auslieferung von vorwiegend statischen Inhalten genützt werden. Wenn ein Besucher eine Datei von einem CDN anfordert, bekommt er die Antwort von dem Server der die beste Verbindung zum Besucher hat und ihm geographisch am nächsten ist. Dadurch kann die Ladezeit vor allem für internationale Besucher deutlich verbessert werden. Ein weiterer Vorteil ist, dass ein CDN sehr gut mit einem großen Ansturm an Besuchern zurechtkommt und dadurch deutlich besser gegen überlastungsbedingte Ausfälle geschützt ist als ein normaler Webspace.

Es gibt viele verschiedene Anbieter von CDNs, einer davon ist Amazon CloudFront. Dort kann sehr schnell und einfach ein CDN in der Origin-Pull-Variante eingerichtet werden. Origin-Pull bedeutet, dass sich das CDN die angeforderte Datei automatisch vom Origin-Server (Ihrem Webspace) kopiert und zwischenspeichert, sobald diese das erste Mal aufgerufen wird.

Das Einrichten des CDNs in Contao selbst ist relativ einfach, dazu wird in Layout › Seitenstruktur beim Startpunkt der Website unter DNS-Einstellungen als Datei-URL und Assets-URL die CDN-URL eingetragen.

Unnötige Einstellungen

In den globalen Einstellungen von Contao gibt es auch zwei Einstellungen für Performance die jedoch nahezu keine Verbesserungen bringen. Im Gegenteil, sie können unerwünschte Auswirkungen nach sich ziehen. Deshalb empfehlen wir die Einstellungen Markup komprimieren und Skripte komprimieren nicht zu aktivieren.

Fazit und Endergebnis

Performance Report von gtmetrix.com nach allen Optimierungen

Nun sieht die Ladezeit der Website sehr gut aus, sie liegt unter einer Sekunde, die Gesamtgröße der Seite wurde auf unter die Hälfte gebracht und auch die Anzahl der Requests ist jetzt deutlich niedriger.

Plugins und Werkzeuge

Mit diesen Werkzeugen und Erweiterungen können Sie die Geschwindigkeit Ihrer Website weiter analysieren und verbessern.

• GTmetrix zum Analysieren der kompletten Seite inkl. PageSpeed und YSlow.
• WebPageTest zum Analysieren der Geschwindigkeit aus verschiedenen Ländern in verschiedenen Browsern.
• Google PageSpeed Insights und Yahoo YSlow zur Bewertung und für Verbesserungstipps.
• tinypng zum deutlichen Verringern der Dateigrößen von PNG-Bildern.

Weitere Optimierungsansätze (für Fortgeschrittene)

Wem das Ergebnis noch nicht ausreicht, der kann noch weiter gehen. An folgenden Punkten könnte man ansetzen um noch höhere Geschwindigkeit zu erreichen:

• Einen CronJob einrichten der den Seiten-Cache regelmäßig aktualisiert, damit auch der erste Aufruf einer Seite schnell beantwortet werden kann.
• Bilder weiter optimieren mit Tools wie tinypng und imageoptim
• Die JavaScript-Datei vor dem </body> anstatt im <head> einbinden, dabei wären allerdings einige Anpassungen an den Skripten notwendig.
• Optimierung der CSS-Dateien: Nicht benötigte Styles entfernen und Icon-Fonts oder Image-Sprites anstatt Hintergrundbildern verwenden.
• Optimierung der externen Schriften: Schriftschnitte reduzieren, Subsetting.
• Die komplette Website, also auch den HTML-Code, über ein CDN ausliefern.