Templates richtig responsive machen

Die meisten Zugriffe auf Websites passieren mittlerweile von einem mobilen Endgerät wie einem Smartphone oder Tablet aus. Diese Geräte haben einen kleineren Bildschirm und somit eine kleinere Auflösung, was zur Folge hat, dass der Platz weniger wird, je kleiner der Bildschirm ist. Deshalb ist es wichtig, dass deine Webseite auch auf kleineren Auflösungen funktioniert und gut dargestellt wird. Die Technik, mit der man dies bewerkstelligt, nennt man Responsive Webdesign.

Das verwendete CSS-Framework Bootstrap 3 und alle Chimpify Designs sind von Haus aus responsive gestaltet und sorgen dafür, dass die Darstellung aller Elemente bereits in allen Auflösungen optimal ist. Du musst also in den meisten Fällen nichts oder nicht viel anpassen. 

Wenn du eigene Einstellungen vornimmst, die Schriftgröße oder Elemente so veränderst, dass sie auf kleineren Bildschirmen nicht sofort optimal aussehen, musst du noch einmal Hand anlegen und einige wenige Veränderungen vornehmen.

Generell gilt: Je weniger du mit festen Pixelangaben bei Breiten und Höhen der Elemente arbeitest, desto besser. Versuche stattdessen mit Angaben in Prozent zu arbeiten oder arbeite mit den Standardwerten, sofern dies möglich ist.

Um deine Webseite responsive zu gestalten, kannst du im Builder die Arbeitsfläche auf die vier verschiedenen Geräte Desktop, Tablet Portrait, Phone Landscape und Phone Portrait einstellen und für die jeweilige Auflösung Anpassungen an den Styles vornehmen. 

Wichtig ist hier, dass du dabei nur die Styles, nicht die Inhalte veränderst! Die Anpassungen, die du hier vornimmst, gelten für die ausgewählte Auflösung sowie für alle kleineren Auflösungen.

Wenn das Aussehen deiner Webseite in der größten Auflösung auf dem Desktop passt, beginne mit der nächst kleineren Auflösung, dem Tablet Portrait. Hier prüfst du dein aktuelles Template von oben nach unten. Wenn die Überschrift über den Bildschirm hinaus geht, verändere die Schriftgröße und ggfl. den Zeichenabstand und die Zeilenhöhe. Ragt die Schrift dennoch über den Bildschirm hinaus, kannst du mit der Option "Umbruch im Wort" unter "Sonstiges" erreichen, dass Wörter auch innerhalb eines Wortes umgebrochen werden.

Auf kleineren Bildschirmen ist es wichtig, das der Inhalt breit genug und gut lesbar ist. Verändere je nach Bedarf den Innenabstand bei Elementen, die einen zu großen Rand links oder rechts haben und passe die Schriftgröße an. 

Ist ein Bereich oder ein anderes Element zu groß und geht über den Bildschirmrand, prüfe, ob die maximale Breite des Elementes auf "100%" steht. Damit erreichst du, das das Element maximal so breit dargestellt wird, wie das Browserfenster groß ist. Hilft dies nicht, prüfe die maximale Breite aller anderen Elemente innerhalb des Elementes. So arbeitest du dich von oben nach unten in deinem Template durch.

Ist die Darstellung des Templates in Ordnung, machst du mit der nächst kleineren Auflösung weiter und passt die Elemente an, die hier nicht passen. So gehst du mit jeder Auflösung vor, bis du die kleinste, das Smartphone Portrait, erreicht hast. Wichtig hierbei zu wissen ist, das alle Änderungen, die du in einer Auflösung vornimmst, auch in allen kleineren Auflösungen angewendet werden, umgekehrt in allen größeren Auflösungen aber nicht.

Zusammengefasst, musst du also folgende Arbeitsschritte durchführen:

  • Generell so wenig wie möglich mit festen Pixelangaben für Breiten und Höhen arbeiten
  • Alle Auflösungen von links nach rechts prüfen und die Styles anpassen
  • Templates von oben nach unten und Elemente von außen nach innen in der Baumstruktur prüfen und bearbeiten
  • Breiten, Höhen, Schriftgrößen und Abstände anpassen, falls nötig
  • Bei Problemen prüfen, ob die maximale Breite auf "100%" steht
© 2012-2018 by Chimpify UG (haftungsbeschränkt)