Modernes und mobiles Webdesign ohne Sidebar?

Bereits seit einigen Jahren ist die überwiegende Zahl von Seitenbesuchern mobil unterwegs. Webseiten müssen also vor allem für diese wichtige Besuchergruppe gestaltet werden. Während das für einige Bereiche relativ leicht geht, gibt es ein “klassisches” Designelement, das zwar wichtig sein kann, aber trotzdem auf Mobile extrem schwer unter zu bringen ist: Die Sidebar. Dieser Artikel zeigt einen möglichen Lösungsweg für alle, die auf ihre Sidebar nicht verzichten wollen. Der Artikel zeigt einen Workaround mit einer ausklapparen, mobilen Sidebar so wie sie in diesem Blog genutzt wird. Der Code ist relativ simpel, im Grunde sind es ein paar HTML/ CSSjQuery Snippets, die hier auch gepostet sind.

Warum möchte man eventuell nicht auf die Sidebar verzichten?

Historisch betrachtet ist die Sidebar eigentlich ein Relikt aus der Frühzeit des Webs. Für viele Designs ist die Sidebar heute nicht mehr notwendig und eigentlich trägt das Weglassen der Sidebar zu einer strafferen Gestaltung bei. Die Seite wirkt ohne ihr einfach übersichtlicher.

Was spricht trotzdem für die Sidebar?

Für manche Designs (z. B. Blogs) ist es aber praktisch den Besuchern zu zeigen, was man denn nicht alles anzubieten hat. Die vielen, vielen Beiträge, die sich im Laufe der Jahre angesammelt haben, können in der Sidebar wunderbar nach den unterschiedlichsten Kriterien ausgegeben werden und Besucher sehen dann relativ leicht, was es noch alles gibt im Blog.

Eine Lösung für Mobile mit Sidebar:

Schwierig wird es aber am Smartphone, wo man einfach keinen Platz für die Sidebar hat. Ich habe mir daher eine Lösung überlegt, die das Beste aus zwei Welten verschmilzt: Die Sidebar mit ihren nützlichen Informationen, wird nur auf Klick ausgeklappt und ist im Normalfall nicht zu sehen. Erleben kann man das ganz leicht, entweder direkt am Handy oder indem man das Browserfenster schmal macht. Die Sidebar verschwindet dann und ein Kompasssymbol erscheint am rechten Rand. Klickt man auf das Symbol, wird die Sidebar ausgeklappt.

Der Code für die ausklappbare Sidebar:

Wer sich so eine Lösung gerne selbst coden möchte, kann das mit ein paar kleinen Änderungen am (Child)Theme jederzeit machen. Wer die Arbeit lieber einem Profi überlassen möchte, kann mich natürlich auch gerne kontaktieren, die Arbeit ist nicht extrem aufwändig.

im Grunde benötigen wir nur folgendes:
1) Einen geringfügig geänderten HTML-Code
2) Einen Icon
3) Etwas CSS
4) einen jQuery-Schnipsel
Im konkreten Fall sieht das bei mir dann so aus:

1) Das HTML:
Jede Sidebar sieht anders aus, dies ist ein Beispiel für eine einfache Sidebar mit Widgets:

<aside id="secondary" class="widget-area no_active">
	<div class="sec_wrapper">
		<div class="sec_tab">
		</div>
		<?php dynamic_sidebar( 'sidebar-1' ); ?>
	</div><!--.sec_wrapper-->	 
</aside><!-- .secondary -->

Es wird also um die eigentliche Sidebar ein div-Container gespannt und in dem div-Container ist ein tab (Tabulator oder Reiter) drinnen.

2) Der Icon:
Nachdem ich keine hübschen Vorlagen gefunden habe, habe ich mir den Icon selbst gebaut und als SVG abgespeichert. Es ist ein Kompasssymbol. Aber natürlich kann man auch ein anderes Symbol wählen.

3) Das CSS
Auch das CSS ist überschaubar. Im Grunde wird die Sidebar ausserhalb des Browserfensters fix positioniert, nur der Reiter schaut in das Browserfenster hineien. Und dann gibt es eine zweite Klasse .yes_active die die Sidebar um 298px weiter nach links schiebt. Mit transition: all .5s ease-in-out; wird diese Bewegung animiert.

/* SIDEBAR - SECONDARY */
#secondary {
	position: fixed;
	top: 80px;
	right: -300px;
    width: 300px;
	transition: all .5s ease-in-out;
}

#secondary.yes_active {
		transform: translateX(-298px)
}

.sec_wrapper {
	position: relative;
	border: 1px solid #000;
	padding: 20px;
	background: #f1f1f1;
}
.sec_tab {
	position: absolute;
	left: -70px;
	top: 10px;
	width: 70px;
	height: 70px;
	background: url(hier-der-pfad-pfad-zum-icon/compass.svg) no-repeat center;
	background-size: 70px 70px;
}

4) Und die Classe wird über jQuery ein- bzw. ausgeblendet.

<script>
    jQuery(document).ready(function($){
		$('.sec_tab').click(function(){
          $('#secondary').toggleClass('yes_active no_active');
    		});
		  });
</script>