Überall die optimale Ansicht
Immer mehr User nutzen den Zugang zum Internet über mobile Geräte wie iPhone, iPad oder ähnliche Geräte von anderen Herstellern. Es wird daher immer wichtiger dafür zu sorgen, dass die eigene Homepage auch auf solchen Geräten perfekt funktioniert und vernünftig aussieht. Mit page4 setzt du auf genau den richtigen Baukasten. Unsere neuen Designvorlagen bzw. alle mit dem Design-Editor erstellten Webseiten sind responsive. Auch die Inhalte deiner Webseite sind responsive. Was genau bedeutet das?
Ausführliche Informationen findest du zum Beispiel bei Wikipedia oder bei Google. Der Begriff Responsive Webdesign bedeutet im weitesten Sinne "reagierendes Webdesign". Damit ist gemeint, dass sich die Webseite an die Bildschirmauflösung anpasst. Grundsätzlich sind Webseiten schon seit Anbeginn responsive, also fliessend. In der Vergangenheit hat man die Probleme der Darstellung einer Homepage auf ein Smartphone dadurch gelöst, dass es zwei Versionen der Webseite gab. Eine für Desktop-Geräte und eine zweite für mobile Geräte. Einige Webbaukästen machen das heute noch so. Es ist zwar nicht so, dass es zwei verschiedene Inhalte gibt, die dann parallel gepflegt werden müssen, sondern lediglich zwei Gestaltungen ein und derselben Seite. Aber auch das erfordert immer zusätzliche Arbeit und man muss bei jeder Änderung der Desktop-Version schauen, dass die mobile Variante noch richtig darstellt. Wenn man die Seiten komplett selbst programmiert, besteht der Vorteil von zwei getrennten Designs darin, dass man die mobile Ansicht optimal auf die Besucher abstimmen kann.
Mit dem Aufkommen von responsiven Systemen übertrug man die Anpassung an die Umgebung auf den Sourcecode, indem man Weichen einbaute, die genau bestimmten, wann die Webseite auf eine andere Variante der Darstellung umschalten sollte. Während man bei selbst programmierten Webseiten diesen "doppelten" Code weiterhin pflegen muss, übernimmt ein Baukasten die gesamte Arbeit.
Bei page4 muss man lediglich im Design die Option "Mobile Ansicht" aktivieren und schon passt sich die Seite einem mobilen Gerät an. Software ist ein fortlaufender Prozess und auch page4 ist noch lange nicht fertig und wird das wohl auch nie werden. Aktuell ist es so, dass wir lediglich einen Umschaltpunkt haben. Sobald der Bildschirm eine Breite von 480 px erreicht hat (zum Beispiel ein iPhone im Hochformat) schaltet das System auf mobilen Modus um. Im Querformat wird im Moment weiterhin die normale Webseite angezeigt. Im ersten Halbjahr 2017 wollen wir diesen Bereich für Kunden umfangreich ausbauen und variable Umschaltpunkte einbauen, die man zusätzlich visuell anzeigen lassen und selbst anpassen kann.
Was muss man bei einer mobilen Ansicht berücksichtigen?
Mehrere Spalten
Mit page4 kannst du mehrspaltige Inhalte anlegen. Es ist verständlich, dass bei einem Bildschirm mit der Breite von 480 px mehrspaltige Inhalte extrem schlecht zu lesen sind. Daher schaltet das System die Spalten aus und platziert alle Inhalte untereinander, um sicher zu stellen, dass die Schriftgröße lesbar bleibt. Das ist beabsichtigt und normal.
Sidebars
Außerdem kannst du mit page4 auf der linken oder/und der rechten Seite deiner Webseite sogenannte Sidebars anlegen. Der Inhalt dieser Sidebars wird auf allen Seiten angezeigt und ist eigentlich ideal, um wichtige Inhalte, die immer sichtbar sind, zu platzieren. Der Nachteil ist, dass bei einer mobilen Ansicht kein Platz für eine Sidebar ist. Diese wird daher einfach ausgeblendet. Wenn du Wert darauf legst, dass wichtige Inhalte auch mobil sichtbar sind, dann nutze den Footer 1. Dort kannst du ganz normal Inhalte wie bei einer Sidebar anlegen und der Footer bleibt auch in der mobilen Ansicht sichtbar.
Inhalte auf dem Header
Du kannst im Design-Editor Texte, Bilder und eine Galerie auf den Header platzieren und zwar per Drag&Drop. Dabei werden diese Inhalt absolut platziert, also an einer bestimmten Stelle. Aktuell ist es so, dass diese Inhalte in der mobilen Version deaktiviert werden.
Inhalte auf der Seite selbst
Die meisten Inhalte passen sich automatisch an die Spaltenbreite an. Wenn die gesamte Breite der Seite verringert wird, dann werden auch alle Inhalte angepasst. Wenn du externen Code über den HTML Abschnitt einbaust, musst du darauf achten, dass dort keine festen Breiten definiert sind. Ansonsten kann sich der Inhalt nicht automatisch anpassen. Tabellen haben gewisse Beschränkungen. Eine Spalte kann nie kleiner werden als das längste Wort in dieser Spalte, da keine automatische Trennung möglich ist. Die Gesamtbreite einer Tabelle kann daher unter Umständen breiter sein als der verfügbare Bildschirm. In diesem Fall würde die Tabelle entweder über die Seite nach rechts laufen oder abgeschnitten werden. Diese technische Einschränkung kann man nicht umgehen. Auch lange Wörter in Überschriften können nicht umbrochen werden, wenn das einzelne Wort breiter ist als der Bildschirm.
Abgesehen von den genannten Ausnahmen und einigen wenigen Sonderfällen sollten sich alle Inhalte, soweit es technisch möglich ist, an die Gesamtbreite deiner Seite anpassen. Du musst lediglich den mobilen Modus angeschaltet haben. Den findest du direkt im Menü, wenn du den Design-Editor aufrufst.
Es gibt einige Elemente, die nicht auf allen mobilen Geräten funktionieren. Hast du noch eine Flash-Galerie in Gebrauch solltest du diese auf die neue Slideshow umstellen die ohne Flash funktioniert. Der Dateidownload benötigt zwar zum Hochladen der Datei noch Flash sollte aber im Mobilmodus funktionieren.
Die Navigation
Aktuell gibt es eine mobile Navigation die automatisch angezeigt wird, wenn die Bildschirmbreite 480 px oder kleiner ist. Diese lässt sich bequem auf mobilen Geräten bedienen. Du kannst allerdings das Aussehen der Navigation nicht selbst einstellen. Dass wird im Laufe des nächsten Jahres verfügbar sein.
Grundsätzlich solltest du darauf achten, dass deine Hauptnavigation nicht zu breit wird und zu viele Navigationspunkte hat. Wähle kurze, knackige Bezeichnungen und beschränke dich auf 5 bis 6 Hauptseiten und verschiebe alles andere auf die Unterseiten. Dann kannst du sicher sein, dass deine Seite auch auf mobilen Geräten im Querformat oder auf dem iPad - also auf Breiten über 480 px perfekt aussieht. Je größer die Schrift der Navigation ist und je mehr Platz du oben und unten einbaust, umso besser kann die Navigation auf einem mobilen Geräten bedient werden.
Das Thema "Responsive Webdesign" bleibt spannend und wird immer wichtiger. Wir wissen das und sind dabei page4 ständig zu verbessern und zu optimieren.
Bis demnächst
Manfred F. Schreyer