Response Template

[Sergej Stroh]

Vielleicht habe ich eine andere Vorstellung was ein Response Template ist aber die aktuelle Template-Version ist alles andere als Response. Es werden lediglich alle Container in %-Angaben formatiert. Das Template ist so nur halb fertig.

Das ist für mich response

* Umwandlung der Navigation-Elemente z.B. in ein Auswahlmenü (fehlt)
* Anordnung der Container, Boxen untereinander (nur teilweise gelöst)

Gruß
Sergej

 

[JayJayS]

AW: Response Template

Response-Template ?
Was soll das sein ?
Abgesehen davon kann ich dem gesamten Beitrag keine wirklichen Informationen oder Frage entnehmen...

 

[david]

AW: Response Template

Es geht um das Responsive Theme im JTL-Shop3 Tiny Template ab Version 3.17.
Wie der Name schon andeutet handelt es sich um ein Theme (kein komplett neues Template), d.h. die responsiven Elemente werden rein über CSS, genauer gesagt Media-Queries realisiert.

Dadurch sind natürlich gewisse Grenzen gesetzt - Umwandlung von Navigationsmenüs in ein anderes Auswahlmenü z.B. ließe sich z.B. schlecht via CSS sondern besser via JavaScript realisieren.

Wir haben uns absichtlich für ein responsives CSS-Theme entschieden, ohne extra-JavaScripts zum Standard JTL-Shop3-Tiny hinzuzufügen.
Über MediaQueries in der theme.css findet ihr für verschiedene Browserfenster-Breiten die entsprechenden Regeln.
So werden z.B. Sideboxes bei kleinen Auflösungen in den Footer verschoben, der Header ändert sich, Footer ändert sich, Artikeldetails-Darstellung ändert sich etc.

@Sergej: Hast du auch die Viewport-Angabe in den Template-Einstellungen auf 1:1 gesetzt? Dein Screenshot sieht ziemlich kaputt aus, so soll es nicht aussehen.
Teste vielleicht nochmal in unserem neuen Themenshop.

 

[JayJayS]

AW: Response Template

Das die neue Version raus ist, habe ich gerade erst gesehen...
Damit hat sich meine Frage bezüglich des Themes auch geklärt...

 

[Sergej Stroh]

AW: Response Template

Hallo David,

ja, Viewport-Angabe und Responsive-Theme waren gesetzt, fand deswegen die Darstellung etwas merkwürdig.

Gruß
Sergej

 

[giorgio]

AW: Response Template

... also unsere neue Seite http://www.desigs4home.de läuft auf dem ipad im Hochformat nach links und rechts raus
und das Logo ist kaum noch zu sehen.

Wir haben dann noch versucht die Seite von 1080px auf 1200px (page.css) zu erhöhen. Das wird gar nicht angenommen.

Wir haben am Template noch nichts verändert. Gibt es dafür ein Erklärung?

 

[buergi-ks]

AW: Response Template

Ich habe mal ein Beispiel für ein gutes responsiv Shop-Design rausgesucht:

royaldesign de

Einmal ausprobieren, so sollte man sich das wohl vorstellen können - die rechte Spalte mit den Angeboten wird dann einfach ausgeblendet.

 

[david]

AW: Response Template

Einmal ausprobieren, so sollte man sich das wohl vorstellen können - die rechte Spalte mit den Angeboten wird dann einfach ausgeblendet.

Ausblenden ist eine ziemlich simple aber auch schlechte Lösung, wenn in der Spalte wichtige Informationen stehen.

Schau dir an, wie es im JTL Themenshop 3.17 mit Responsive Theme funktioniert: Notebooks: Hier finden Sie alle Topmodelle zum unschlagbar günstigen
Hier wandern die Boxen aus dem Sidepanel in den Footer, wenn das Fenster kleiner als 768 px breit ist.

 

[giorgio]

AW: Response Template

Ich habe mal ein Beispiel für ein gutes responsiv Shop-Design rausgesucht:

royaldesign de

Einmal ausprobieren, so sollte man sich das wohl vorstellen können - die rechte Spalte mit den Angeboten wird dann einfach ausgeblendet.

Im ipad fehlt 1/3 der Seite da sogar im Querformat - wieder links und recht raus aus dem Bild!

 

[testjo]

AW: Response Template

Responsive 123 testen geht ziemlich einfach. ( nicht 100% Mobile)
Weil tested da auf Bildschirm PX, also.

Dan mit den FF webdeveloper extension dort >resize > und view responsive layouts

Beim royaldesign de muss man dan sehen dass einiges mit scripts lauft wen dass ausgeschalted ist lauft es nicht. weis die nicht so...
Auch die design4 lauft nicht so wie ich mir vorgesteld habe im die test.
jtl-software.de geht besser aber ist ja halt bootstrap, aber auch noch nicht 100% wen man die einfache test macht.
http://demoshop2.jtl-software.de/Notebooks anmelden und warenkorb icon laufen nicht immer richtig zusammen in dieser test
Passt auch die Columns nicht an nach weniger ( den Artikel notebooks) hmm schade.

