responsive sidebar

[marctrix]

Hej heinetz,

Variante a)

@media screen and (max-width: 767px) {
    #sidebar.toggled {
        width: 250px;
    }
    ...
}

Desktop first? Nicht gut!

Besser kein Bootsrap und:

/* Darstellung für kleine Bildschirme (KEIN Ausblenden, Nutzer wollen keine Crippleware!!! */

#sidebar.toggled {      /* Wenn möglich auf den ID-Selektor verzichten */
  foo: bar; /* z.B. Darstellung als Akkordion */
}


/* Darstellung für große Bildschirme */
@media screen and (min-width: 60em) {
    #sidebar.toggled {
        width: 15em;
    }
    ...
}

Vergiss Pixel, meistens sind (r)em oder vw sinnvoller für horizontale Angaben - oder eine Kombination: calc(1rem + 1vw)

Variante b) Auf meiner Website mit responsive Grid (Bootstrap) gibt es eine Sidebar mit Menü. Die Sidebar soll sich mittels Button ein- und ausblenden lassen. Das würde ich mit Javascript (bzw. jQuery) einfach realisieren können.

Siehe Post von @Gunnar Bittersmann

Was sagt ihr?

Klopp Bootstrap in die Tonne - da gehört es hin ;-)

Mach es selber. Wir helfen, es gibt aber auch viele Anleitungen und Erklärungen im Web, wodrauf es bei so was ankommt, z. B. von Leonie Watson - damit es funktioniert kommt es nämlich gar nicht so sehr auf CSS an - dsiplay-Eigenschaften oder ähnliches ab einem bestimmten Breakpoint zu ändern ist eine Kleinigkeit.

Wichtiger ist, dass die Bedienung mit allen UserAgents möglich ist. Da kommt WAI-ARIA ins Spiel.

Sonst klappt es nur für die Mausnutzer, die allmählich in der Minderheit sind...

Desktop vs. Mobile

Das ist in Deutschland derzeit zwar noch anders (Desktop 58%, Smartphone+Tablet 42%), aber der Trend geht auch hier in diese Richtung. Bleibt noch zu bedenken, dass unter den Desktop-Nutzern auch Menschen sind, die keine Maus nutzen!

Außerdem ist das hier die erstbeste Statistik - ich habe auch schon welche gesehen, die für Deutschland ein 50/50-Verhältnis angeben. Allen gemeinsam ist der Trend weg vom Desktop hin zu mobilen Geräten!

Marc