Websites für Mobilgeräte erstellen und optimieren

Mit der Verbreitung internetfähiger, mobiler Geräte wie Smartphones oder Tablets besuchen immer mehr Benutzer Websites mit kleinen Displays. Für die Entwickler stellt dies eine besondere Herausforderung dar. Die unterschiedlichen Auflösungen und Bildschirmgrößen waren in der Vergangenheit schon immer ein gewisses Problem. In der Anfangszeit des Internets wurden Websites zunächst meistens für eine Bildschirmauflösung von 800 x 600 Pixeln optimiert. Die Bildschirme und Auflösungen wurden größer, sodass man mit einer Auflösung von 1024 x 768 Pixeln oder höher die meisten Bildschirme abdeckte.

Mobile Geräte jedoch eine wesentlich geringere Bildschirmgrößen, z.B. 320 x 240 Pixel. Dazu kommt der Umstand, dass man Websites auf Mobilgeräten in Hoch- oder Querformat betrachten kann. Die Vielfalt der Bildschirmgrößen dürfte in Zukunft sogar weiter zunehmen, von sehr kleinen bis riesigen Größen. Die nächste einschneidende Entwicklung dürfte "Internet of Things" (Internet der Dinge) sein. Die Idee dahinter ist, allerlei Dinge des täglichen Lebens miteinander und mit dem Internet zu vernetzen. So ist es durchaus denkbar, dass z.B. ein Kühlschrank mit einem Mini-Display ausgestattet und mit dem Internet verbunden wird, damit man darüber Bestellungen über Online-Shops tätigen kann.

Es reicht nicht mehr aus, eine Website nur für eine bestimmte Auflösung zu optimieren und als Entwickler muss man Lösungen erarbeiten, mit denen eine Website auf möglichst allen Bildschirmgrößen ansehnlich aussieht und bedienbar ist. Nachfolgend ist eine Abbildung, in der beispielhaft dargestellt wird, wie man z.B. die Inhalte bei verschiedenen Bildschirmgrößen anordnen kann.

Websites für Mobilgeräte

Website-Techniken für Mobilgeräte

Entwickler setzen vor allem auf folgende Techniken, damit die Websites auch auf Mobilgeräten ansehnlich sind.

Responsive Webdesign

Der große Vorteil bei dieser Technik ist, dass man nur eine Website zu erstellen braucht. Die Darstellung auf unterschiedlichen Geräten wird über CSS und Media-Queries gesteuert. Dadurch kann z.B. erreicht werden, dass die Inhalte bei geringen Bildschirmbreiten nicht nebeneinander, sondern untereinander angeordnet werden. Unter Umstellung von Websites auf responsive Design werden einige Hinweise und Tipps zur Erstellung bzw. Umstellung erläutert.

Mobile Version einer Website

Manche Entwickler ziehen es vor, eine auf Mobilgeräte angepasste Version einer Website bereitzustellen. Diese sind dann über eine eigene Domain, häufig über eine Subdomain in der Form m.example.com, erreichbar. Der Vorteil bei dieser Variante ist, dass man die Website speziell auf die Bedürfnisse von Mobilgeräten anpassen kann. Beispielsweise braucht man aufgrund der Optimierung auf geringe Bildschirmgrößen keine großen Bilder einzubinden. Der große Nachteil bei mobilen Versionen ist, dass das im Grunde eigenständige Websites sind. Das bedeutet für die Redakteure, dass sie alle Inhalte doppelt einstellen müssen. Einmal für die normale und einmal für die mobile Version. Dadurch können sich leicht Fehler einschleichen. Außerdem können Links, die auf die Seiten gesetzt werden, mal auf die mobile und mal auf die normale Version führen.

Native Apps

Eine Website kann auch als native App erstellt werden. Das sind im Grunde kleine Programme, die die Benutzer herunterladen und installieren können. Der Vorteil bei dieser Variante ist, dass sie auch offline funktionieren. Nachteilig ist, dass man hierfür Kenntnisse in höheren Programmiersprachen wie z.B. Java benötigt.

Webapps

Wenn man die Website nicht als ein Programm bereitstellen möchte, diese jedoch wie ein Programm bedient werden soll, kann die Entwicklung eines Webapps vorteilhaft sein. Das sind im Grunde Websites, die jedoch mit den neuen Möglichkeiten von HTML5, CSS und JavaScript so aufbereitet werden, dass sie sich wie eine native App verhalten. Webapps werden zwar in einem Browser betrachtet und bedient. Jedoch werden einige Elemente wie z.B. die Adressleiste ausgeblendet. So erhält der Benutzer das Gefühl, eine App zu benutzen. Vorteilhaft hierbei ist, dass man das mit den Webtechnologien bewerkstelligen kann und keine Kenntnisse in höheren Programmiersprachen benötigt.