Was gibt es bei der Umstellung auf Responsive mit eigenen CSS zu beachten?

Bei dem Responsive-Update wurden einige Optimierungen durchgeführt, die evtl. zu Darstellungsfehlern führen können, wenn eigene CSS eingesetzt wurde, die inkompatibel zu Responsive Design sind. 

Wir haben hier die wichtigsten Infos zu den Änderungen an den Themes für dich bereitgestellt, mit denen du deinen Shop schnell überprüfen kannst.

Das Ausprobieren von Änderungen am Shopdesign kannst du nun auch auf unserem für dich bereitgestellten Testserver durchführen. Lies dir dazu den Beitrag Testserver für Responsive Einstellungen durch.

 

Shopbreite

Der Shop wurde für optimierte Darstellungen breiter gemacht. Hier kann es besonders mit abgestimmten Hintergrundbildern zu Anzeigeproblemen kommen.

Die entsprechenden Anpassungen siehst du in dieser Tabelle:

 

Window Size Alte Themes Responsive Themes
<768 px 980 px 100%
768-991 px 980 px 750 px
992-1199 px 980 px 970 px
>1199 px 980 px 1170 px

 

Auch bei Bildern mit festen Breiten kann es hier dazu kommen, dass Bilder entweder einen Rand haben, oder aus dem Shop rausrutschen. Hier ist es ratsam Bilder mit neuer Breite hochzuladen, die so breit sind, wie der neue Container. Vorteilhaft sind auch Bilder, die breiter sind.

Solltest du eigene Header und Footer benutzen, die nach der Umstellung auf Responsive umbrechen, solltest du überprüfen, ob du deinen div-Containern Werte für Breiten gegeben hast. Diese müsstest du entsprechend an die neuen Werte anpassen, damit diese an der richtigen Stelle umbrechen.

 

Feste Breite in Bildern, HTML- und CSS-Elementen

Im Zusammenhang mit der neuen Shopbreite, kann es zu unschönen Umbrüchen innerhalb von Elementen kommen, wen diesen feste Breiten zugeordnet wurden.

Die Tabelle Shopbreite weiter oben hilft dir dabei.

 

Break Points

Durch das Definieren von Breakpoints wird festgelegt, ab welcher Bildschirmgröße sich das Design einer Seite ändert. So kann man Elemente auf unterschiedlichen Endgeräten anders darstellen und/oder anordnen.

 

Name

Window Size

Gitter

Extra Small (XS)

< 768px (Mobile)

10px

Small (SM)

768px ⇔ 991px (Tablet)

16px

Medium (MD)

992px ⇔ 1199px (Desktop)

20px

Large (LG)

> 1199px (Large Desktop)

30px

 

Elemente nebeneinander platzieren

Solltest du mehrere Elemente in der responsiven Ansicht nebeneinander platzieren wollen, haben wir einige Beispiele für dich, anhand derer du dich orientieren kannst.

Du kannst die Beispielseite hier erreichen. Ziehe das Browserfenster kleiner um zu sehen, wie die einzelnen Elemente sich auf kleineren Geräten verhalten.

Reihe mit vier Spalten alte Themes

<!-- ALTES THEME -->

<div class="row">

   <div class="span4">

       <h3>Spalte 1 Überschrift</h3>

       <p>Text Spalte 1</p>

       <img src="http://www.link_zum_bild.de>

   </div>

   <div class="span4">

       <h3>Spalte 2 Überschrift</h3>

       <p>Text Spalte 2</p>

       <img src="http://www.link_zum_bild.de>

   </div>

   <div class="span4">

       <h3>Spalte 3 Überschrift</h3>

       <p>Text Spalte 3</p>

       <img src="http://www.link_zum_bild.de>

   </div>

   <div class="span4">

       <h3>Spalte 4 Überschrift</h3>

       <p>Text Spalte 4</p>

       <img src="http://www.link_zum_bild.de>

   </div>

</div>

 

Reihe mit vier Spalten Responsive Themes

 

<!-- RESP THEMES -->

<div class="row">

   <div class="col-md-3">

       <h3>Spalte 1 Überschrift</h3>

       <p>Text Spalte 1</p>

       <img src="http://www.link_zum_bild.de" class="img-responsive">

   </div>

   <div class="col-md-3">

       <h3>Spalte 2 Überschrift</h3>

       <p>Text Spalte 2</p>

       <img src="http://www.link_zum_bild.de" class="img-responsive">

   </div>

   <div class="col-md-3">

       <h3>Spalte 3 Überschrift</h3>

       <p>Text Spalte 3</p>

       <img src="http://www.link_zum_bild.de" class="img-responsive">

   </div>

   <div class="col-md-3">

       <h3>Spalte 4 Überschrift</h3>

       <p>Text Spalte 4</p>

       <img src="http://www.link_zum_bild.de" class="img-responsive">

   </div>

</div>

 

Eigene Klassen

