Codes für Jimdo-Websites

Mit dem Baukastensystem Jimdo können Sie verhältnismäßig leicht eine eigene Website erstellen. Jimdo funktioniert wie ein Fertigteilhaus: Alles Wesentliche ist vorhanden. Als Jimdo-Expertin mache ich allerdings die Erfahrung, dass Nutzerinnen und Nutzer sehr rasch spezielle Wünsche haben. Die Website soll breiter, Abstände sollen kleiner, Bereiche höher oder niedriger werden. Häufig wünschen sich Jimdo-Nutzerinnen und -Nutzer auch animierte Überschriften, Hyperlinks, die nicht unterstrichen sind, oder einzelne mit Farben oder Fotos hinterlegte Bereiche – und damit wird es spannend!

Mit Code-Schnipsel, die man in das HTML oder in den Head einbaut, sind verschiedene Änderungen an einer Jimdo-Website möglich. Code-Schnipsel finden Sie immer wieder mal im Web, und zwar in Foren, auf speziellen Code-Websites oder auch auf Websites bzw. Blogs von Webdesignerinnen und Webdesignern. Mal sind die Codes für Laien gedacht, mal für Profis. Mal sind sie gratis, mal kosten sie etwas. Mal gibt es eine Anleitung, wie man das Schnipsel einbaut, mal ist die Interessentin bzw. der Interessent völlig auf sich gestellt.

Die meisten Code-Schnipsel sind in CSS oder JavaScript geschrieben, manchmal gibt es auch eine oder mehrere CSS- oder JavaScript-Dateien. Meist sind diese Dateien für den Head bestimmt, also für jenen Bereich, den man über die „Einstellungen“ einer Jimdo-Website erreicht, manchmal handelt es sich aber auch um Codes für Widgets.

Die Bandbreite der Codes ist groß und groß sind auch die Fallen, in die Sie tappen können, wenn Sie einen Code in Ihre Jimdo-Website einbauen, ohne dass Sie genau verstehen, was der Code alles beinhaltet.

Viele Codes, die Sie im Web finden, sind nämlich fehlerhaft und führen zu Schäden an der Website. Ich stehe immer wieder einmal vor der Aufgabe, Websites zu retten, in die meine Kundinnen und Kunden (das sind Laien ebenso wie Webdesignerinnen und Webdesigner) ahnungslos und gutgläubig schlechte Codes eingebaut haben.

In diesem Beitrag, mit dem ich meinen Blog zu Fragen rund Jimdo starte, möchte ich Ihnen zeigen, worauf Sie achten sollten, wenn Sie Codes in Ihre Website einbauen. Ich möchte Sie ermuntern, kritisch zu sein und nicht alles, was Sie so im Web an Codes finden, zu verwenden. Sie sollten genau wissen, was Sie einbauen und welche Folgen das hat. Wenn Sie sich mit JavaScript, HTML & Co. nicht auskennen, überlegen Sie sich bitte lieber zweimal, ob Sie Codes einfach so in Ihre Website einbauen.

Im Folgenden möchte ich Ihnen einen Überblick über die verschiedenen Codes geben, und zwar JavaScript-Dateien und CSS-Anweisungen bzw. CSS-Dateien.

Die Zeile, die verspricht, Schneeflocken auf Ihre Website zu zaubern, sieht dann meist so aus:

<script src="https://eineDomain/bezeichnung.js" type="text/javascript"> </ script>

 
Dies ist ein Verweis auf eine JavaScript-Datei, die von einem externen Server bei Ihnen in der Website geladen und ausgeführt wird. JavaScripte beinhalten Anweisungen, damit etwas ausgeführt wird. Oder anders gesagt: Eine JavaScript-Datei ist eine Art kleines Programm, das, fügt man die Datei ein, etwas auf Ihrer Website in Gang bringt. In unserem Beispiel rieselt dann eben der Schnee.

1 Die Datei liegt nicht auf dem Server, auf dem Ihre Jimdo-Website liegt, sondern auf einem fremden Server. Wenn es mit dem Server Probleme gibt, hat das Folgen für die Datei: Der Schnee rieselt dann beispielsweise nicht mehr oder es gibt Probleme in der Darstellung des Schnees.

2 Die Datei wird von dem fremden Server entweder geladen und/oder ausgeführt, was zu einer längeren Ladezeit Ihrer Website führt. Auch das hat Folgen: Je größer die Ladezeit Ihrer Website ist, desto eher springen Nutzerinnen und Nutzer frühzeitig wieder ab. Außerdem kann eine lange Ladezeit das Ranking Ihrer Website auf Google verschlechtern. Wird die Datei „ausgeführt“, wird der Inhalt Ihrer Website erweitert oder geändert.

