responsive sidebar

[heinetz]

Hallo Forum,

ich denke über folgende Aufgabenstellung nach:

Variante a) Auf meiner Website mit responsive Grid (Bootstrap) gibt es eine Sidebar mit Menü. Die Sidebar soll bei einer Viewportbreite > 768px ein und <= 768px ausgeblendet werden. Das würde ich mit einem CSS-Media-Query einfach realisieren können.

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

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.

$('#button).on('click', function(){
	$('#sidebar).toggleClass( "toggled" );
}); 

Variante c) Auf meiner Website mit responsive Grid (Bootstrap) gibt es eine Sidebar mit Menü. Die Sidebar soll sich mittels Button ein- und ausblenden lassen UND AUCH bei einer Viewportbreite > 768px ein und <= 768px ausgeblendet werden. Auch das könnte ich mit jQuery lösen indem ich die Lösung von Variante b erweitere.

Aber ich bin etwas unsicher, ob es die einzige und ob es eine elegante Lösung ist. Denn man könnte Variante a ja theoretisch auch mit jQuery lösen, würde aber CSS-Media-Queries bevorzugen.

Was sagt ihr?

danke für's gespräch und

gruss, heinetz

[Gunnar Bittersmann]

@@heinetz

Die Sidebar soll bei einer Viewportbreite > 768px ein und <= 768px ausgeblendet werden.

Wi kommst du auf diesen Breakpoint?

Die Sidebar soll sich mittels Button ein- und ausblenden lassen UND AUCH bei einer Viewportbreite > 768px ein und <= 768px ausgeblendet werden.

Dieses responsive menu könnte für dich interessant sein. Das sollte auch barrierefrei sein und für alle Nutzer funktionieren. Weitere Erklärung in diesem Thread.

LLAP 🖖

[heinetz]

hi,

Wi kommst du auf diesen Breakpoint?

Viewportbreite >= 768px ein und < 768px besser?

Dieses responsive menu könnte für dich interessant sein.

Ja, interessant. Allerdings unterscheidet es sich etwas von meiner Aufgabenstellung : Dein Menü lässt sich nur bis zu einer Viewportbreite von 24em mittels Button ein- und ausblenden. Bei einem breiteren Viewport ist es immer sichtbar.

gruss, heinetz

[Gunnar Bittersmann]

@@heinetz

Wi kommst du auf diesen Breakpoint?

Viewportbreite >= 768px ein und < 768px besser?

Nein. Wie kommst du auf 768px? Was ist das für eine krumme Zahl?

Breakpoints sollten (bei Bedarf) anhand des Inhalts festgelegt werden, nicht anhand irgendwelcher momentan(!) aktueller Geräte.

Dieses responsive menu könnte für dich interessant sein.

Ja, interessant. Allerdings unterscheidet es sich etwas von meiner Aufgabenstellung : Dein Menü lässt sich nur bis zu einer Viewportbreite von 24em mittels Button ein- und ausblenden. Bei einem breiteren Viewport ist es immer sichtbar.

Ich hatte dich so verstanden, dass das auch so sein soll.

Und warum sollte es auch nicht so sein? Das Menü verstecken, wenn doch genügend Platz da ist?

LLAP 🖖

[heinetz]

Oha, da hab ich ja etwas losgetreten ;)

Ich stehe vor einer Aufgabestellung und denke über eine Lösung nach, nicht darüber, ob die Aufgabenstellung vielleicht Mist ist. Meine Aufgabenstellung sieht Pixelgrössen vor aber das spielt eigentlich gar keine Rolle. Sie wäre mit relativen Grössen die selbe.

Und warum sollte es auch nicht so sein? Das Menü verstecken, wenn doch genügend Platz da ist?

Warum das so ist, kann ich nicht sagen. Ich denke darüber nach, wie ich diese Aufgabe lösen würde, weil ich keine Möglichkeit habe, die Aufgabe als solche zu ändern.

gruss, heinetz

[marctrix]

Hej heinetz,

Warum das so ist, kann ich nicht sagen. Ich denke darüber nach, wie ich diese Aufgabe lösen würde, weil ich keine Möglichkeit habe, die Aufgabe als solche zu ändern.

Aber du hattest doch drei Varianten angegeben?

Außerdem ist es nie Teil einer Entwicklungsaufgabe, etwas soundsoviel Pixel breit zu machen. Die Entscheidung für eine Maßeinheit liegt in der Verantwortung des Entwicklers, nicht (z.B.) beim Designer.

Wenn du ein PSD oder so hast, in der etwas 960px breit ist, dann weiß man als Entwickler, dass 60em gemeint sind - der Designer weiß das nur nicht. Es ist auch nicht seine Aufgabe das zu wissen…

Marc

[Gunnar Bittersmann]

@@marctrix

Wenn du ein PSD oder so hast, in der etwas 960px breit ist, dann weiß man als Entwickler, dass 60em gemeint sind

So, weiß man das? Wie kommst du auf diese Umrechnung?

Außerdem: Wenn Breakpoints nach Geräten festgelegt werden, macht man das kein bisschen besser, wenn man px in em umrechnet.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Wenn du ein PSD oder so hast, in der etwas 960px breit ist, dann weiß man als Entwickler, dass 60em gemeint sind

So, weiß man das? Wie kommst du auf diese Umrechnung?

Jetzt wird es philosophisch! 😉

Nein im Ernst - wenn ein Designer mir ein Layout vorlegt und er hat ein bisschen Ahnung von dem, was er tut, möchte er oder sie in der Regel, dass der Blindtext in der vorgegebenen Schriftgröße den Kasten mit irgendeiner Breitenangabe wie in der PSD-Vorlage ausfüllt und beim Vergrößern mitskaliert. Wobei er/sie in der Regel nicht einmal „Breite“ (also width) meint, sondern max-width…

Natürlich schadet es nicht, miteiannder zu sprechen, denn mitunter meint der Designer auch "doppelt so breit wie die Marginalspalte" oder „ein Drittel des Viewports“…

Jedenfalls gilt dasfür die meisten Designer, mit denen ich zusammen gearbeitet habe…

Außerdem: Wenn Breakpoints nach Geräten festgelegt werden, macht man das kein bisschen besser, wenn man px in em umrechnet.

Breitenangaben haben erst mal nichts mit Breakpoints zu tun — ich hatte hier eine Mitdenk-Aufgabe versteckt* 😉

Marc

• unabsichtlich, ich gebe es zu…

[marctrix]

Hej heinetz,

Außerdem: Wenn Breakpoints nach Geräten festgelegt werden, macht man das kein bisschen besser, wenn man px in em umrechnet.

Ach so, @heinetz, was @Gunnar Bittersmann hier gemeint hat: Breakpoints legt man inhaltsbezogen fest, nicht geräteabhängig. Anders gesagt: wird der Inhalt bein einer bestimmten Viewportbreite schlecht zugänglich oder objektiv hässlich, dann sollte man sein Layout ändern (einen Breakpoint setzen und vernünftige die Elemente neu andordnen). Nicht abhängig davon, ob gerade für diese Auflösung XXX Tablets oder yyy Smartphones verkauft wurden )das ändert sich eh täglich, weil die Dinger ständig gekauft und entsorgt werden)…

Marc

PS: Man beginnt mit der Darstellung für kleine Displays (mobile first) und Texte werden beispielsweise schlecht zugänglich, wenn die Zeilenlänge 60 bis 80 Zeichen überschreitet…

[Gunnar Bittersmann]

@@heinetz

Ich stehe vor einer Aufgabestellung und denke über eine Lösung nach, nicht darüber, ob die Aufgabenstellung vielleicht Mist ist.

Ich würde lieber über die Lösung für ein Problem nachdenken als über die Lösung für eine Aufgabenstellung, die ganz sicher Mist ist.

Anders gesagt: Eine Aufgabenstellung, die ganz sicher Mist ist, löst kein Problem.

LLAP 🖖

[MudGuard]

Hi,

Wie kommst du auf 768px? Was ist das für eine krumme Zahl?

wieso krumm? Das sind genau drei Viertel von 2 hoch 10 …

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

Wie kommst du auf 768px? Was ist das für eine krumme Zahl?

wieso krumm? Das sind genau drei Viertel von 2 hoch 10 …

Sag ich doch: krumm: Sowohl 3 als auch 10 sind krumme Zahlen. 😜

LLAP 🖖

[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

[marctrix]

Hej heinetz,

KEIN Ausblenden, Nutzer wollen keine Crippleware!!!

Ist natürlich kein Problem mit einem funktionierenden Einblend-Mechanismus…

Marc

[Gunnar Bittersmann]

@@marctrix

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

Ja. Und nein.

Bootcrap o.ä. ist bedingt geeignet, Webseiten zu erstellen, wenn man keine Ressourcen für Frontend-Entwicklung hat.

Und ist es nicht so, dass dort in den letzten Jahren etwas Gehirnschmalz eingeflossen ist und Komponenten barrierefrei sind – zumindest besser als es jemand mit wenig Ahnung selbst hinbekommen würde?

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

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

Ja. Und nein.

Bootcrap o.ä. ist bedingt geeignet, Webseiten zu erstellen, wenn man keine Ressourcen für Frontend-Entwicklung hat.

Und ist es nicht so, dass dort in den letzten Jahren etwas Gehirnschmalz eingeflossen ist und Komponenten barrierefrei sind – zumindest besser als es jemand mit wenig Ahnung selbst hinbekommen würde?

Das ist nicht wirklich eine Rechtfertigung - schließlich macht es zufrieden und hält davon ab, es richtig zu lernen. All die vielen (selbst-)zufriedenen Entwickler nutzen das dann für immer weiter und Viele Agenturen setzen es dann auch ein, weil es schnell geht — was eine Lüge ist. Aber wem sage ich das. Selbst wenn damit etwas „schnell“ erstellt ist. So was zu pflegen und an eigene Bedürfnisse oder eine individuelle Layout-Vorgabe anzupassen ist aufwändig.

Vermutlich seit Flexbox, spätestens aber mit CSS Grid haben sich die meisten Gründe für Bootstrap wohl erledigt…

Noch ein Nachteil: Oft sind es Backend-Entwickler, die Bootstrap einsetzen. Der Bedarf für Frontender wird so verschleiert. Was die dann an HTML in die Bootstrap-Container kippen, führt dazu, dass Leute ohne Ahnung dann auch noch die Bootstrap-Seite weiter verschlimmern.

Für eine ordentliche Webseite braucht man Frontend-Entwickler und BAckend-Entwickler (und keine Entwickler, die drölf Programmiersprachen, Bootstrap, jQuery, Patternlab, grunt, SEO, CSS3 (haha) und HTML (natürlich 5, nochmal haha) können.

Aber (gefühlt nur) dafür werden Stellen ausgeschrieben…

Marc

[heinetz]

Jetzt wird's Philosophie 😉

Ich habe vor mittlerweile 17 Jahren angefangen, Websites zu bauen. Ich habe damals Layouts mit ausgeschnittenen JPGs und HTML-Tabellen für IE5 und Netscape 4 umgesetzt, Javascript geschrieben, das beide interpretieren konnten und habe sicher 8 Jahre vehement daran festgehalten, keine fertigen Bibliotheken einzusetzen. Widerwillig habe ich mich irgendwann auf jQuery eingelassen und es stellte tatsächlich eine Arbeitserleichterung dar. EIn paar Jahre später habe ich dann mit Bootstrap arbeiten müssen und, siehe da, auch das stellte eine Arbeitserleichterung dar. Und jetzt geht's wieder weg von den Out-Of-The-Box-Lösungen?

[marctrix]

Hej heinetz,

Jetzt wird's Philosophie 😉

Oder strategisch-konzeptionell. 😉

Und jetzt geht's wieder weg von den Out-Of-The-Box-Lösungen?

Nein, nicht wirklich. Ich plädiere dafür so viel wie möglich auf vorhandenes aufzusetzen. Ein zugängliches responsives Menü, das sich schon mal per Tastatur nutzen lässt zu entwickeln, kostet einfach viel Zeit.

Wenn man eine eigene Lösung nur für sich verwendet, bekommt man auch nicht viel Rückmeldungen. Wenn man statt dessen eine bereits verfügbare Lösung verwendet, zu der man selber (und die ganze Community) Verbesserungsvorschläge einreichen kann, dann ist so eine lösuzin der Regel auf Herz und Nieren durchgetestet - selbst auf exotischen Systemen. Wenn der Entwickler sein „Baby“ mag, hat er Rückmeldungen ernst genommen und die meisten Bugs gefixt. So was selber besser nachbauen zu wollen ist fast unmöglich und der Aufwand IMHO nicht zu rechtfertigen.

Aber ich suche mir Lösungen für konkrete Probleme (Menü, Medienplayer usw) zusammen - nur die Komponenten, die ich wirklich brauche…

Marc

[Gunnar Bittersmann]

@@marctrix

All die vielen (selbst-)zufriedenen Entwickler nutzen das dann für immer weiter und Viele Agenturen setzen es dann auch ein, weil es schnell geht — was eine Lüge ist. Aber wem sage ich das.

Wem sagst du das‽

Selbst wenn damit etwas „schnell“ erstellt ist. So was zu pflegen und an eigene Bedürfnisse oder eine individuelle Layout-Vorgabe anzupassen ist aufwändig.

Ja!1elf Mir ist Bootcrap eher im Weg als dass es zu irgenswas nütze wäre. Das Fatale: Bei Bootcrap wird die Darstellung im Markup angegeben. 😱

Vermutlich seit Flexbox, spätestens aber mit CSS Grid haben sich die meisten Gründe für Bootstrap wohl erledigt…

Zumindest, was das Grid-System anbelangt.

Noch ein Nachteil: Oft sind es Backend-Entwickler, die Bootstrap einsetzen. Der Bedarf für Frontender wird so verschleiert. Was die dann an HTML in die Bootstrap-Container kippen, führt dazu, dass Leute ohne Ahnung dann auch noch die Bootstrap-Seite weiter verschlimmern.

Für eine ordentliche Webseite braucht man Frontend-Entwickler und BAckend-Entwickler (und keine Entwickler, die drölf Programmiersprachen, Bootstrap, jQuery, Patternlab, grunt, SEO, CSS3 (haha) und HTML (natürlich 5, nochmal haha) können.

Aber (gefühlt nur) dafür werden Stellen ausgeschrieben…

Wem sagst du das‽ *seufz*

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Aber wem sage ich das.

Wem sagst du das‽

Na, dir, @Gunnar Bittersmann 😉

Marc

[marctrix]

Hej Gunnar,

@@Gunnar Bittersmann

Bei Bootcrap wird die Darstellung im Markup angegeben. 😱

Genau wie in den Zeiten vor CSS…

Das muss man sich mal auf der Zunge zergehen lassen!

Marc

[Gunnar Bittersmann]

@@marctrix

Bei Bootcrap wird die Darstellung im Markup angegeben. 😱

Genau wie in den Zeiten vor CSS…

Das muss man sich mal auf der Zunge zergehen lassen!

Das t in Bootstrap steht für „Tabellenlayout 2.0“.

LLAP 🖖