Insbesondere, wenn eigene Klassen eingesetzt wurden, empfehlen wir zu überprüfen, ob das eingebaute CSS fehlerfrei funktioniert.

ArticleLoops

Die Anzahl der Artikel in ArticleLoops wurde in den nicht responsiven Themes durch die Einstellungen unter Expert>Design Optionen>Übersichtsseiten>Artikelbildgröße bestimmt. Die Größe der Bilder bestimmte auch die Breite der Artikel.

 

 

In den Responsive Themes ist die Anzeige nicht mehr von den Artikelbildgrößen abhängig, sondern von der Größe des Endgerätes.

Solange die Artikelbildgröße nicht auf individuell gestellt wurde gilt folgendes:

Die Anzahl der Artikel hängt davon ab, ob eine Sidebar vorhanden ist und von welchem Gerät der Shop aufgerufen wird.

 

Für die Ansicht auf kleineren Geräten mit Touchfunktion gibt es außerdem Einstellungen zur Scrollrichtung über die ArticleLoops unter Expert>DesignOptionen>Übersichtsseiten> Responsive/Mobile Einstellungen>Scrollen.

 

 

Für die Screensizes XS und SM kann hier gewählt werden, ob die Artikel gekachelt in Zweierreihen oder horizontal scrollbar in einer Reihe dargestellt werden sollen.

Artikeltexte werden in der Größe SM ausgeblendet.

Die ArticleLoops auf Start- und Artikeldetailseite zeigen – je nach Bildschirmgröße und Sidebar also 3-4 Artikel an.

Die ArticleLoops auf den Kategorie- und Suchergebnisseiten zeigen alle Artikel an, mit 3–4 Artikeln pro Reihe.

 

Übersicht:

Responsive Scrolling: Vertikal

Home/Detail

mit Sidebar

ohne Sidebar

XS

4

4

SM

4

3

MD

3

4

LG

3

4

 

Search/Categories

mit Sidebar (p. Reihe)

ohne Sidebar(p. Reihe)

XS

2

2

SM

3

3

MD

3

4

LG

3

4

 

Responsive Scrolling: Horizontal

Home/Detail

mit Sidebar

ohne Sidebar

XS

4

4

SM

4

4

MD

3

4

LG

3

4

 

Search/Categories

mit Sidebar (p. Reihe)

ohne Sidebar (p. Reihe)

XS

4

4

SM

4

4

MD

4

4

LG

4

4

 

Individuelle Bildgrößen


Neu ist auch, dass unter Expert>Design Optionen>Übersichtsseiten>Artikelbildgröße keine Bildhöhe/-breite angegeben werden kann/muss, da diese sich automatisch anpasst.

Lediglich die Anzahl der Artikel pro Reihe kann zwischen 2 und 6 gewählt werden.

 

Bilder responsive machen

Falls du deinen Shop auf Responsive geschaltet hast, kann es vorkommen, dass deine hochgeladenen Bilder nicht für Responsive angepasst sind. Wie das geht, erfährst du hier.

 

Eigene Slider

Wenn du statt unserer Trailer eigene Slider eingebunden hast, solltest du diese überprüfen. Insbesondere mit Flexslider in alten Ausführungen kann es zu Fehldarstellungen kommen.

 

Grid

Die alten Themes haben das Grid (Raster) der alten Boostrap Version (http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem).

 

Die Responsive Themes haben das aktuelle Boostrap Grid (http://getbootstrap.com/css/#grid).

Das Grundprinzip ist bei beiden Grids fast identisch: 

 

Altes Grid (16 Spalten):

container>row>span1–16

.span hat feste Breite in px, der umschließende Container eine Breite von 980px.

span16 ist volle Containerbreite, span8 ist halbe, span4 ein Viertel usw.

 

Neues Grid 12 (Spalten):

container>row>col-xs-1–12 col-sm-1–12 col-md-1–12 col-lg-1–12

.col hat eine in Prozent definierte Breite die sich der Breite des Containers anpasst und kann/sollte für alle Screengrößen definiert werden.

col-xx-12 ist volle Containerbreite, col-xx-6 ist halbe, col-xx-3 ein Viertel usw.

 

Wichtig für Kunden mit CSS:

Sollten eigene Inhalte (Header, Footer, eigene Startseite, etc.) die Klasse .spanXY nutzen, müssen diese an die neue Klasse col-ss-XY angepasst werden. Gleiches gilt für alle Elemente mit fixen Pixelbreiten/custom Klassen.

Spaltenbreite

Alte Themes

Responsive Themes

Ganze Breite

span16

col-xy-12

Halbe Breite

span8

col-xy-6

Drittel Breite

 -

col-xy-4

Viertel Breite

span4

col-xy-3

 

Um diese Änderungen außerhalb des LIVE-Betriebs durchführen zu können, haben wir ein Testsystem für dich aufgesetzt. Informationen dazu haben wir hier für dich bereitgestellt. 


SUPR Coach
Powered by Zendesk