Folgende Hinweise sind für Web-Profis selbstverständlich. Wenn Sie noch nicht so lange mit Websites befassen oder neu als Online-RedakteurIn tätig sind, erfahren Sie hier vielleicht noch den ein oder anderen 'goldenen' Tipp.
Gute Websites weisen einen einheitlichen Stil und eine möglichst intuitive Bedienbarkeit auf. Zudem ist jede(r) BetreiberIn bestrebt, dass die Website bei Suchmaschinen hoch gerankt wird.
Vor dem Hochladen von Medien auf Ihren Web-Server sollten Sie einige wichtige Dinge prüfen bzw. umsetzen:
Inhalt/Content, der auf Ihrem Rechner angezeigt wird, wird noch lange nicht unbedingt auf allen anderen Geräten bzw. Softwareumgebungen angezeigt.
Es ist in der IT zweckmäßig, bei der Namensvergabe für Dateien, Bilder, Dokumente (z. B.), etc. nur solche Zeichen zu verwenden, die in unterschiedlichen Zeichensätzen in derselben Codierung vorhanden sind, um Anzeigeprobleme zu vermeiden. Verwenden Sie ausschließlich:
Beachten Sie bei der Namensvergabe außerdem:
Bei der Vergabe von Dateinamen geht es um Aussagekraft, Information sowie eine einheitliche Systematik:
Datum (ohne Punkte!), Typ, AutorIn, Thema/Inhalt (sprechender Teil), wie: YYYYMMTT_Dokumenttyp_AutorIn_Thema_Sonstiges.pdf:
Bild/Grafik, z. B.
SprechenderTeil, Quelle, Urheber, ggf. Lizenznr, Quelle:
Größe: Die Bilddateien sollten so klein wie möglich und so groß wie nötig sein. Denken Sie an die Ladezeiten der Medien gerade auf Mobil-Geräten.
Formate: Die gängigsten Bildformate im Web sind gif, png, jpg, tiff und bmp
Aufbereitung: Bereiten Sie Ihre Medien hinsichtlich Größe, Komprimierung, Schärfe, Kontrast etc. explizit für das Web auf und zwar bevor Sie sie auf den Web-Server hochladen!
Vorab zu den Themen „Barrierefreiheit“ und „SEO“ bei Medien: Im jeweiligen ALT-Attribut zu einem Bild oder einer Grafik sollte immer beschrieben sein, was darauf angezeigt wird, z. B. Logo Firma xyz. Dies ist insbesondere hilfreich bzw. notwendig,
Alles was in HTML/CSS umgesetzt werden kann, sollte auch online in HTML erscheinen. Ausnahmen können sein: Dokumente mit rechtlicher Verbindlichkeit (digitale Signatur), math. Darstellungen, wissenschaftlicher Schreibweise oder solche bei denen es auf den exakt gleiche(n) Darstellung bzw. Ausdruck bei allen Nutzern ankommt.
Beide Formate können lokal gespeichert werden bzw. HTML kann auch in PDF zum lokalen Speichern umgewandelt werden. Zumeist ist es sinnvoller einen Link auf eine HTML-Seite weiterzumailen, als große PDF-Dateien. Zudem bleibt die Frage, ob PDF-Dokumente das „Papierlose Büro“ unterstützen oder eher nicht, da sie doch häufig dazu verleiten, den Drucker anzuwerfen.
Heute werden Animationen auf Websites generell etwas sparsamer eingesetzt.
Achten Sie auf einheitliche Bezeichnungen und Schreibweisen, benutzen Sie generell Rechtschreibhilfen und lassen Sie Ihre Texte gegenlesen.
Das Thema Anführungsstriche zur Hervorhebung von Textteilen oder bei wörtlicher Rede ist ein ganz schwieriges. Im Deutschen ist es üblich (aber anscheinend lt. Duden nicht unbedingt zwingend) z. B. die „öffnenden" Anführungszeichen unten, die schließenden oben zu setzen, im Buchdruck werden häufig Chevrons »…« verwendet.
Während z. B. in den Office-Programmen diese Zeichen durch das Häkchen bei der Option „Ersetzen: „Gerade Anführungszeichen durch typografische“ automatisch erzeugt werden kann, sind die Anführungszeichen „ “ oder » « in den CMS-Editoren nicht automatisch verfügbar, sondern müssen umständlich z. B. bei Windows über die Tastenkombi ALT+0132 für „ bzw. ALT+0147 für “ erzeugt werden.
Aus pragmatischen Gründen verwenden viele Redakteure daher im Web die englischen Anführungszeichen, “ “, die per Tastatur mit Shift+2 schnell zur Hand sind. Zudem sind die typografischen Anführungszeichen „ “ bei vielen Schriftarten nicht besonders gut gestaltet, insbesondere bei solchen, die aus dem englischsprachigen Raum stammen.
Viele Einzelhinweise zur korrekten Nutzung von Sonderzeichen finden Sie unter
Verwenden Sie immer individuelle Führungstexte, die auf den Inhalt des Links oder seine Funktion hinweisen,
Je nach Gestaltung durch Web-Layout und Online-RedakteurIn, aber auch durch die Einstellungen auf dem Nutzer-Gerät, kann ein Link verschiedenste Szenarien bereithalten, beispielsweise:
Bieten Sie Ihren Nutzern einen Mehrwert, indem Sie die Linktexte je nach Funktion mit der Information auszeichnen, was bei der Aktivierung geschieht, z. B.
Die Trennung von Layout (CSS) und Inhalt (HTML) wird von allen CMS unterstützt und hat insbesondere praktische Gründe: Ein einmal (im CSS) definiertes Format kann beliebig oft verwendet werden und ist einfach für alle gleichartigen Anwendungsfälle zu ändern. Außerdem entsteht weniger Code und die Trennung entspricht den Richtlinien der Barrierefreiheit, u. a. weil Strukturen für Screen-Reader und Suchmaschinen verarbeitbar sind.
Die meisten Layout-Definitionen sind durch das im Content Management System (CMS) verwendete Template (Designvorlage) für die Website festgelegt. Die CSS-Formatanweisungen befinden sich in separaten Dateien innerhalb des Template-Dateibaums. Die Nutzung des Template garantiert die Einheitlichkeit des Layouts auf allen Seiten der Website, "Layout-Wildwuchs" wird vermieden.
Voreingestellt sind in einem Template/Theme die verwendeten Layoutelemente wie
Das CMS nimmt Ihnen als Online-RedakteurIn somit weitgehend das Layout bzw. die Einheitlichkeit der Formatierung (mit Hilfe des verwendeten Templates/Themes) ab. Sie sollten sich daher primär um den Inhalt und um dessen Strukturierung kümmern.
In Wordpress finden Sie entsprechende Blöcke: Absatz, Überschrift, Liste, Link, Tabellen, etc.
In Joomla stehen Ihnen im JCE-Editor entsprechende Icons zur Verfügung.
Hinter den WP-Blöcken bzw. JCE-Icons stehen insbesondere folgende zur Strukturierung von Inhalten relevante HTML-Tags ( Was ist ein HTML-Tag):
Mit fett <strong> und invers <em> können Sie einzelne Begriffe innerhalb eines Fließtextes hervor- bzw. abheben.
<p> Dieser Tag bewirkt einen PARAGRAPH/ABSATZ und wird automatisch erzeugt, wenn Sie im Editor die RETURN-Taste verwenden.
<br/> Dieser Tag bewirkt einen BREAK/UMBRUCH. In vielen Editoren entstehen BREAKS automatisch durch Verwendung der Tastenkombination SHIFT+RETURN. <br/> ist - wenn überhaupt - ausschließlich am Satzende einzusetzen, da Texte aus Gründen der Responsivität im Fließformat erstellt werden müssen. Bei unterschiedlichen Browsern und Geräten können Sie nie wissen, wo der Umbruch stattfinden wird!
<h1> bis <h6> Zeichnen Sie Überschriften immer(!) mit den entsprechenden Formaten/Blöcken aus" Außer für die Optik sind diese Strukturangaben auch für Suchmaschinen und für die Barrierearmut relevant. Die Strukturierung der Überschriften-Formate muss logisch sein, keine Hierarchiestufe darf ausgelassen werden. Die Überschrift 1 sollte nur einmal pro Seite vergeben sein, sie wird normalerweise bereits durch den Titel der Seite beansprucht! Mehrere Überschriften pro Seiten dürfen textlich nicht identisch sein.
<ol>, <ul> Für Aufzählungen sind immer(!) Listen (sortierte und unsortierte) zu verwenden.
<a href> Zur Erstellung von Links
Tabellen - Seit es CSS gibt, sollten Tabellen ausschließlich für tabellarische Daten und nicht mehr zum Layouting verwendet werden (da zu viel Code, schwer responsiv gestaltbar und problematisch bzgl. Barrierearmut).
Folgende HTML-Tags sind für RedakteurInnen obsolet, d. h. sie stehen bestenfalls gar nicht zur Verfügung bzw. sollten nicht verwendet werden:
Hinweis: Aktuell gelten folgende Techniken zur Website-Gestaltung als veraltet unsicher oder benutzerunfreundlich und sollten unbedingt vermieden werden:
Die Strukturierung von Websites ist der Schlüssel für die Usability. Strukturen machen Websites für Nutzer, Suchmaschinen, aber auch für alle Geräte einschließlich Screenreader
CMS wie Joomla oder Wordpress geben bereits etliche Strukturen für Websites vor, wie beispielsweise Beiträge, Seiten, Widgets, Menüs, etc. Innerhalb von Beiträgen, Seiten und manchen Widgets sind Sie als Online-RedakteurIn zuständig, den Content in vernünftigen Strukturen darzustellen.
Neuere Web-Editoren, wie z.B. der GUTENBERG-Editor von Wordpress forcieren die Strukturierung von Content. Online-Redakteure sollen zur Strukturierung des Inhals gezwungen werden und nicht beispielsweise auf die Idee kommen, einen Text allein durch Hervorhebung wie Schriftgröße und Fettschrift zu einer rein optisch erkennbaren Überschrift zu machen. Eine Überschrift im Web muss zwingend mit einem h1-h6 HTML-Tag versehen sein, damit auch Suchmaschinen und Screenreader sie in ihrer Funktion erkennen können. Außerdem wird so automatisch das vorgegebene Layout des Templates/Themes für Überschriften genutzt:
Im HTML sieht das bekanntermaßen so aus: <h2>Kapitel 1</h2>
Die Nutzung von Strukturen hat zudem den riesigen Vorteil, dass das Layout für die gesamte Website im CMS einfach geändert werden kann, die Einheitlichkeit erhalten bleibt. Es handelt sich zum Teil übrigens um ein ähnliches Verfahren wie bei den Formatvorlagen in Word – die leider oft wenig bekannt sind bzw. ignoriert werden!
Der neue GUTENBERG-Editor (Wordpress) forciert die Strukturierung dadurch, dass Sie als Online-Redakteur
HTML: <figure class="wp-block-image">
<img src="https://xxx-xxx.de/wp-content/uploads/fotolia_222095501
irfanKhan_LoremIpsum.png"
alt="Interimsbild"
class="wp-image-616"/></figure>
Auf dem Weg zur BARRIEREFREIHEIT ( BITV) ist die Trennung von Inhalt und Layout ein wichtiges Kriterium. Die gängigen Content Management Systeme unterstützen die Barrierefreiheit insgesamt aber leider noch unzureichend.
Für Sie als Webworker ist es allerdings mit vertretbarem Aufwand möglich, Ihre Website wenigstens „barriereärmer“ zu gestalten, wenn Sie z. B. folgende Punkte umsetzen:
Auch hier geht es wieder um » Strukturen, insbesondere solche, die die Lesbarkeit fördern.
Strukturieren Sie Ihren Content durch die passende Block-Auswahl im Gutenberg-Editor (Wordpress) oder durch entsprechende Funktionen/Formatvorlagen in anderen Editoren, z. B.:
Neben den Schriftarten sind auch die Ausgangs-Schriftgrößen und -relationen durch das Template/Theme (Layout) festgelegt. Als Redakteur haben Sie damit allerdings ebenso wenig zu tun wie mit der Zeilenbreite oder der Festlegung der Linksbündigkeit. Sie sollten sich auf den Content und dessen Strukturen konzentrieren!
Verwenden Sie Farben generell sparsam! Garantieren Sie einen ausreichenden Kontrast bei der Verwendung von Farben, z. B. bei der Schriftfarbe und ihrem Hintergrund. Ob der Kontrast der Farben ausreichend ist, können Sie im Zweifelsfalle mit dem Tool CCA – Colour Contrast Analyser prüfen.
Als Redakteur sind Sie für die Verständlichkeit der Inhalte, die Sie im Web präsentieren, verantwortlich. Beachten Sie verstärkt in Bezug auf Ihre möglicherweise auch heterogene Zielgruppe(n) auf folgendes:
Um über Suchmaschinen gut und aussagekräftig gefunden bzw. angezeigt zu werden, sollten Sie in einem ersten Ansatz für wichtige Unter-Seiten Ihrer Website die sog. Meta-Description ausfüllen. Fehlt die Meta-Description, generieren Suchmaschinen wie Google diese selbst aus dem Seiteninhalt.
In der Meta-Beschreibung können Sie 1-3 Sätze zum Inhalt einer Seite oder eines Menüpunkts verfassen. Die Beschreibung sollte zur jeweiligen Seite passen und innerhalb Ihrer Website einzigartig sein. Die optimale Länge der Beschreibung liegt zwischen 130 und 160 Zeichen. Die Zeichen nach Position 160 werden in den meisten Fällen von den Suchmaschinen abgeschnitten, d.h. nicht mehr dargestellt. S. auch
Ob die Suchmaschinen die Meta-Schlüsselwörter überhaupt auswerten, ist unter Experten genauso umstritten wie die Frage, ob es 1 oder mehrere Schlüsselwörter sein sollten.
Nichts ist ärgerlicher, als wenn die Website plötzlich nicht mehr funktioniert oder vom Provider vom Netz genommen wird, weil sie kompromittiert wurde. Realisieren Sie folgende Maßnahmen: