“Inspiriert” von diesem Beitrag, habe ich mir die Einkaufswelten genauer angeschaut, was ich ursprünglich erst in der Final machen wollte. Im obigen Thread wird darauf verwiesen, dass beim Responsive die Bildgröße eher unwichtig ist, die Qualität sollte nur gut genug sein - soweit ist das verständlich. 
Nun aber zu den Elementen [RC3]: Für Bilder im Slider und Banner ist wegen responsive die absolute Größe nun nicht wichtig, was aber sehr wohl wichtig ist, ist das Seitenverhältnis - oder die relative Größe - der Elemente. Ohne so eine Angabe kann ich nunmal keine Grafiken/Bilder für diese Elemente erstellen. Lade ich 4/3 hoch, wird bei 16/9 abgeschnitten oder ein Balken wird sichtbar, verzerrt etc ??? Kurz: Wie erstelle ich nun PASSENDE Bilder/Grafiken für Banner/Bannerslider? Zur Elementgröße finde ich nämlich in meiner RC3-Umgebung KEINE Angaben in der Einkaufswelt oder im Element selber. Kann mir hier jemand die Erleuchtung bringen? 
…würde uns auch interessieren
Uns fehlen diese Angaben ebenfalls. Beim Erstellen eines HTML Elementes mit Text besteht zudem kein (zu wenig) Randabstand… 
[quote=„Alexis40“]Uns fehlen diese Angaben ebenfalls. Beim Erstellen eines HTML Elementes mit Text besteht zudem kein (zu wenig) Randabstand… :-([/quote] Zudem wird der Text des Html-Elements schon bei Tablet-Portrait klitzeklein, so dass man ihn kaum mehr lesen kann.
[quote=„jox“][quote=„Alexis40“]Uns fehlen diese Angaben ebenfalls. Beim Erstellen eines HTML Elementes mit Text besteht zudem kein (zu wenig) Randabstand… :-([/quote] Zudem wird der Text des Html-Elements schon bei Tablet-Portrait klitzeklein, so dass man ihn kaum mehr lesen kann.[/quote] Dann passe doch das CSS an und nimm ab dem gewünschten Breakpoint font-size: 2rem (oder welche Größe auch immer passend ist) für das html-text Element.
Das css oder das less? Ich habe im panel.less Änderungen gemacht, aber die greifen nicht. Was tun? Ist es die falsche less?
*Das Thema mal wieder hochschieb* :thumbdown: Ich denke, da ja auch ähnliche Fragen kommen, besteht hier schon ein Dokumentationsdefizit zu SW5 Das Thema „Schriftgröße“ bitte in einem der beiden anderen Threads von Jox besprechen - hier geht es um die Elementgröße als Basis für Banner/Bannerslider- Bilder.
Irgendwie bekomme ich zunehmend den Eindruck, dass das neue “Konzept” responsive in Verbindung zur “Einkaufswelt” nicht wirklich durchdacht ist. Wenn ich wirklich für jeden Viewport eine ganz individuelle Einkaufswelt anlegen muss, hat das ganze mit responsive nichts mehr zu tun und artet in unwirtschaftliche Arbeit aus. Bsp. HTML-Element - also eigentlich nur TEXT: “Masonry-Effek” => die Boxen werden irgendwann so schmall, das der Content unten vom Rand abgeschnitten wird, dafür bleibt die Schrift lesbar. “Resize der Elemente” => die Schrift wird sehr schnell so klein, dass man wirklich nichts lesen kann, dafür bleibt der Inhalt ganz in der Box. “Banner” Alte Einkaufswelt ein Banner: Sah gut aus Neue Einkaufswelt : wird vergrößert - “unscharfer” Matsch. Leider kann man hier auch nicht mischen: Für “Banner” wäre “Resize der Elemente” eine passende Einstellung, aber für HTML müsste man “Masonry-Effek” verwenden. Hier fehlt ganz dringend ein Designguide für die Einkaufswelten in Verbindung mit Bare/Responsive! Ein Umstieg vom alten “Orange” hin zu “Responsive” wird wohl für einige ein optisches Desater werden.
Hallo Ihr Lieben, wir arbeiten bereits an einem Guide für die neuen Einkaufswelten. Bis dieser online ist möchte ich Euch schon einmal mit einigen Infos versorgen. Ich denke man muss grundsätzlich zu aller erst wegdenken von statischen Pixeln. Bisherige Einkaufswelten hatten Banner mit festen Maßen die sich niemals ändern. In einem komplett fluiden Layout geht das natürlich nicht. Das heißt im Gegenzug natürlich auch, dass man die Inhalte etwas anders aufbereitet. Ich finde man kann sich da als Beispiel ganz gut an den Einkaufswelten im Demoshop orientieren. Banner werden weniger als Werbefläche mit statischen Texten und Preisen verwendet, sondern als Stimmungsbilder um gewisse Emotionen zu vermitteln, welche im besten Fall zu den nebenstehenden Produkten (Produktbox, Produkt-Slider, Sideview) passen. Uns ist natürlich klar, dass nicht jeder mit seinem Shop diese Art von emotionalem Shoppen in seinem Shop umsetzen möchte, sondern lieber klassische Werbebanner in den Einkaufswelten verwenden möchte. Dafür haben wir über die verschiedenen Konfigurationsmöglichkeiten viel Freiraum für den Verwender geschaffen. Ich verstehe, dass man mit diesen vielen neuen Möglichkeiten erst einmal etwas rumspielen muss, bis man die für den eigenen Anwendungsfall geeigneten Einstellungen gefunden hat. Ich hoffe hier kann dann der kommende Wiki-Artikel weiter unterstützen. Das muss aber natürlich nicht das Ende der Reise sein. Wir freuen uns über jede Art von konstruktivem Feedback um die Einkaufswelten auch in Zukunft noch besser zu machen. Eure Anregungen hier in diesem Beitrag habe ich bereits notiert. Solltet Ihr weitere Ideen haben freuen wir uns auch über Feature-Vorschläge unter http://jira.shopware.de/. Ich möchte Euch im folgenden einige Infos zu den Grid-Typen geben: Masonry Modus: Elemente sind fluide und verändern ihre Breite mit dem Viewport. An den entsprechenden Breakpoints / Device-Grenzen sortiert sich das Raster in kleinere Spalten um, damit der Content genügend Platz auf kleineren Geräten hat. Banner-Elemente verwenden einen sogenannte Cover Effekt um das Element in jeder Größe immer ansprechend auszufüllen. Resize Modus: Elemente behalten ihre Desktop Größen. Die gesamte Einkaufswelt skaliert in allen Maßen auf kleineren Viewports nach unten. Dies bietet sich besonders an, wenn eine Desktop Einkaufswelt auf den Tablet Viewports nur ein wenig kleiner skalieren soll. [quote]Banner wird vergrößert - “unscharfer” Matsch.[/quote] Ich denke hier musst Du einfach mal die Thumbnail Generierung starten. In Shopware 5 werden entsprechend neue Größen generiert. Du kannst zusätzlich die Generierung von Retina Versionen einschalten. In folgendem Post bekommst Du mehr Infos dazu: Thumbnail Generierung. Ich hoffe damit konnte ich Euch etwas weiterbringen. Sonnige Grüße, Euer Phil
Viel Text, nix neues - und obige Frage bleibt offen Moritz schrieb ja schon an einer anderen Stelle, dass man sich am Desktop orientiert kann, und das stimmt. Als Berechnungsgrundlage ist die Breite 1160px Leider wird das letzte (rechte) Element anders berechnet, als die Vorgänger. So: Und nun zur Elementbreite: Grundbreite =1160px / Spaltenanzahl Elementbreite = Grundbreite - Abstand letztes Element = Grundbreite Das letzte Element ist also um den “Abstand” breiter, als die vorherigen Elemente. Standard 4 Spalten mit 10 Abstand: 1160px / 4 = 290px Elemente 1 bis 3: 290px - 10px = 280px Element 4: 290px Bsp: eine Zelle 3 Spalten breit und danach eine einzelne Zelle: Z1: 280px*3 + 2*10px = 860px Z2: 290px Gegentest: 860px + 10px +290px = 1160px So, und das skaliert bei “Resize” bis ganz unten runter. Man kann sich dann aber überlegen, ob man für kleinere Viewports nicht selber kleinere Bilder - im gleichen Seitenverhältnis - erstellt. Wie sich eine verbundene Zelle verhält, wenn sie auch das letzte Element umfasst, müsste ich noch testen. Zeilenhöhe: Steht in den Einstellungen zum Setting - 185px im 4er 2 Zellen übereinander mit 10 Abstand: 185x2 + 10 = 380px Da stellt man sich die Frage, warum man so eine einfache Antwort nicht vom “Team” bekommen kann. :thumbdown: P.S.: Und da das letzte Element breiter ist, als die Vorgänger, muss man sich bei Masonry dann auch nicht mehr wundern, wenn die Breite zappelt Die “Demodaten” sind übrigens eher ein Beispiel dafür, wie man es besser nicht macht - zumindest für die Startseite.:quite: [Edit] Sollte ich mit meiner Berechnung richtig liegen, würde ich doch vorschlagen, ggf. die Berechnung der Elementbreite zu ändern auf: Normgröße 1160px Anzahl Elemente n Abstand a Breite = (1160 - (n-1)*a) / n Dann hätten wir bei 1160px und 4 Spalten JEDES Element (1160-30) / 4 = 1130 / 4 = 282,5px Breite [den krummen Pixel hätte ich schon bei 3 Spalten]
Hallo Carsten, vielen Dank für Deinen ausführlichen Test. Bezüglich der Größe des letzten Elementes in einer Zeile hast Du richtig gemessen. Dies ist ein Bug und wird in der 5.0.1 behoben. Ich habe bereits ein Ticket angelegt: http://jira.shopware.de/?ticket=SW-11278 Allerdings konnte ich dies nur im Resize Modus nachstellen, aber nicht im Masonry Modus. Beim Masonry Modus haben die Spalten bereits eine einheitliche Breite. Natürlich sind die Elemente hier komplett fluide. Grundsätzlich stimmt die Formel: Element-Breite = (Container-Breite - (Spalten - 1) * Abstand) / Spalten Die Höhe der Zeilen kann in den Raster-Einstellungen selbst definiert werden, wodurch sich das Seitenverhältnis der Elemente ergibt. Ich muss allerdings noch einmal betonen, dass es bei einer Responsive Einkaufswelt nicht um die Berechnung statischer Pixel geht. Es macht wenig Sinn bei einem fluiden Layout das Lineal rauszuholen. [quote]Da stellt man sich die Frage, warum man so eine einfache Antwort nicht vom „Team“ bekommen kann. :thumbdown:[/quote] Wie gesagt, wir arbeiten bereits an einem Guide. Die „Formel“ zur Berechnung wollten wir Euch nicht vorenthalten, sondern Euch bewusst gar nicht erst auf diesen Weg führen. Schließlich sollt Ihr in Zukunft nicht mit dem Taschenrechner vor dem PC sitzen müssen. Stattdessen wollen wir Euch den Responsive Gedanken etwas näher bringen. [quote]Die „Demodaten“ sind übrigens eher ein Beispiel dafür, wie man es besser nicht macht - zumindest für die Startseite.:quite:[/quote] Die aktuell ausgelieferten „Demodaten“ enthalten nicht alle Inhalte. Daher sprach ich auch speziell vom Demoshop mit unseren neuen Storytelling Einkaufswelten. Hier noch einmal der Link: http://www.shopwaredemo.de Sonnige Grüße, Phil
[quote=“Philipp Schuch”] … Allerdings konnte ich dies nur im Resize Modus nachstellen, aber nicht im Masonry Modus. … [/quote] Um das Thema nochmals kurz anzuschneiden. Ich habe einen Shop im Testmodus der von Shopware 4 upgedatet wurde auf Shopware 5. Auf der Startseite ist ein bannerslider mit 4 Elementen. Alle 4 Elemente haben/hatten die Abmaße 998x545 px (so wie in Shopware 4 die Vorgabe war). Nun habe ich das ganze eingerichtet mit dem Masonry Modus. Bei mir werden nun bei den 998x545 px Bildern allerdings oben und unten jeweils etwas abgeschnitten, so dass die texte die bei Shopware 4 auf den Bildern lesbar waren nun nicht mehr sichtbar sind. Die Bilder sind ansonsten scharf und ok. Gehört dieses Verhalten auch zu dem genannten BUG? Oder ist das ein ganz anderes Problem?
Hallo, das Verhalten ist korrekt. Hier noch einmal die Beschreibung des Masonry Modus. Masonry Modus: Elemente sind fluide und verändern ihre Breite mit dem Viewport. An den entsprechenden Breakpoints / Device-Grenzen sortiert sich das Raster in kleinere Spalten um, damit der Content genügend Platz auf kleineren Geräten hat. Banner-Elemente verwenden einen sogenannte Cover Effekt um das Element in jeder Größe immer ansprechend auszufüllen. Sonnige Grüße, Phil
Hi, ok stimmt. Wenn ich das Browser Fenster schmaler mache, dann kommt auch der Text irgendwann zum Vorschein. Welchen Tipp würdest du nun Grafikdesignern geben die Elemente für einen Bannerslider erstellen wollen. Also das garantiert die wichtigen Inhalte immer sichtbar sind.
Hallo, bei einem fluiden Slider könnte man die Inhalte zentriert platzieren. Zum Beispiel wurde das hier im Demshop so gemacht: http://www.shopwaredemo.de/kochlust-und-provence/ Wir arbeiten bereits an weiteren coolen Ideen für Responsive Einkaufswelten. Wenn Ihr noch weitere Anregungen oder Ideen habt, freuen wir uns auf Euer Feedback. Sonnige Grüße, Phil
Ich glaube was in diesem Fall genial wäre, wäre eine Photoshop/InDesign Vorlage mit Hilfslinien für verschiedene Standardfälle. Z.B. Wird ja eine Desktopauflösung von 1920x1080 relativ häufig vorkommen. Wenn man nun beim erstellen in InDesign schon sehen kann das oben und unten ein paar Pixel wegfallen, wird man hier keinen Inhalt platzieren. Ich würde so eine Vorlage ja erstellen, aber da bräuchte ich ein paar Referenzwerte. Wie groß soll das Bild sein? 998x545 px? Wie viel wird davon bei der Standard Desktop Ansicht oben und unten abgeschnitten. Wie sieht das dann beim Tablet/Smartphone Hochkant und im Querformat aus?
ich hätte bei der Gelegenheit auch mal eine Frage, wahrscheinlich so ein typisches “den Wald vor lauter Bäumen nicht sehen”-Szenario 
Wie bekomme ich Einkaufswelten randlos in der Desktop-Ansicht ab 1260px? Ich habe zwei Varianten bislang ausprobiert, beide mit desaströsen Ergebnis: Korrektur der widgets/emotions/index.tpl Ich habe eine neue widgets/emotion/index.tpl vererbt, in dieser in Zeile 10 “{$baseWidth = 1160}” auf “{$baseWidth = 1260}” geändert. Ergebnis: Die Generierung der Einkaufswelt kommt völlig ins schleudern, so bekommen auch Banner, die über alle vier Spalten gehen, ein padding-left, generell wird überall aus padding-right padding-left, wodurch die ganze Einkaufswelt um die Breite des Elementabstandes nach rechts rutscht. Abhilfe schafft da nur das deaktivieren des Element-Abstandes, aber das ist keine Option. Anpassen per CSS (LESS) Mein zweiter Versuch war es, per .emotion–wrapper {max-width: 1260px !important;} den emotion-wrapper auf die Breite des Shops zu ziehen (wir erinnern uns: Im Standard wären es 1160px max-width). Das ganze klappt auch ganz wunderprächtig, aber der emotion–container bekommt nun ein Scaling von “scale(1.08620689655172, 1.08620689655172)”, dadurch passt es am Ende dann doch wieder nicht. Ergebnis: Obwohl der Banner-Slider optisch über die ganze Breite von 1260px geht, hat er nur berechnete Maße von 1160x380 und die Banner sind so vergrößert, dass sie gleichmäßig in alle Richtungen abgeschnitten sind. Was wäre eine elegante Lösung für dieses Problem? Wie habt ihr euch das Anpassen der Breiten der Einkaufswelten in der Desktop-Ansicht vorgestellt? Schon zwei unserer Kunden wollen den 50px Freiraum auf jeder Seite nicht.
[quote=“Philipp Schuch”] [quote]Banner wird vergrößert - “unscharfer” Matsch.[/quote] Ich denke hier musst Du einfach mal die Thumbnail Generierung starten. In Shopware 5 werden entsprechend neue Größen generiert. Du kannst zusätzlich die Generierung von Retina Versionen einschalten. In folgendem Post bekommst Du mehr Infos dazu: Thumbnail Generierung.[/quote] Schön zu wissen, nur leider hilft das in diesem fall nicht weiter. Es liegt nicht an der Qualität der Thumbnails, die ist in Ordnung. Vielmehr ist es so das bei einer HD auflösung zu kleine Thumbnails großgezogen werden. Ich habe eine Einkaufswelt mit 3 Spalten als links ein bild 2 Spalten breit und rechts eines 1 Spalte breit. Jetzt verwendet er für das linke ein 1280er Thumbnail und für das rechte ein 800er was leider nicht ausreichend ist wenn er über ein drittel des Bildes in der breite wegschneidet. das kann nur MATSCH werden. Wäre toll wenn man selbst auswählen könnte welches Thumbnail in den Einkaufswelten verwendet werden soll. lg BoS
Ich schließe mich mal denen an die sagen eine Mischung aus Masonry Modus und Resize wäre das optimale. Resize für den Slider, Masonry für den Rest. Das Conexco Responsive Template handelt das doch auch so. So taugt das nicht viel. Die Kunden denen ich einen Shop einrichte, die wollen keine “Stimmungsbilder”. Da soll ein Angebot rein. Und da es sich meist um den Metzger um die Ecke handelt ist da kein 5-Köpfiges Team, das 5 verschiedene Größen für die Slider-Elemente gestaltet. Da wird ein Foto vom Gehacktes gemacht, ein Text und ein Preis dazu und fertig. Komplizierter darf es nicht sein. Und reines Resize ist ja mehr 2005. Vieles ist toll in Version 5 aber da müsstet ihr noch mal ran für meinen Geschmack.
Mit den Bannern ist das wirklich nicht so fein gelöst momentan. Mal als Idee: was wäre, wenn Masonry und Resize nicht auf Einkaufsweltebene gelöst wird, sondern bei den einzelnen Elementen? Am besten dann mit Override auf Einkaufsweltebene, damit alles auf einmal geändert werden kann mit einem Klick bei Bedarf.