Leitfaden zur Websitebearbeitung
Der Internetauftritt ist das digitale Aushängeschild der Hochschule und entscheidend für den ersten Eindruck. Daher ist es notwendig, dass die Hochschulwebsite zielgruppenorientiert, klar strukturiert und intuitiv bedienbar ist. Darüber hinaus soll die Homepage das Leitbild der OTH Amberg-Weiden widerspiegeln: Leistung, Stil und Gemeinschaft.
Bei der Erstellung einer neuen oder der Überarbeitung einer bestehenden Website ist es daher wichtig, folgende Fragen im Hinterkopf zu behalten:
- Zielgruppenfokus: Wie sieht die Zielgruppe, also vor allem Studieninteressierte und Studierende, aber auch potenzielle Mitarbeiterinnen und Mitarbeiter sowie Partner(-unternehmen) das Thema?
- Benutzerfreundlichkeit: Ist die Seite leicht zu verstehen und zu bedienen?
- Konsistenz: Passt die einzelne Seite zum Gesamtbild der Website?
- Image: Spiegelt die Seite das Image der OTH Amberg-Weiden wie gewünscht wider?
- Aktualität: Sind alle Inhalte aktuell bzw. können sie leicht aktualisiert werden?
Ansprechpartner
Katrin Hirmer | Ansprechpartnerin für inhaltliche Koordination der Website |
Bernhard Eckl | Ansprechpartner für technische Betreuung der Website & TYPO3 |
Sonja Wiesel | Inhaltliche Verantwortung und Ansprechpartnerin für grundlegende Fragen zu Inhalten, Image & Kommunikationsstrategie der Hochschule |
Nicola Schinner | Ansprechpartnerin für gestalterische Fragen und Corporate Design |
Carolin Schneeberger | Ansprechpartnerin für Suchmaschinenoptimierung (SEO) |
Arbeitsprozess
Text
Die wichtigste Regel beim Erstellen von Websitetexten ist: So viel Text wie nötig, aber vor allem so wenig wie möglich! Die Textlänge sollte sich dabei an dem Layout der Templates und Vorlagen orientieren (s. Anhang).
Außerdem ist es sinnvoll sich bei Webtexten an diese Grundregeln zu halten:
- Ein Thema pro Absatz
- Ein Gedanke pro Satz
- Sätze so kurz wie möglich (maximal zwei Kommata pro Satz)
- Aktiv formulieren
- Wichtiges hervorheben, z.B. durch Fettung
- Klare Struktur durch (Zwischen-)Überschriften und Aufzählungen/Listen/Tabellen sowie Buttons/Links
- Nur allgemeinverständliche, nicht fachspezifische Fachbegriffe und Abkürzungen
Online-Tool zum Kürzen von Texten: Chat GPT (allerdings anschließend immer noch einmal die Inhalte gegenlesen)
Online-Tool zur sprachlichen Überarbeitung: DeepL Write
Tonalität
Grundsätzlich sollten alle Texte auf der Website so formuliert werden, dass sie das Image der Hochschule widerspiegeln. Das heißt, die Texte sind freundlich, einladend und seriös. Es wird deutlich, dass die OTH Amberg-Weiden ihr Bestes gibt, um jede und jeden individuell dabei zu unterstützen, das Beste für sich herauszuholen. Aus den Texten geht zudem hervor, dass die OTH Amberg-Weiden eine Gemeinschaft ist, die sich gegenseitig unterstützt und großen Wert auf eine fundierte und praxisorientierte Ausbildung legt.
Ansprache
Die Leserinnen und Leser werden auf der Website gesiezt.
Ausnahme: Inhalte, die sich gezielt und ausschließlich an Schülerinnen und Schüler richten, z.B. der Studieninfotag und die Studiengangsseiten.
Gendern
Die erste Wahl sollten geschlechtsneutrale Bezeichnungen sein, z.B. Fachkräfte oder Studierende.
Gibt es einen solchen Begriff nicht, wird sowohl die männliche als auch die weibliche Form genannt, z.B. Professorinnen und Professoren.
X Nicht erwünscht sind Ausdrücke mit Binnen-I, Sternchen oder Doppelpunkt.
Online-Tool für gendergerechte Ausdrücke: Gender-Wörterbuch
Bilder, Videos & Grafiken
Bilder, Videos und Grafiken sollen die Aussagen des Textes unterstützen, leichter verständlich und ansprechender machen. Eine Text-Bild-Schere sollte vermieden werden. Außerdem sollte darauf geachtet werden, die Website nicht mit Inhalten zu überfrachten. Besser sind wenige, aussagekräftige und großformatige Bilder, Videos oder Grafiken.
Bildsprache
Auch hier soll das Leitbild der Hochschule – Leistung, Stil, Gemeinschaft – deutlich werden und vor allem der Mensch im Mittelpunkt stehen. Die Bilder sollten Menschen zeigen, die der Zielgruppe entsprechen und sympathisch wirken. Die Bilder sollen zudem positive, einladendeEmotionen vermitteln und zeigen, dass die Hochschule ein moderner, zukunftsorientierter Ort des Miteinanders ist.
Auswahlkriterien
- Möglichst aktuelle Inhalte
- Der Mensch im Mittelpunkt
- Hochschuleigene Bilder vor Stockbildern
- Grafiken entsprechend dem Corporate Design
Online-Tool zur Suche von Bildern, Videos und CD-konformen Vorlagen: Bilddatenbank Canto
Falls kein gutes eigenes Material vorhanden ist können Inhalte auch über freepik, unsplash oder Adobe Stock bezogen werden. Dafür bitte eine Info mit Link zu der Datei an Sonja Wiesel (s.wiesel@oth-aw.de).
Im Zweifel, bei Fragen und bei Grafiken immer vor der Einbindung auf die Webseite an Nicola Schinner (n.schinner@
oth-aw
.
de) wenden.
Technische Anforderungen
Fotos/ Grafiken
Größen & Auflösung:
- Headerbilder: klassisch mind. 1600 x 410 px, höherer Header mind. 1946 x 760
- Mobil Seitenverhältnis 3:4 oder max. quadratisch
- Querformat, maximal quadratisch (X keine Hochkantbilder)
Dateigröße:Komprimierung 60 - 80 % (Bild sollte nicht pixelig aussehen)
Dateiformate:
- .webp (empfohlen für alle Formate, sowohl Fotos als auch Grafiken, da kleinere Dateigröße & bessere Qualität)
- .jpg/.jpeg (für Realfotos)
- .png (für transparente Bilder, Logos oder Grafiken)
- SVG (empfohlen für Icons & Logos, da skalierbar ohne Qualitätsverlust)
Online Tool zur Optimierung von SVG-Dateien: SVGOMG (wichtig: Einschalten von „prefer viewbox“ & „inline styles“
Bilder sollten mit einem kurzen, beschreibenden Alternativtext (Alt-Text) versehen sein, um Barrierefreiheit zu gewährleisten und SEO zu optimieren. In diesem Zusammenhang macht es auch Sinn, der Bilddatei einen sinnvollen, beschreibenden Namen zu geben, z.B. medizintechnik-labor.jpg statt IMG1234.jpg
Für eine gute Lesbarkeit auf allen Geräten sollte bei Grafiken die Schriftgröße mindestens 16px sein. Außerdem empfiehlt es sich mit Blick auf SEO und Barrierefreiheit Text als Beschreibung in TYPO3 einzugeben statt in der Bilddatei.
Videos
Grundsätzlich können Videos über externe Plattformen wie YouTube oder Vimeo eingebunden werden. Sollte das nicht möglich sein oder nicht erwünscht sein, können Videos auch direkt in TYPO3 hochgeladen werden. Die Datei sollte für Barrierefreiheit und SEO idealerweise über Untertitel verfügen.
Dateiformate: .mp4 (H.264 Codec, beste Kompatibilität)
Auflösung: maximal 1080p (Full HD)
Tool zur Komprimierung von Videos: Handbrake (Eine Anleitung dazu steht auf der Website, hier sollte der Preset für Full HD verwendet werden)
Suchmaschinenoptimierung (SEO)
SEO ist entscheidend, um die Sichtbarkeit der Website zu erhöhen. Nur wenn die Website bei einer Suche im Browser auch unter den ersten Ergebnissen aufgelistet wird, wird sie auch besucht und die Inhalte gelesen. Für SEO sind einige Aspekte zu beachten:
Meta-Daten
Vor allem die Meta-Daten sind wichtig. Sie werden in TYPO3 unter „Seiteneigenschaften > Metadaten“ eingegeben. Besonders Seitentitel und die Meta-Beschreibung sollten hier ausgefüllt werden:
Seitentitel: Sollte das Haupt-Keyword enthalten und max. 60 Zeichen lang sein.
Meta-Beschreibung: Kurz, prägnant, klar formuliert und am besten mit Call-to-Action, der zum Lesen der Seite animiert (max. 160 Zeichen).
Schlagworte: Keywords (aus einem oder mehreren Wörtern, verschiedene Keywords durch Komma voneinander getrennt)
Keywords
In den Meta-Daten, aber auch in den Texten der Website sollten wichtige Keywords vorkommen und prominent platziert werden. Also Begriffe, nach denen zu diesem Thema gesucht wird. Auch hier lohnt es sich, die Perspektive der Zielgruppe einzunehmen und zu überlegen, welche Begriffe für diese relevant und naheliegend sind.
Online-Tool zur Keywordrecherche: Keyword-Tool und Ubersuggest
Besonders wichtig ist es, das Hauptkeyword in Überschriften, in Aufzählungen/Listen und an Satzanfängen zu platzieren. Dabei sollte jedoch Keyword-Stuffing vermieden werden. Also die unnatürliche, übermäßige Verwendung eines Keywords. Besser ist es, den Text ansprechend zu gestalten und Synonyme zu verwenden.
Überschriftenstruktur
Auf jeder Seiten werden die Überschriften nach Hierarchien abgestuft (H1 hat die höchste, dann absteigend: h2, h3, …) Für SEO spielt diese Überschriftenstruktur eine Rolle. Hier gilt: Jede Seite hat genau eine H1-Überschrift, in der das Hauptkeyword vorkommt. H1 wird automatisch in der Headergrafik oder im Inhaltsbereich verwendet bzw. falls diese leer ist, wird der Seitentitel dafür verwendet.. H2-H6 strukturieren den weiteren Inhalt logisch. Dabei sollte keine Hierarchie übersprungen werden; Also nicht direkt von H1 zu H3 springen.
Tipp: Sollte das aus optischen Gründen nicht gewünscht sein, erlaubt TYPO3 einen kleinen Trick: Wählen Sie, wenn Sie den Seiteninhalt bearbeiten im Feld „Typ“ die Überschriftenart aus, die laut Hierarchie vorgesehen ist. Daneben, im Feld „Headerclass“ können Sie dann die Überschrift auswählen, deren Layout sie möchten.
Links
Die Anzahl der Links zeigt einer Suchmaschine die Relevanz einer Seite. Aus diesem Grund sollte eine Webseite Links enthalten, insbesondere interne Links innerhalb der Hochschulwebsite. Alle Links sollten mit aussagekräftigen und beschreibenden Linktexten versehen werden, z.B. „Infos zur Studienbewerbung“ statt „hier klicken“.
Wichtiger als die ausgehenden Links, sind jedoch Verlinkungen externer Websites auf die Seiten der OTH Amberg-Weiden. Bitten Sie daher gerne Partner auf ihren Websites auf die Hochschule zu verlinken.
Aktualität
Suchmaschinen bevorzugen aktuelle Inhalte. Deswegen ist es auch aus diesem Gesichtspunkt wichtig, Inhalte regelmäßig zu überprüfen und auf den neusten Stand zu bringen.
Barrierefreiheit
Die Maßnahmen für SEO begünstigen auch die Barrierefreiheit der Website. In diesem Kontext ist es daher nur noch einmal nötig hervorzuheben, dass für eine barrierefreie Bedienbarkeit der Seiten eine korrekte Semantik besonders wichtig ist. Das heißt Überschriften müssen als Überschriften ausgewissen sein, Listen als Listen, Grafiken als Grafiken uns so weiter. Außerdem schreibt eine Richtlinie vor, dass alle Inhalte mindestens über ein Medium barrierefrei abrufbar sein müssen. Bedeutet, dass ein Veranstaltungsinformationen zum Beispiel nicht nur über den Link zu einem Flyer eingebunden werden, dessen Inhalte sich nicht barrierefrei erfassen lassen, sondern auch direkt als Text auf der Webseite.
Struktur und Layout
Für das Layout und den Aufbau der Websites sollen vor allem die Templates und Vorlagen im Anhang eine Orientierung geben. Es ist möglich nach Bedarf davon abzuweichen, trotzdem sollen sie als grundlegendes Gerüst und Maßstab insbesondere für Textlängen, Bildeinsatz und Tonalität gelten.
Menüstruktur
Verschiedene Studien zeigen, dass das menschliche Gehirn maximal sieben verschiedene Punkte erfassen kann. Deswegen sollte eine Website höchstens in sieben Unterpunkte gegliedert sein. Das Menü in der Randspalte kann dabei bis zu zwei Ebenen plus Ankerpunkte in der Subnavigation haben. Dabei sollten diese Menüunterpunkte bevorzugt als Sprungmarken innerhalb einer Seite angelegt sein und nicht als separate Unterseiten.
Verlinkungen
Im Hinblick auf SEO und die angestrebte Verschlankung der Website ist es sinnvoll, auf relevante Informationen zu verlinken, anstatt redundante Inhalte anzubieten.
Übersetzungen
Die Websites der OTH Amberg-Weiden können neben Deutsch auch auf Englisch angelegt werden. Dabei wurde für die Hochschule britisches Englisch als Standard festgelegt.
Es ist nicht das Ziel, alle Inhalte der gesamten Webseite zu übersetzen. Allerdings sollten jene Inhalte übersetzt werden, die auch für internationale Websitebesucherinnen und -besucher interessant und relevant sind. Dabei ist es wichtig zu überlegen, ob die Seiten auch in der Fremdsprache zielgruppengerecht und verständlich sind. Eventuell müssen Informationen ergänzt oder anders beschrieben werden.
Wird eine Seite überarbeitet oder aktualisiert, müssen auch die anderssprachigen Seiten händisch angepasst werden. Das geschieht nicht automatisch.
Online-Tool für Übersetzungen: DeepL
Checkliste
Bevor Sie Ihren Website-Vorschlag an die Hochschulkommunikation senden, überprüfen Sie bitte, ob Sie alle nachfolgenden Punkte mit „Ja“ beantworten können.
Allgemein
- Ist die Seite für die Zielgruppe verständlich und relevant?
- Ist die Navigation intuitiv und sind die Inhalte leicht zu erfassen?
- Passt die Seite optisch und inhaltlich ins Gesamtbild der Hochschulwebsite?
- Spiegelt die Seite das Leitbild und Corporate Design der OTH Amberg-Weiden wider?
- Sind alle Informationen korrekt und auf dem neuesten Stand?
- Wurden Vorlagen und Templates aus dem Leitfaden berücksichtigt?
Text
- Wird ein Thema pro Absatz und ein Gedanke pro Satz formuliert?
- Sind die Sätze kurz und klar (max. zwei Kommata pro Satz)?
- Sind die Texte aktiv formuliert?
- Sind die wichtigsten Punkte hervorgehoben?
- Sind die Texte durch Überschriften, Aufzählungen/Listen, Tabellen, Buttons & Links klar strukturiert?
- Werden unnötige, schwerverständliche Fachbegriffe und Abkürzungen vermieden?
- Werden die Leserinnen und Leser gesiezt?
- Werden geschlechtsneutrale Begriffe verwendet bzw. die weibliche & männliche Form?
Bilder, Videos & Grafiken
- Sind die Bilder hochwertig, authentisch und bevorzugt hochschuleigen?
- Stehen Menschen im Mittelpunkt?
- Werden Text-Bild-Scheren (Bild und Text passen zusammen) vermieden?
- Passt Größe und Auflösung der Bilder, Videos und Grafiken?
- Haben die Bilder einen Alt-Text und Grafiken eine Beschreibung?
- Haben die Dateien beschreibende Namen?
- Haben die Videos Untertitel?
Suchmaschinenoptimierung (SEO)
- Sind bei den Meta-Daten Seitentitel und Beschreibung mit Keywords eingegeben?
- Steht das Haupt-Keyword in Überschriften, Listen und an Satzanfängen?
- Werden die Keywords natürlich, mit Synonymen und ohne Keyword-Stuffing platziert?
- Werden H2-H6 Überschriften strukturiert und ohne Hierarchiesprünge verwendet?
- Sind interne & externe Links sinnvoll gesetzt & mit aussagekräftigem Linktext?
- Sind alle Inhalte mindestens über ein Medium barrierefrei abrufbar und die Semantik korrekt?
Struktur & Layout
- Hat das Menü maximal sieben Punkte?
- Werden Unterpunkte bevorzugt als Sprungmarken auf der gleichen Seite angelegt?
- Werden redundante Inhalte durch interne Links vermieden?
- Gibt es, wenn die Seite international interessant ist, eine englische Übersetzung und ist diese ebenfalls auch dem neuesten Stand?
- Ist das Englisch britisches Englisch?