mobile heading website

7 Gründe für eine reine HTML Website

Es sind nun acht Jahre seit dem Launch der Website ceteras.de und die Geschichte hat gezeigt, dass die Technik die verwendet wurde robust ist. Ohne mir darüber viele Gedanken zu machen, hatte ich damals entschieden auf HTML und auf einem CSS Framework zu setzen – Fluid Grid. Klar, als Entwicklerin war und bin ich mit der Programmierung vertraut, jedoch hatte ich mit CSS wenig praktische Erfahrung gehabt und deswegen auf ein Framework gesetzt, welches die Hilfsmittel bringt, um effizient zu arbeiten.

Desktop-Layout 2014

Im Nachhinein bin ich erstaunt und glücklich dass ich diesen Weg gewählt habe. Was hatte mich dazu bewegt? Der Kerngedanke war Leistung – die Website sollte schnell sein und leichtgewichtig. Es ist nicht notwendig, dass irgendwelche Skripte den Markup serverseitig generieren, er ist schon da. Gibt jemand die Adresse in den Browser ein, holt dieser das fertige HTML-Dokument und zeigt es den Websitebesucher / der Besucherin.

Markup

Auch die Struktur ist einfach gehalten. Die einzelnen Seiten wurden in Code-Editor umgesetzt ohne HTML-Generatoren, die erfahrungsgemäß eine Unmenge an div’s und span’s erzeugt, die manchmal funktionlos sind. Das was sie bewirken ist, dass die Website aufgebläht und für mobile Geräte weniger freundlich ist. Die Einbindung von diversen Analytic-Dienste ist unkompliziert, da man sofort weiß an welche Stelle der externe Markup platziert werden muss. Wie oft hatte ich später die Stelle gesucht, wo ich eine JavaScript-Datei verknüpfen muss oder wohin platziere ich nun den Facebook Pixel Code in meinem WordPress-Blog?

Responsive Webseiten

2014 war Responsive Design ein heißes Thema, gerade zu dem Zeitpunkt wurde es vielen klar, dass Websites auch auf mobile Geräte gut aussehen müssen und vor allem bedienbar sein müssen. In dem Punkt muss ich aber sagen, dass Fluid Grid Verbesserungsbedarf hat, welches immerhin überschaubar ist.

Aussehen

Ein weiterer Pluspunkt des Frameworks war dass es die Umsetzung des Corporate Designs unheimlich viel erleichtert hat, durch bestimmte CSS-Definitionen wußte man wo die Titel und Untertitel sind und so die eigene Farbpalette darauf umgesetzt.

Den Kontaktformular hatte ich mit einem Drittanbieter-Modul umgesetzt, auf PHP Basis. Das ist eigentlich die einzige Stelle die ich neulich ersetzt habe.

Die 7 Gründe zusammengefasst

Zusammenfassend sind also die Vorteile einer HTML-Website:

  • einfache, leichtgewichtige Struktur
  • minimale Serverlast
  • Schnelligkeit, kurze Ladezeiten
  • CSS-Frameworks die das Layout ermöglichen und mobilfreundlich sind
  • unkomplizierte Anbindung an Drittanbieter-Dienste
  • mit PHP Module erweiterbar, wo notwendig
  • Corporate Design Unterstützung

Ein Bisschen CSS – lange URLs formatieren

Eine Webseite ist wie ein Lebewesen: sie wächst, sie verändert sich, verliert manche veraltete Inhalte… Sie wächst weil es neue Bedingungen gibt die sie erfüllen muss. Eine Datenschutzerklärung muss erstellt werden, drin sind einige URLs, kurze und lange URLs. In der Regel testet der Webmaster seine Seiten nach jeder Änderung. So sollte es auch mit der neuen Seite in der mobilen Ansicht, denn: oh Schreck! das Layout hat sich auf einmal geändert.

Da ist ein leerer Bereich an dem Rand und scrollt man nach unten, wird es offensichtlich, woran es liegt: die URL des Drittanbieters die man in die Datenschutzerklärung eingetragen hat ist zu breit. Was tun?

Kommerzielle WordPress Themes haben ja meistens den Support mit dabei. Sonst sucht der Webmeister nach einer Lösung und sie könnte zum Beispiel mit CSS so aussehen:

word-wrap: break-word;

Im HTML-Code könnte das so aussehen:

<a href="http://superlangerweblink.com/datenschutzerklaerung.html"><span style="word-wrap:break-word;">http://superlangerweblink.com/datenschutzerklaerung.html</span></a>

Das bewirkt dass die URL am Ende der Zeile umgebrochen wird und das ist OK, denn eine URL ist ein technisches Element und hier spielt die Grammatik eine kleinere Rolle. Dabei bleibt ja das „href“ Attribut so wie es ist und der Weblink funktioniert.

Mobile Ansicht Weblink mit Umbruch