Responsive Grid Überlegungen

Indem Sie im Grid-Modus das Feature Responsive Grid aktivieren, wird Ihre Webseite auf mobilen Geräten wesentlich besser dargestellt. Wenn Ihnen diese Mobilität Ihrer Besucher allerdings am Herzen liegt, sollten Sie folgende Dinge berücksichtigen.

Block Anordnung

Wenn eine Headway-Seite auf kleinen Bildschirmen betrachtet wird, werden Blöcke in ihrer üblichen links-nach-rechts-Reihenfolge übereinander angeordnet. Das bedeutet, alle eventuellen Seitenleisten links neben Ihrem Content-Block werden auf Mobilgeräten über Ihren Inhalten erscheinen. Es ist nicht gerade optimal für Ihre mobilen Besucher, erst an Ihren Widgets vorbei scrollen zu müssen, bevor sie zum eigentlichen Inhalt kommen.

Wenn Sie also im Grid-Modus Ihre Blöcke anordnen, behalten Sie die Mobilgeräte im Hinterkopf. Wenn Ihr Design (oder Ihr Client) eine Seitenleiste links vom Inhalt erfordert, sollten Sie für diesen linken Block das Responsive Block Hiding aktivieren, damit diese auf Mobilgeräten nicht erscheint (achten Sie dann nur darauf, dass nichts besonders Wichtiges in dieser verborgenen Seitenleiste steckt).

Responsive Navigation und Suche

Für den Block Navigation enthält die Optionsleiste einen Unterreiter namens Responsiveness. Die Option Responsive Select zu aktivieren, verändert den Navigationsblock von einer Reihe an Links in ein modales Dialogmenü. Wenn Ihr Menü nur drei oder vier Punkte enthält, sollte es nicht weiter problematisch sein, diese Einstellung ausgeschaltet zu lassen. Für ein Menü mit zahlreichen Punkten allerdings – und insbesondere, wenn Ihr Menü über dem Hauptinhalt der Seite liegt – kann es sich lohnen, diese Option zu aktivieren, um weniger scrollen zu müssen.

Falls Sie zudem ein Suchfeld in Ihrem Navigationsblock haben, wird es nicht erscheinen, wenn Responsive Select aktiviert ist. In diesem Fall sollten Sie Ihr Suchfeld in einem eigenem angepassten Code-Block haben.

Medienanfragen von Mobilgeräten

Wenn Sie mit Medienanfragen von Mobilgeräten vertraut sind, können Sie Headways Seitendarstellung für Mobilgeräte anpassen und per Live CSS Editor auch Medienanfragen erlauben. Es empfiehlt sich allerdings nicht, zu umfangreiche Seitenanpassungen mit dieser Methode vorzunehmen, denn ein Mobilgerät muss dann all diesen zusätzlichen Code herunterladen.

Dieser Artikel wurde zuletzt für Headway Version 3.6.3 aktualisiert.

Letztes Update: 11. Mai 2014