Immer, wenn eine fremde Domain im Code-Schnipsel oder Code-Eintrag steht, sollten Sie vorsichtig sein. Wenn Sie dem Anbieter oder dem Inhaber der Domain nicht vertrauen, dann sollten Sie den Code lieber nicht verwenden. Sollte Ihre Webdesignerin bzw. Ihr Webdesigner einen Eintrag mit externer Domain im Head Ihrer Jimdo-Website einfügen, fragen Sie ruhig nach, warum sie bzw. er das gemacht hat.

Es gibt verschiedene Möglichkeiten, um CSS-Codes in eine Jimdo-Website einzufügen. Hier die beiden gängigsten Wege:

1 Externe Datei mit einer Zeile im Head

<link type="text/css" media="all" href=" https://eineDomain.de/bezeichnung.css " rel="stylesheet"/ Hier handelt es sich um eine Zeile, die auf eine Datei mit CSS-Anweisungen verweist. Wenn in der Zeile Ihre Domain angeführt ist, ist alles in Ordnung. Ist in der Zeile eine fremde Domain angeführt, dann sollten Sie vorsichtig sein. Der Inhalt der Datei kann nämlich von fremder Seite nachträglich geändert werden, und zwar ohne direkten Zugriff auf Ihre Website. Wenn Sie der Quelle vertrauen, kann die Datei auf Ihren Wunsch geändert werden, ohne dass Zugriff auf Ihre Website notwendig ist, was für die Dienstleisterin bzw. den Dienstleister Ihres Vertrauens gut ist.

Achten Sie darauf, dass sie bzw. er nicht mehrere dieser Dateien im Head einträgt. Eine Datei ist mehr als ausreichend. Denn jeder Eintrag fordert einen weiteren Zugriff des Browsers auf den Webserver.

2 CSS-Anweisungen direkt im Head

Jimdo erlaubt es, CSS-Anweisungen direkt im Head einzutragen. Dies ist eine schnelle Art der Eingabe von CSS-Anweisungen bzw. von „Code-Schnipseln“.

Sie haben den Code erfolgreich eingegeben und Ihre Jimdo-Website sieht (sei es nun am Desktop und/oder mobil) nicht so aus, wie Sie sich das vorgestellt haben? Dann müssen Sie sich auf Fehlersuche begeben. Die häufigsten Probleme resultieren meiner Erfahrung nach aus Fehlern in der Schreibweise oder aus Fehlern in der Wertigkeit der CSS-Anweisungen.

1 CSS-Anweisungen und Fehler in der Schreibweise

Bei CSS-Anweisungen kommt es auf jedes Zeichen an. Wenn ein Zeichen fehlt oder wenn Sie ein falsches Zeichen verwenden, funktionieren der Code oder Teile davon nicht. 

Folgende Fehler begegnen mir besonders häufig:

• fehlende oder doppelte geschweifte Klammern, die die Anweisung für ein HTML-Element umrahmen
• fehlendes oder doppeltes Semikolon
• fehlende Anführungszeichen
• falscher Wert einer Anweisung (zum Beispiel none statt normal)
• falsche Schreibweisen: Komma statt Punkt, geschweifte Klammer statt runder Klammer etc.
• falsche Schreibweise des HTML

2 CSS-Anweisungen und Fehler in der Wertigkeit

CSS-Eigenschaften unterliegen Wertigkeiten, deren Bestimmung komplex ist. Die Wertigkeit wird u. a. durch den Ort festgelegt, an dem sich die CSS-Angaben befinden, also ob sie sich in einer CSS-Datei, in einer CSS-Anweisung im Head oder sonst wo in der Website befinden.

Hier ein Beispiel:

Nehmen wir an, Sie möchten in Jimdo einen Text schreiben. Dazu fügen Sie ein Text-Element ein und schreiben los. Was aber passiert im Hintergrund (also für Sie in der normalen Benutzeransicht nicht sichtbar)?

 <p> ich bin ein Absatz.</p>
 <p>nach betätigen der Enter-Taste, entsteht automatisch ein neuer Absatz</p>


Das ist aber noch nicht alles. Der Jimdo-Baukasten fügt rund um Ihren Text noch weiteres HTML ein. Genau gesagt bekommt Ihr Text-Element einen sog. DIV-Container. Die Abkürzung „DIV“ steht für division. Ein DIV-Container ist eine Art Raum bzw. Bereich, der das p umschließt.

Der DIV-Container bekommt vom System zusätzlich Klassen zugewiesen. Und so sieht Ihr Text im HTML dann letztendlich aus:

Wenn Ihr Text im Inhaltsbereich (Content) steht, dann liegt ihr Absatz mit dem DIV-Text in einem weiteren DIV-Container, der den Inhaltsbereich kennzeichnet. Gern wird dem DIV die Klasse „content“ zugewiesen.

Ihr HTML wird dann so abgebildet.

Sie sehen also: Es wird viel HTML vom System generiert, obwohl Sie ja nur einen Text schreiben!

Auch wenn wir in diesem Fall nur das p gestalten möchten, haben wir hier doch mindestens vier Möglichkeiten. Man kann

• die Anweisungen nur dem p-Element geben.
• die Anweisungen dem p-Element und der div mit der Klasse j-text geben.
• die Anweisungen nur dem p-Element und dem div mit der Klasse content geben.
• die Anweisungen dem p-Element, dem div mit der Klasse j-text und dem div mit der Klasse content geben.

Abhängig davon, welche Lösung man nun wählt, entstehen verschiedene Wertigkeiten für die Anweisung.

Und nun wollen wir dem p-Element noch eine bestimmte Schriftfarbe geben. Im Head der Jimdo-Website tragen wir ein:

p{color: blue}
.j-text p{color:yellow}
.content p{color:green}
.content .j-text p{color:red}

So wird nun unser Absatz (p) in der Farbe rot (red) dargestellt. Da Sie sich jetzt schon ein wenig auskennen, werden Sie sehen, dass vor der Anweisung noch mehr steht. Durch dieses Mehr wird die Wertigkeit der Anweisung erhöht.

Falls Sie denken, dass die Reihenfolge der Anweisungen in unserem eine Rolle spielt, muss ich Sie allerdings enttäuschen.
 

Was würde nun passieren, wenn wir die folgende Anweisung so in den Head eintragen?

.content .j-text p{color:red}
.content p{color:green}
.j-text p{color:yellow}
p{color: blue}

Ganz einfach: Unser Absatz würde immer noch die Farbe Rot bekommen. Denn nicht die Reihenfolge der Anweisungen ist entscheidend, sondern die Wertigkeit.

Die Anweisung mit der höchsten Wertigkeit wird vom Browser umgesetzt. Alle anderen Anweisungen werden verworfen bzw. ignoriert.

Das Schlüsselwort !important

Eine andere sehr oft eingesetzte Möglichkeit, um die Wertigkeit zu verändern, ist die Verwendung des Schlüsselwortes !important. Es hebt die Wertigkeit einer CSS-Anweisung ganz nach oben.

Für unser Beispiel könnte dies dann so aussehen:

.content .j-text p {color:red }
.content p {color:green}
.j-text p {color:yellow}
p {color: blue!important}

Nun würde unser Absatz die Farbe Blau bekommen, durch das Schlüsselwort !important ist die Wertigkeit nach oben gehoben worden.

Das kann unproblematisch sein, es kann aber auch zu ungewünschten Ergebnissen führen. Oft ist die Verwendung von !important sogar überflüssig, da es die vergebene Eigenschaft für dieses HTML-Element gar nicht gibt. Somit muss auch die Wertigkeit nicht angehoben oder ein bestehende Anweisung überschrieben werden. Und vergessen Sie nicht: Jedes Zeichen im Code, also auch ein Leerzeichen, erhöht die Ladezeit, wenn auch nur minimal. Aber wenn die Ladezeit tausende Male minimal erhöht wird, summiert sich das.

Es gibt viele Wege, um !important zu vermeiden. Die Wertigkeit von Eigenschaften kann nämlich durch andere Schreibweisen der CSS-Anweisung angehoben werden – und das ist der beste Weg.

Wenn Sie einen Code verwenden möchten, dann testen sie diesen zuerst. Erstellen Sie eine Free-Website mit Jimdo, bauen Sie den Code dort ein und schauen Sie, ob er funktioniert. Testen Sie die Free-Website bitte auch auf mobilen Geräten und prüfen Sie die Ladezeit. Wenn eine Website zu langsam lädt, springen die Besucherinnen und Besucher Ihrer Jimdo-Website rasch wieder ab. Der beste Code bringt nichts, wenn er die Ladezeit zu stark erhöht.

Überlegen Sie sich, ob Sie bei extern geladenen Dateien der Anbieterin bzw. dem Anbieter vertrauen. Wie schon erwähnt: Bei extern geladenen Dateien hat jemand Zugriff auf Ihre Website, ohne dass er sich einloggen muss. Manchmal kommt es übrigens vor, dass der neu eingebaute Code plötzlich das Login nicht mehr ermöglicht und Sie den Jimdo-Support brauchen. In so einem Fall ist es natürlich besonders gut, wenn Sie den Fehler an Ihrer Testseite und nicht an Ihrer Hauptwebsite bemerken.

Kurzum: Informieren Sie sich, vertrauen Sie Anbieterinnen und Anbietern von Codes nicht blind und testen Sie!

Ich freue mich sehr über Feedback.
Bitte vermeiden Sie Mailadressen in den Kommentaren.

Für direkte Fragen zu ihrer Website oder individuelle Lösungen senden Sie mir bitte eine Mail. Vielen Dank.