Leichtere Maintainability und Lesbarkeit – warum ein gutes Markup wichtig ist
Kommentare

Egal, ob man seine eigene Website mithilfe eines Content-Management-Systems oder komplett von Grund auf selbst erstellt: ein gutes Markup spielt dabei eine wichtige Rolle. Das Problem eines schlechten Seiten-Markups ist nicht nur die schlechte Lesbarkeit des Codes, sondern vor allem auch die mühevolle Maintainability.

Zwar hat man als CMS-Nutzer nur wenig Einfluss darauf, wie das Tool mit dem Markup umgeht, trotzdem dürften bei vielen dabei einige Verbesserungsvorschläge auf dem Wunschzettel stehen. Anhand des Content-Management-Systems Drupal hat Mario Hernandez  zusammengefasst, warum ein gutes Markup eine so wichtige Rolle spielt.

Wo liegt das Problem mit unübersichtlichem Markup?

Gerade Drupal-Nutzer dürften das Problem des unübersichtlichen Markups kennen, wenngleich auch andere Content-Management-Systeme ähnliche Problemstellen mit sich bringen. Zwar gibt es Module, die für einen saubereren Code sorgen sollen, allerdings sind auch deren Mittel begrenzt und die div-Wrapper bleiben meist trotzdem unübersichtlich.

Doch nicht nur das reine HTML-Markup stellt oft ein Problem dar, sondern auch die verwendeten CSS-Klassen, die dem Markup hinzugefügt werden, sorgen für unnötig viel Komplexität, gerade bei Website-Themes. Natürlich rendert und funktioniert die Website trotz eines solch unübersichtlichen Markups, allerdings gibt es einige Gründe, warum trotzdem auf ein aufgeräumtes Markup geachtet werden sollte.

Gutes Markup sorgt für Lesbarkeit und einfachere Maintainability

Einer der wichtigsten Gründe, warum es auf ein gutes Markup ankommt, ist die Lesbarkeit. Ein saubereres Markup ist nicht nur einfacher zu lesen, sondern auch zu debuggen, was Entwicklern im Zweifelsfall viel Zeit bei der Problembekämpfung sparen kann.

Genauso ist ein gutes Markup einfacher zu maintainen, weil idealerweise keine Klassen Elementen zugeordnet werden, die nichts mit ihnen zu tun haben. Dabei muss man vor allem auch vorausschauend denken: soll Monate oder gar Jahre später ein Style geändert werden, vereinfacht ein übersichtliches, logisches Markup dabei die Arbeit enorm.

Meist bedeutet das zwar mehr Aufwand während der Entwicklungsphase, allerdings sollte man sich als Entwickler überlegen, ob es die spätere Zeitersparnis nicht wert ist – mal ganz zu schweigen von der Verringerung der Arbeitsaufwands bei der Seitenmaintenance. Dabei gilt laut Mario Hernandez:

The extra time will be spent no matter what, so why not do it during the process when we decide how our markup will look as we develop our code?

Markup beeinflusst Performance und Suchmaschinenranking

Die Performance und das Seitenranking in den Suchmaschinenergebnissen werden ebenfalls durch das Markup beeinflusst. Die Optimierung der Seitenladezeit sollte sowieso regelmäßig auf dem Programm stehen, und dazu gehört auch die Optimierung des Markups. Je mehr unnötige divs verwendet werden, desto länger dauert der Rendering-Prozess; gleichzeitig sorgt ein solches Markup auch für deutlich mehr Datenverbrauch, über den sich vor allem Mobile User ärgern werden.

Apropos Mobile User: Google nutzt künftig einen neuen „Mobile friendly“-Algorithmus, der für ein schlechteres Suchmaschinen-Ranking bei nicht-Mobile-freundlichen Seiten sorgen kann. Es wäre also jetzt an der Zeit, das eigene Markup zu überprüfen und so weit wie möglich zu optimieren, um der Abwertung der eigenen Seite aus dem Weg zu gehen.

Auch bei der Accessibility spielt ein gutes Markup eine große Rolle, weil zum Beispiel Screen Reader die Macro-Level-Aspekte des Contents nur schwer nachvollziehen können. Je verzweigter das Markup ist, desto schwieriger macht man es solchen Nutzern. Genauso wird auch der natürliche Content-Flow in Responsive Designs behindert und so schlimmstenfalls die User Experience eingeschränkt.

Um Probleme mit dem Markup möglichst auszuräumen, müssen Backend-Entwickler genau wissen, was vom Markup erwartet wird und es dann umsetzen. Dafür müssen Frontend- und Backend-Entwickler eng zusammenarbeiten, um ein möglichst einfaches, effektives Markup zu erstellen.

Aufmacherbild: HTML source code of web page von Shutterstock / Urheberrecht: Alexey V Smirnov

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -