WBCE CMS Forum

grindbatzn

Guest

Standards: Module, Breiten und Responsive

Ich kiefle gerade an dieser Sache herum:

Module müssen (und sind die meisten ja auch) grundsätzlich mal responsiv sein, sie wissen ja nicht, in welche Umgebung sie geladen werden.

Nehmen wir ein Modul, das Elemente nebeneinander darstellt. Typisch zb eine Bildergalerie.
Die sagt zb: Ich stelle 4 Bilder nebeneinander dar:
li.bild {width:24%; margin-right:1%;}

Was ist jetzt aber, wenn der Contentbereich sehr schmal ist? Oder wenn das Modul überhaupt in der Sidebar ist?
Dann sieht das schnell seltsam aus.

An sich hätte ich mir dafür diese Lösung ausgedacht:
Jeder Contentblock bekommt eine class, die angibt, wieviele "Standardbreiten" (=ca 200-320px) da reinpassen.
Auf einen relativ schmalen Contentbereich (nur 2 Standardbreiten) würde das also in der Frontend.css folgendes ergeben:
.wcols2 li.bild {width:48%; margin-right:2%;}
In der Sidebar:
.wcols1 li.bild {width:100%; margin-right:0;}

Das ist keine große Sache und wäre schnell mal in den Templates drin. Leider würde das aber nur für die Desktop-Version richtig sein.

Wie macht man das aber jetzt mit responsiven Templates? Knifflig. Hat jemand eine Idee dazu?

"Ausmessen" mit Javascript wäre möglich, aber das verzögert den Seitenaufbau sehr stark.

Denke ich vielleicht zu kompliziert?

Und eine Nebenfrage: Kann man dem Body des CKEditors eine class mitgeben, mit deren Hilfe ich die Breite im Editor einstellen kann?
also etwas in der editor.css wie body.block2 {max-width:540px;}

Last edited by grindbatzn (27.07.2015 15:09:42)

webbird

Administrator

Re: Standards: Module, Breiten und Responsive

Das Template auf ein vernünftiges Gridsystem oder ähnlich aufsetzen wäre wohl die richtige Lösung. Ich hab allerdings auch noch keins gefunden, das meine Bedürfnisse erfüllt. Ich will halt nicht den ganzen Kram wie Buttons, Formulare etc. dazu geschenkt haben, wenn ich nur einen ganz rudimentären Grid will. Und ich will auch keinen Grid, bei dem 16 Spalten immer 16 Spalten sind - auch auf einem IPhone. Und das Problem mit dem Menü (auf kleinen Auflösungen verstecken) lösen die meisten auch nicht. Ich bin grad dabei, mir meinen Kram selbst zusammen zu stellen, was ja auch nicht grad "the yellow of the egg" ist, aber damit hab ich dann wenigstens genau den Baukasten, den ich haben will.

Ich glaub allerdings nicht, daß das ein Core-Thema ist. WB ist in erster Linie PHP-Code, keine Optik. Nur zur Abgrenzung, das ist keine Wertung. Ich finde es nämlich prima, daß Du Dich mit solchen Dingen auseinander setzt. Ich hab nämlich wenig Spaß da dran...

Schau Dir mal gridism an, das ist genau der ganz rudimentäre Grid, für den ich mich jetzt erst mal entschieden habe. Der macht trotzdem auch so clevere Sachen, wie Blöcke, die normalerweise nebeneinander stehen, untereinander anzuzeigen, wenn der Viewport zu klein wird.

---

Ich habe eine Amazon-Wishlist. Oder spende an das Projekt.
Ich kann, wenn ich will, aber wer will, dass ich muss, kann mich mal

webbird

Administrator

Re: Standards: Module, Breiten und Responsive

Zur Nebenfrage: Die Funktion show_wysiwyg_area hat einen Parameter für die Breite. Ich weiß jetzt nicht (mehr), wo man das in WB einstellen kann. Oder ob überhaupt.

---

Ich habe eine Amazon-Wishlist. Oder spende an das Projekt.
Ich kann, wenn ich will, aber wer will, dass ich muss, kann mich mal

grindbatzn

Guest

Re: Standards: Module, Breiten und Responsive

Gridsysteme gibt es wie Sand am mehr, und alle haben den Nachteil: Sie machen mehr Arbeit, als sie bringen. Ich würde mich mit Händen und Füßen dagegen wehren, dass sowas in den Core kommt, weil du dann im Forum massen Fragen deswegen hast.

Die Frage nach der Breite des WYSIWYG Editors: Ich meinte nicht die Breite des Editors selbst, sondern ob man dem body des bearbeitbaren Bereiches eine Class mitgeben kann.

Man kann zb in der editor.css angeben:
body {width:550px}
Dann habe ich den Zeilenumbruch genauso, wie er dann im Frontend sein wird - wo die Contentspalte eben 550px breit ist.

Das gilt aber nur für die Contentspalte - was tun mit der Sidebar?
Die wäre zb 320px breit und die Schrift wäre weiß auf blauem Grund.

