GESIS Micro-Header als 1. Element
Der Microsite Header besteht aus 3 Einzelelementen. An 1. Stelle hier der GESIS-bezogene Micro-Header, in dem hauptsächlich GESIS-bezogene Inhalte wie Login oder der Link zurück zu GESIS angezeigt werden. An dieser Stelle ist auch der Sprachumschalter platziert, da dieser vom Nutzer größtenteils an dieser Stelle erwartet wird. Auf die Microsite bezogene Links finden hier nicht statt.
GESIS Topbar
<div> .logo-and-navigations
<!-- header Wrapper -->
<div class="logo-and-navigations">
<div class="logo-and-navigations--inner">
<!-- logo -->
<div class="logo-wrapper">
<a
title="GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen"
href="/home"
data-auto-event-observed="true">
<picture>
<img src="./typo3conf/ext/gesis_web_ext/Resources/Public/webpack/dist/img/logo_gesis_microsite.svg"
height="37"
alt="GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen" />
</picture>
</a>
</div>
<!-- END logo -->
<!-- GESIS back link -->
<div class="navigations-wrapper">
<section class="desktop-only">
<a
title="GESIS Leibniz Institute for the Social Sciences: Go to homepage"
href="/home"
data-auto-event-observed="true"
>
<picture>
<img
src="./typo3conf/ext/gesis_web_ext/Resources/Public/webpack/dist/img/back-2-gesis.svg"
height="37"
alt="GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen"
/>
</picture>
</a>
<!-- top-navigation desktop -->
<nav class="gs_topnav" aria-label="Quick Links">
<ul class="list-group list-group-horizontal">
<li>
<a
href="/en/allbus"
hreflang="en"
aria-label="English page version"
data-auto-event-observed="true"
>
<span class="icon-gs-lang pe-1"></span>
<span class="d-md-inline">English</span>
</a>
</li>
<!-- evtl. toggle between Login & Logout
<li class="d-flex">
<a
href="..."
aria-label="Login" //or Logout
>
Login //or Logout
</a>
</li>
-->
</ul>
</nav>
<!-- END top-navigation desktop -->
</section>
</div>
<!-- END GESIS back link -->
</div>
</div>
<!-- END header Wrapper -->
GESIS Searchbar
<div> .gesis-search-wrapper
<!-- header Wrapper -->
<div class="gesis-search-wrapper">
<div
class="col col-sm-10 col-md-9 col-lg-8 mx-auto"
role="search"
aria-label="GESIS-Suche"
>
<div
id="gs_gws_combobox"
class="gs_combobox py-3 px-1"
role="combobox"
aria-expanded="false"
aria-haspopup="listbox"
aria-atomic="false"
aria-live="assertive"
>
<div class="gs-search-input-wrapper d-flex justify-content-between">
<div
class="gs_search_facet col col-md-3 col-sm-3 col-lg-2 mx-auto"
>
<select>
<option>Microsite Titel</option>
<!-- ist als Info zu verstehen wo der User suchen wird -->
</select>
</div>
<div class="col clear-input-container">
<input
name="query"
id="gs_searchterm"
class="gs_searchterm clear-input"
type="search"
size="15"
placeholder="GESIS durchsuchen…"
aria-controls="gs_hitlist"
aria-owns="gs_hitlist"
aria-label="Suchanfrage"
/>
<button
id="clear-input-button"
type="reset"
aria-label="Suche löschen"
title="Suche löschen"
>
<i class="bi bi-x-lg"></i>
</button>
</div>
<button
id="gs_search_toggle"
class="gs_search_toggle col-1"
tabindex="-1"
title="Suchergebnisse anzeigen oder verbergen"
aria-label="Suchergebnisse anzeigen oder verbergen"
></button>
</div>
<div
id="gs_hitlist"
class="gs_hitlist position-absolute start-0 mt-3 w-100 bg-light"
role="listbox"
tabindex="-1"
aria-hidden="true"
></div>
</div>
</div>
</div>
<!-- END header Wrapper -->
Next Steps
Weitere Header-Bausteine
Im nächsten Schritt wird der Header-Bereich mit dem Microsite-Banner und der Microsite-Navigation ergänzt.
<!-- HTML Basis !-->
<body>
<!-- GESIS Micro-Header -->
<header id="top" class="microsite-header">
<!-- GESIS Logo & Naviagtaion !-->
<!-- Suche !-->
</header>
<!-- microsite banner -->
<section class="page-banner microsite has-bg-color" >
<!-- Breadcrumb !-->
<!-- Site Title!-->
<!-- Microsite Logo für das Angebot!-->
</section>
<!-- microsite navigation -->
<nav class="microsite-menu">
<!-- Indivduelle Microsite Navigation !-->
</nav>
<!-- content -->
<!-- footer-->
<body>
<!-- HTML Basis !-->
Main Content
Der Main Content Bereich kann in 2. Varianten aufgebaut werden:
- Handelt es sich bei dem Inhalt um eine Landing Page oder um Marketing Seiten, ist die Microsite Standard Definition für die Hauptstruktur ausreichend.
- Wird jedoch eine komplexe Anwendung abgebildet, in der eine Interaktion mit Datenbanken und Filterelementen notwendig ist, sollte primär die App-View Main Struktur verwendet werden. Diese bietet die nötige Dynamik und Struktur für komplexere Interaktionsmuster. Gleiches gilt, wenn eine Hauptseite eine sehr tief verzweigte Inhaltsstruktur aufweist. D.h. wenn die Unterseiten über die 2. Level hinaus bis zu einer Tiefe von 6 Levels dargestellt werden sollen. In einem solchen Fall ist die Darstellung der gesamten Navigationsstruktur für den Nutzer sinnvoll. Das GESIS Corporate Team berät und unterstützt hier gerne.