GESIS Link System Dokumentation
Automatische Link-Icons für bessere Benutzerführung mit Utility-First Ansatz und Accessibility-Features.
Übersicht
Das GESIS Link System erkennt automatisch verschiedene Link-Typen und zeigt entsprechende Icons an, um Benutzern zu helfen zu verstehen, wohin ein Link führt.
Automatische Icon-Erkennung
<a href="/kontakt">Interner Link</a>
<a href="https://www.gesis.org/cews/">GESIS Portal</a>
<a href="https://europa.eu">Externe Website</a>
<a href="bericht.pdf" download>Download PDF</a>
<a href="#methodik">Anker Link</a>
<a href="mailto:info@gesis.org">E-Mail</a>
<a href="https://search.gesis.org">GESIS Suche</a>Icon-Typen Übersicht
| Link-Typ | Icon | Erkennung | Zweck |
|---|---|---|---|
| Interne Links | Kein Icon | href^="/" | Bleiben auf der Website |
| GESIS Portale | Intern | href*="gesis.org" | Andere GESIS Services |
| Externe Links | Extern | Andere Domains | Verlassen GESIS |
| Downloads | Download | download Attribut | Datei wird heruntergeladen |
| Anker | Anker | href^="#" | Sprung auf der Seite |
href^="mailto:" | E-Mail-Programm öffnen | ||
| Suche | Suche | search.gesis.org | GESIS Suchfunktion |
Standard Links
Interne Links vs. Absolute URLs
Wichtig: Die Icon-Anzeige wird durch relative vs. absolute URLs gesteuert. Entwickler haben es in der Hand, das richtige Verhalten zu wählen.
<!-- ✅ Empfohlen: Relative URLs für echte interne Seiten -->
<a href="/institut">Institut</a>
<a href="/forschung">Forschung</a>
<a href="/kontakt">Kontakt</a>
<!-- ⚠️ Absolute URLs bekommen automatisch GESIS-Icon -->
<a href="https://www.gesis.org/institut/">Institut</a>
<a href="https://www.gesis.org/forschung/">Forschung</a>
SEO & Entwickler-Tipp: Verwende relative URLs (
/seite) für echte interne Links und absolute URLs (https://gesis.org/portal) nur für andere GESIS Portale/Microsites.
GESIS Portale vs. Portal-interne Seiten
Das System unterscheidet zwischen Links zu anderen GESIS Portalen und Links innerhalb des aktuellen Portals:
<!-- Von einem Portal zu anderen GESIS Portalen -->
<a href="https://www.gesis.org/european-values-study/">EVS Portal</a>
<a href="https://data.gesis.org">GESIS Data</a>
<a href="https://www.gesis.org/institut/">Hauptwebsite</a>
<!-- Innerhalb des aktuellen Portals (z.B. CEWS) -->
<a href="/ueber-uns/">Über uns</a>
<a href="/projekte/">Projekte</a>
<a href="/publikationen/">Publikationen</a>Externe Links
Links zu externen Websites erhalten ein externes Icon.
<!-- Automatisch erkannt -->
<a href="https://europa.eu">Europäische Union</a>
<a href="http://example.com">Externe Website</a>
<!-- Accessibility: Externe Links sollten den Kontext erklären -->
<a href="https://w3.org/WAI/" aria-label="Web Accessibility Initiative (öffnet externe Website)">
WAI Guidelines
</a>Icons bei absoluten URLs ausschalten
Falls absolute URLs ohne Icon benötigt werden, nutze die Utility-Klassen:
<!-- Absolute GESIS URL ohne Icon -->
<a href="https://www.gesis.org/institut/" class="no-icons">Institut ohne Icon</a>
<!-- Nur echte externe Links mit Icon -->
<a href="https://partner-site.com" class="external-links-only">Partner</a>Download Links
Automatische Erkennung durch download-Attribut
Das download-Attribut ist der sicherste Indikator für Downloads.
<!-- ✅ Beste Praxis: download-Attribut verwenden -->
<a href="bericht-2024.pdf" download>Jahresbericht 2024</a>
<a href="daten.csv" download="export-2024.csv">Daten exportieren</a>
<!-- JS-generierte Downloads -->
<a href="data:text/csv;base64,..." download="export.csv">CSV Export</a>Erkennung durch Dateierweiterung
Häufige Download-Dateierweiterungen werden automatisch erkannt.
<!-- Automatisch durch Dateierweiterung erkannt -->
<a href="dokument.pdf">PDF Dokument</a>
<a href="tabelle.xlsx">Excel Tabelle</a>
<a href="archiv.zip">ZIP Archiv</a>
<a href="bericht.docx">Word Dokument</a>Explizite Download-Kennzeichnung
Für spezielle Fälle ohne erkennbare Dateierweiterung.
<!-- Manuelle Kennzeichnung für API-Endpunkte -->
<a href="/api/export" class="download-link">API Export starten</a>
<a href="/generate-report" class="download-link">Bericht generieren</a>Spezielle Links
Anker-Links
Links zu Abschnitten auf der aktuellen Seite erhalten ein Anker Icon.
<!-- Automatisch erkannt -->
<a href="#methodik">Zur Methodik</a>
<a href="#kontakt-formular">Zum Kontaktformular</a>
<!-- Accessibility: Beschreibender Text -->
<a href="#ergebnisse" aria-label="Springe zu den Ergebnissen auf dieser Seite">
Zu den Ergebnissen
</a>E-Mail Links
Mailto-Links erhalten ein Mail Icon.
<!-- Automatisch erkannt -->
<a href="mailto:info@gesis.org">E-Mail senden</a>
<a href="mailto:support@gesis.org?subject=Anfrage">Support kontaktieren</a>
<!-- Mit Accessibility-Hinweis -->
<a href="mailto:kontakt@gesis.org" aria-label="E-Mail an Kontakt senden (öffnet E-Mail-Programm)">
Kontakt per E-Mail
</a>Such-Links
Links zur GESIS Suche erhalten ein Such Icon.
<!-- Automatisch erkannt -->
<a href="https://search.gesis.org/research_data">Forschungsdaten suchen</a>
<a href="https://search.gesis.org/?q=survey">Survey Suche</a>Utility Klassen
Icons komplett ausschalten
<!-- Alle Icons deaktivieren (überschreibt auch Downloads) -->
<a href="https://external.com" class="no-icons">Link ohne Icons</a>
<a href="file.pdf" class="no-icons">PDF ohne Download-Icon</a>
<!-- Nur vor-Icon ausschalten -->
<a href="#" class="no-icon-before gesis-link--arrow-before">Ohne Pfeil-Icon</a>Nur externe Links markieren
<!-- Container-basiert -->
<div class="external-links-only">
<a href="/intern">Kein Icon</a>
<a href="https://gesis.org/portal">Kein Icon</a>
<a href="https://external.com">Nur externe Links mit Icon</a>
</div>
<!-- Direkt auf Link -->
<a href="https://external.com" class="external-links-only">Externes Icon</a>
<a href="https://gesis.org/portal" class="external-links-only">Kein Icon</a>Quick Reference
Schnellreferenz: Die wichtigsten Klassen und Attribute für den täglichen Gebrauch.
| Zweck | Code | Beispiel |
|---|---|---|
| Download markieren | download |
<a href="file.pdf" download> |
| Alle Icons ausschalten | .no-icons |
<a href="..." class="no-icons"> |
| Nur externe Icons | .external-links-only |
<a href="..." class="external-links-only"> |
| Download erzwingen | .download-link |
<a href="/api" class="download-link"> |
| Relative URL verwenden | href="/seite" |
<a href="/kontakt"> |
| Screen Reader Info | aria-label |
<a aria-label="Externe Site"> |