Responsive Webdesign

Es ist wichtig, dass Sie für jede angelegte Page zuerst ein Rasterelement erstellen und darin dann die Inhaltselemente angeben.

Weshalb? Damit bei einer Änderung der Rasterelemente bspw. aufgrund von Änderungen im Corporate Design, der Aufbau und die Struktur Ihrer Inhalte erhalten bleibt. Das heisst die Rasterelemente sind dem Responsive Webdesign unterworfen und deshalb wichtig für dessen Funktionalität.

Link zur Anleitung: Rasterelemente (Seitenlayouts)

Responsive Design im View Modul überprüfen

Responsive Design im View Modul überprüfen

Mit dem Zuwachs an Endgeräten (Mobile Phones, Tablets, Fernseher, etc.) und deren verschiedenen Bildschirmdimensionen und Auflösungen, kam es zur Entwicklung des Responsive Webdesign. Grob gesagt erstellt man nur einen Webauftritt, welcher auf Endgeräten mit einem kleineren Bildschirm und kleinerer Auflösung trotzdem sinnvoll dargestellt wird. Es wäre zum Beispiel unsinnig Bilder und Schrift (Text) einfach immer kleiner zu machen, da dann der Nutzer irgendwann auf seinem Endgerät den Webauftritt gar nicht mehr lesen kann. Daher werden andere Mechanismen genutzt: Textspalten werden untereinander statt nebeneinader dargestellt, Bilder werden verkleinert oder ganz weggelassen, Menüeinträge werden als Dropdown anstatt nebeneinander dargestellt.

Die Rasterelemente von easyWeb standard sind so aufgebaut, dass auf die veränderten Platzverhältnisse auf verschiedenen Endgeräten eingegangen wird. Sie können dies selbst nachvollziehen indem Sie im easyWeb Backend das Modul View aus der Modulübersicht wählen (Schritt 1). Nun können Sie aus dem Seitenbaum eine Page Ihres Webauftritts wählen (Schritt 2). Diese wird nun rechts in Ihrem Browser im Backend angezeigt. Im Dropdown Width können Sie zwischen üblichen Bildschirmbreiten (in Pixeln angegeben) wählen (Schritt 3). Auto Size nutzt die ganze verfügbare Breite Ihres Bildschirms aus. Über die Anfasser rechts, unten und an der rechten Ecke am Viewport, können Sie eine beliebige Breite und Höhe einstellen. 

Alternativ dürfen Sie natürlich Ihren Webauftritt auf dem PC oder Mac im Browser Ihrer Wahl betrachten und dann langsam die Breite des Fensters verkleinern. Dabei werden Sie feststellen, dass die Elemente Ihre Position oder Darstellung verändern. Beispielsweise beim 1/3 – 2/3 Rasterelement: Hier kommt die rechte Spalte unter die linke zum liegen.

Fazit: Beim Responsive Webdesign ändert sich das Layout je nach verfügbarem Platz!

Beispiel

In der folgenden Photo Gallerie sehen Sie wie ein und die selbe Page in verschiedenen Endgeräten aussehen wird.

Die Website auf einem grossen Bildschirm.

Die Website auf einem grossen Bildschirm.