Themen für mobile Endgeräte

Mobile Endgeräte mit kleinem Display sind auf dem Vormarsch und erzwingen entsprechende Techniken bei der Webdesign, die auf diesen Umstand Rücksicht nehmen. Hat man früher eine mobile Version einer Website nach der Desktop-Version erstellt, ist es heute genau umgekehrt.

Klassische Webseiten sind meist horizontal organisiert und nutzen die Bildschirmbreite eines Heim-PCs aus. Wir wissen alle, wie mühsam die auf einem Handy winzigen Bedienungselemente werden können und dass man beim Hin- und Herschieben des Inhalts rasch das Interesse an der Seite verlieren kann.

Folgende Konzepte unterstützen mobile Endgeräte:

  • Mobile Website
  • Apps und WebApps
  • Responsive Design
  • OnePage Layout

Mobile Website

Eine mobile Website ist eine zweite Version für mobile Endgeräte, die sich meist automatisch aktiviert, wenn die Desktop-Version von einem Handy aufgerufen wird. Beispiel: http://derstandard.at/ und die dazugehörige mobile Seite http://mobil.derstandard.at/

Bei einer mobilen Webseite muss man zwei Webseiten pflegen, wobei es wegen der Zweigleisigkeit Nachteil bei Suchmaschinen geben kann.

Apps und WebApps

Wir kennen alle die große Zahl der Apps, die manchmal eigenständige Programme sind aber in de meisten Fällen mit einer Webanwendung kommunizieren.  Sie bieten statt einer scrollbaren Webanwendung ein Frontend in Form einer Vollseitenanwendung an.

Und es gibt nicht nur Apps, die man aus dem jeweiligen Store downloaden kann sondern auch WebApps, die nicht im Store erhältlich sind und deren Adresse man auf den jeweiligen Webseiten erfährt. Eine Webapp wird im Browser aufgerufen, verhält sich aber aus ergonomischer Sicht nicht wie eine scrollbare Seite sondern wie eine Vollseiten-App.

Responsive Design

Die CSS-Technologie hat sich in den letzten Jahren enorm weiterentwickelt und es ist nunmehr möglich, dass derselbe StyleSheet sich dem jeweiligen Endgerät automatisch anpasst. Praktisch alle modernen Themen für WordPress sind „Responsive“.

Meine Bank, die ERSTE, bietet sowohl Apps als auch responsive Webs aber auch die klassische Webseite parallel an.

OnePage-Layout

Ein besonders für Handys attraktives Design ist das OnePage-Layout, das sich – nach meinem Eindruck –  besonders für kleinere Projekte eignet, kommt man doch dabei überhaupt ganz ohne ein Menü aus.

Die Seite verfügt zwar auch über ein Menü, kann also auch klassisch navigiert werden aber die Startseite stapelt die Seiten ausgewählter Menüpunkte auf einer Seite. Und damit man die Abschnitte auch optisch gut unterscheiden kann, werden die Texte von Ganzseitenbildern unterbrochen, wobei nach jeder Seite ein neues Bild gezeigt wird.

Das neueste WordPress-Thema „Twenty Seventeen“ verfügt über ein solches One-Page-Design. Wir haben eine Basis-Installation hier gespeichert:

Das Bild rechts zeigt den Verlauf der Bilder und Texte, wenn man nach untenscrollt bzw. wenn man am Handy mit dem Finger nach oben streicht. Die Textteile sind einzelne Seiten, in diesem Fall – weil es ein Demo ist – sind die Abschnitte nur ganz kurz.

Es gibt zwei Möglichkeiten ein solches OnePage-Layout herzustellen:  Über ein PlugIn oder über ein bereits dafür eingerichtetes Thema.

Mit einem PlugIn können auch bestehende Themen OnePage-fähig werden:

Das Universal-Thema Enfold

Wer hätte gedacht, dass das Thema des Jahres 2015 aus Wien kommt? Genauer aus der Burggasse 121, von „Kriesi Media“.

Ohne, dass ich selbst das OnePage Layout verwendet hätte, bekam ich eine Frage eines Clubmitglieds bezüglich eines solchen Layouts und dabei ist mir eben eingefallen, dass mein eigenes Thema Enfold das ja kann. Ich selbst verwende nur die Basis-Installation von Enfold (http://fiala.cc) aber man könnte zum flüssigen Lesen einige Schwesterseiten eines Kapitels zu einem OnePayge-Layout zusammenfassen. Vielleicht mache ich das einmal.

Wie vielgestaltig ein solches Thema sein kann, zeigt eine Liste aller Demos des Themas Enfold. Zu meiner Schande muss ich gestehen, dass ich auf diese Möglichkeiten allein durch die Grundinstallation nicht gekommen wäre, aber gerade dazu sind ja die Demos da.

Einige von diesen Demos sind als OnePager ausgeführt.

Und das besonders Praktische: man kann diese Demos so wie sie sind importieren und muss sie dann nur verändern.