HAbe selbst ein andere responsive shop(systeem) ins testing die nimmt wirklich den Resolution pix in dieser test an.

Wen die Hauptverkaufszeiten vorbei sind wage ich mich zum jtlshop update dauert aber noch bis Ende Merz oder anfang April.
Weil JTL shop nicht Lokal testen aufs eigene VPS geht ja nicht

 

[testjo]

AW: Response Template

... also unsere neue Seite http://www.desigs4home.de läuft auf dem ipad im Hochformat nach links und rechts raus
und das Logo ist kaum noch zu sehen.

Wir haben dann noch versucht die Seite von 1080px auf 1200px (page.css) zu erhöhen. Das wird gar nicht angenommen.

Wir haben am Template noch nichts verändert. Gibt es dafür ein Erklärung?

Weis nicht ob dieser noch Aktuel ist war vor den Responsive mal so

[h=2]Breite des Shops anpassen[/h]Bitte nutzen Sie für alle individuellen CSS-Anpassungen das benutzerdefinierte Theme, siehe auch Individuelle Theme Anpassung.
[h=3]Flexible Shop-Breite 100%[/h]
Für eine flexible Shop-Breite, bei der sich die Breite an die Fenstergröße anpasst lautet die CSS-Regel:

1 .page_width { width: 100%; }[h=3]Fixe Shop-Breite 980px[/h]
Für eine feste Pixel-Breite von 980px nutzen Sie bitte diese Regel:

1 .page_width { width: 980px; }
Mit 980px Breite lässt sich der Shop auch bei kleineren Auflösungen wie 1024x768 bedienen.

 

[Maverix]

AW: Response Template

David,

unsere Seite Wohndesign für Lebensräume - stilpunkt.wohnen sieht auf mobilen Geräten mit Viewport=Standard besser aus als mit Viewport=1:1
Genauer gesagt, haut es die Seite mit der Einstellung 1:1 komplett zusammen.

Andere Frage: Wie bekomme ich hier (Wohndesign für Lebensräume - stilpunkt.wohnen) beim Einsatz des Plugins Megamenu die headlinks Leiste weg ohne den Warenkorb zu verlieren?

Vielen Dank.

Grüße
Kai

 

[JayJayS]

AW: Response Template

@Maverix
In der Artikelansicht ist die linke Spalte komplett ausgeblendet. Ist das über die Template-Einstellung gelöst (welche ich diesbezüglich noch nicht gefunden haben...) oder wie hast du das gemacht. Der JTL-Demoshop-Electronic ist ja genauso. Im Testshop wird aber die linke Spalte permanent angezeigt und für eine rechte Spalte ist der Platz dafür immer "freigehalten"...

Nachtrag:
Die frage hat sich erübrigt ! Du nutzt ja das Mega-Menü und es gibt keine linke Navigations-Spalte mehr...

 

[Sergej Stroh]

AW: Response Template

Auch eine Mega-Menü lässt sich formatieren, es gibt viele Möglichkeiten. Schaut euch unser Demo- Shop an, Willkommen bei JTL-Demo Shop3!.

Gruß
Sergej

 

[3po]

AW: Response Template

@Maverix

Andere Frage: Wie bekomme ich hier (Wohndesign für Lebensräume - stilpunkt.wohnen) beim Einsatz des Plugins Megamenu die headlinks Leiste weg ohne den Warenkorb zu verlieren?

mit simplen "display: none" auf die li's und dem letzten "basket last" eben display: block in den media abschnitt deiner gewünschten Auflösung. An deiner Stelle würde ich aber das responsive wieder deaktivieren und erstmal optimieren, dein gesamter shop sieht zerschossen aus ab einer bestimmten auflösung, Blocks überlagern sich, megamenu stimmt nicht, logo im header, teaser im header, infoboxen am seitenende usw.

Ein wirklich funktionierendes responive theme ist keine sache von 5min, es ist mit viel anpassung und testing verbunden

 

[Maverix]

AW: Response Template

3po,

vielen Dank für Deinen Input.

Ich bin gerade am Testen und Optimieren.

Grüße Kai

 

[nmueller]

AW: Response Template

Wir haben uns absichtlich für ein responsives CSS-Theme entschieden, ohne extra-JavaScripts zum Standard JTL-Shop3-Tiny hinzuzufügen.
Über MediaQueries in der theme.css findet ihr für verschiedene Browserfenster-Breiten die entsprechenden Regeln.

MediaQueries werden unter IE9 nicht erkannt, da IE8 aber der letzte IE für das Betriebssystem XP ist sollte man das imho nicht ganz vernachlässigen. Wäre schön wenn Ihr das Thema noch in Eurer Templatedesign einfließen lasst. Auch wenn der Update-Support von XP im April 2014 ausläuft wird das Betriebssystem und somit der leidige IE8 sich wohl noch bisl halten.