Sidebar alternative für mobile?
Hey, ich betreibe eine Wordpress-Webseite und zwischen 50-60% meiner Nutzer sind mobile unterwegs. Ich finde das Theme was ich benutze (baskerville) macht seinen Job schon ganz gut im responsive sein, aber die Sidebar ist halt einfach komplett weg und da sind zum Teil sachen wie "Beiträge nach Kategorie", und ein Text für erstbesucher drin.
Ich könnte die Sidebar vielleicht mit ein bisschen rumfrickeln unter dem content platzieren, aber ob das so die perfekte Lösung ist... Was macht man denn im Normalfall? Ich kann ja nicht die einzige Person mit dem Problem sein, aber google sagt mir genau das.
2 Antworten
Ist jetzt nicht die eleganteste Lösung - aber du könntest die Sidebar (oder Teile davon) zweimal im Quelltext anzeigen und mit media querys die "richtige" anzeigen oder ausblenden. Schematischer Beispielcode:
<!doctype html>
<style>
@media screen and (max-width:400px) {
header { display: block }
aside { display: none }
}
@media screen and (min-width:401px) {
header { display: none }
aside { display: block }
}
</style>
<header>
<!-- Sidebar oben - derselbe Inhalt wie Sidebar rechts -->
</header>
<div id="content"><!-- Content --></div>
<aside>
<!-- Sidebar rechts - derselbe Inhalt wie Sidebar oben -->
</aside>
Alex
Für die Usability in der mobile-Ansicht ist diese Reihenfolge ideal:
- Begrüßungstext
- Content
- weiterführende Links
Normal ist, dass der sidebar unter dem content kommt. Wenn der bei dir verschwindet musst du mal nachschauen ob es Einstellungen fuer den Sidebar gibt, oder ob der sidebar per CSS verschwindet (im Inspector nachschauen).
also sidebar unten ist schon in Ordnng? Dann werde ich das gleich mit custom css fixen, aber es kommt mir immernoch komisch vor..
Danke Alex. Oben ist auch eine gute Idee, aber ich bin mir noch nicht sicher ob oben oder unten. Technisch gesehen brauche ich mit dem css und html keine Hilfe (danke trotzdem), es ging mir eher um den Designerischen Aspekt :)