Es wäre doch schön, wenn ich in der editor.css angeben könnte:
body.block2 {width:320px; color:#fff; background: #0fa8c3;}

Dann sieht auch hier der User gleich, wie das umbrochen wird, wie breit ein Bild mit 50% ist usw..

-----

Meine Empfehlungen zum Thema Standard-Breakpoints habe ich mir gestern überlegt:

<1024px: Touchbedienung, Einzelne Elemente noch nebeneinander.
<480px: Smartphone hoch, alle Elemente untereinander.

Das würde zb bedeuten: Ein Form-Modul sollte label und input nebeneinander stehen haben, aber bei Breakpoint <480 auf untereinander umschalten.

Bildgrößen: 440px breit für Bilder, die zb in der Sidebar sind und am Handy typischerweise in ganzer Breite angezeigt werden.
Das wäre zb das Topics-Bild in der Sidebar.

Mehr dazu:
http://websitebaker.at/topics/css-breakpoints-und-bilder.html

Last edited by grindbatzn (28.07.2015 13:50:19)

norhei

Developer

Re: Standards: Module, Breiten und Responsive

Wie wäre es einfach mit das Modul bekommt ein Template und eine CSS Detei alles mit einigermaßen Statischer Formatierung , im Template kann man dann auf Wunsch beides Überschreiben. Hat man ein olles Template mit Tabellen dann macht man ein Tabellentemplate , oder wenn man was modernes hat, macht man einfach ein Template mit DIVs und breakpoints. Diese Templates kann mann dann einfach per Copy paste auch für andere Templates benutzen oder anpassen. Dann muss sich das Modul garnicht mit Breakpoints befassen  oder irgendwelche javascripte oder was auch immer mitbringen.

Vielleicht als Standard ein bei einer Gallerie z.B. ein schönes Div template, das die Bilder einfach automatisch umbrechen lässt , bei dem man dann vielleicht nur noch die Containergröße anpassen muss. Man bekommt aber auf keinen Fall ein Template hin Was bei allen geht, und die Jetzige Variante mit den einzelnen Code/Template Blöcken ist auch nicht besonders schick  und ich hätte auch noch keinen Kunden gefunden, der damit was Sinniges gemacht hätte und wenn er die Skills hätte könnte er auch einfach eine Templatedatei editieren.

grindbatzn

Guest

Re: Standards: Module, Breiten und Responsive

"Olle Tabellentemplates" gibt es kaum mehr, da muss man sich auch gar keine Gedanken machen dazu.

Ich gehe hier in allem von Responsiven Designs aus; wenn jemand eine fest Größe will, schreibt er einfach feste Werte rein. Und ein Modul kann ohnehin nie wissen, wo es landet. Und auch ein Modul muss sich an eine schmale Spalte (zb die Sidebar) anpassen können, da gilt ja das gleiche wie für ein Smartphone, nur dass da ev. Schalter größer sein müssen.

cwsoft

Member

Re: Standards: Module, Breiten und Responsive

@grindbatzn: Hattest Du für WB nicht schon mal 1-2 Frontendtemplates so halbfertig? Könnte man die nicht mal als Standard für WBCE nehmen und dann sukzessive erweitern umbauen, bis das gemeinsame Ziel erreicht ist? So prickelnd finde ich nämlich das aktuelle wbce Frontendtemplate nicht

---

Account inactive since 2018/11/17.

grindbatzn

Guest

Re: Standards: Module, Breiten und Responsive

Ohne gültige Standards hat es keinen Sinn, an den Templates herumzufrickeln.
Danach geht es ja dann eh schnell.

cwsoft

Member

Re: Standards: Module, Breiten und Responsive

Ohne gültige Standards hat es keinen Sinn, an den Templates herumzufrickeln.
Danach geht es ja dann eh schnell.

Meine mich zu erinnern, Du hattest in den 1-2 Templates bmit einige Standards definiert. Mein Vorschlag bezog sich darauf, diese Templates als Start zu verwenden und anhand eines praktischen Beispiels dann einen gültigen Standard zu definieren. Ich tu mich immer schwer über CSS, Markup, Blöcke etc. zu reden, ohne dabei was konkretes zu sehen.

Da ich jetzt aber nicht so der Designer bin, halte ich mich an dieser Stelle mal raus. Denke es gibt im PHP/Javascript bereich noch genügend offene Baustellen, die ich beackern kann

---

Account inactive since 2018/11/17.

norhei

Developer

Re: Standards: Module, Breiten und Responsive

Kann mir nur Schweer vorstellen, das man bei den Module So universelle Templates hinbekommt das die Voll responsiv sind und überall passen...

Problem am Beispiel von Newsseiten im algemeinen.

Breite Vorschau :
Überschrift
Großes Bild 
Teaser Text
Eventuell weiter Button

Schmale Vorschau Typ1:
nur Überschrift

Schmale Vorschau Typ2:
Überschrift
abgeschnittenes Stück Text
 
Schmale Vorschau Typ3:
Überschrift
abgeschnittenes Stück Text
kleines Bild
weiterlesen Button

Wie soll das Modul Template da festlegen wann was?  Und dass soll auch noch in alle möglichen Templates reinpassen?
Wieviel JS/CSS muss das dann mitbringen?

Wobei Ich irgendwie das Gefühl habe wir Reden aneinander vorbei ...

evaki

Guest

Re: Standards: Module, Breiten und Responsive

Um das Maß voll zu machen 
„CSS gerootet“: Flexible Schriftgrößen mit REM
http://www.drweb.de/magazin/css-gerootet-flexible-schriftgroessen-mit-rem-38784
MfG. Evaki
p.s. Du darfst keine Links absenden ???
Ich glaub, ich bin zu doof für den Editor.

Last edited by evaki (18.08.2015 21:48:45)

cwsoft

Member

Re: Standards: Module, Breiten und Responsive

Du darfst keine Links absenden ???
Ich glaub, ich bin zu doof für den Editor?

Wahrscheinlich

Oder es liegt am Browser oder den Foreneinstellungen. Also mal erstes Posten und evtl. PM an Florian.

---

Account inactive since 2018/11/17.

evaki

Guest

Re: Standards: Module, Breiten und Responsive

Nicht gelesen
Personalisierung
[ url ] Tag: aus

Gute Stimmung im Forum. Das hat was.
MfG. Evaki

Nun, Mi,19.8. ist es an    , danke

Last edited by evaki (19.08.2015 16:04:21)