Fit for mobile - CMS

Content-Management-Systeme für mobile Geräte fit machen

Die Bedeutung mobiler Geräte wächst unaufhaltsam und so gehört ein smartphone- und tabletfreundliches CMS immer mehr zum Pflichtenheft einer Webpräsenz.

  1. Content-Management-Systeme für mobile Geräte fit machen
  2. Mehr CMS notwendig
Content-Management-Systeme für mobile Geräte fit machen

© Internet Magazin

Content-Management-Systeme für mobile Geräte fit machen

Der Trend zum verstärkten Einsatz mobiler Geräte im Internet wächst ungebrochen. Die Kombination aus kleinem Formfaktor und leichtem Gewicht auf der einen Seite und die stetig wachsende Leistungsfähigkeit (es sind bereits QuadCore-Tablets angekündigt) auf der anderen haben dazu geführt, dass sich auch Tablets wie zuvor Smartphones vom bloßen Konsumgerät immer mehr zum multifunktionalen Arbeitswerkzeug entwickeln.Die Vorbereitung eines CMS für mobile User Agents gestaltet sich in der Praxis oft deutlich schwieriger, als es sich anhört. Zum einen muss sich das CMS-System auf die Besonderheiten des User Agents intelligent einstellen, zum anderen sollte man dem Benutzer die Möglichkeit offen lassen, auf seinem mobilen Mikrogerät die vollwertige Desktop-Version der Website zu besuchen.Von der Reduktion der Seitendimensionen, über die Bereitstellung touchfähiger Navigation und den Verzicht auf Flash bis hin zur Verwendung von optimierten Web Analytics Code sind die benötigten Anpassungen vergleichsweise umfassend und tiefgreifend. Bei manchen CMS genügt es, passende Erweiterungen einzurichten und ein mobiles Theme zu installieren; in anderen Fällen wiederum sind zumindest manuelle Anpassungen erforderlich.

Elastische Seitendimensionen

Es ist noch nicht lange her, dass nahezu alle Websites einen gemeinsamen Nenner hatten: eine Standardauflösung. Dieser Wert lag irgendwo zwischen 1024x768 und 1280x700 Pixeln. Heutzutage gibt es Bildschirme in allen nur erdenklichen Größen. Die Vielfalt reicht von iPhones (und teilweise sogar kleineren Telefonen) über 24-Zoll-All-in-one-Geräte und 30-Zoll-Highend-Displays bis hin zu 60-Zoll-HDTV-Fernsehern.

Mit dem Kindle Fire stellt Amazon den ersten cloudgestützten Browser namens Silk vor; das winzige Gerät erreicht somit Zugriffszeiten von 5 anstelle 100 Millisekunden und schließt auf zu den Desktop-Geräten.

© Internet Magazin

Mit dem Kindle Fire stellt Amazon den ersten cloudgestützten Browser namens Silk vor; das winzige Gerät erreicht somit Zugriffszeiten von 5 anstelle 100 Millisekunden und schließt auf zu den Desktop-Geräten.

Hier einen gemeinsamen Nenner bei Größe und Form finden zu wollen, ist ein sinnloses Unterfangen. Vielmehr sind heute flüssige Layouts gefragt, die auch auf den Ausrichtungswechsel des Displays und auf die geänderten Dimensionen des Viewports elegant reagieren.Um die wachsende Schar mobiler Endgeräte parallel zu den traditionellen Desktop- und Laptop-Computern zu unterstützen, ist ein Umdenken erforderlich. Die Dimensionen von Seitenelementen sollten, wann immer möglich, in elastischen Einheiten wie ems definiert werden. Gleiches betrifft die Textgröße.Diese Anpassung verbessert die Usability auf Displays wie denen mobiler Endgeräte. Bereits auf den kleinsten Tablets lässt sich die Desktop-Version einer Website im Großen und Ganzen recht komfortabel betrachten.Bestes Beispiel wäre hier das kürzlich vorgestellte Kindle Fire von Amazon. Mit seinem lediglich 7 Zoll großen Display liegt es von den Dimensionen her zwischen einem Smartphone und einem Tablet. Ein automatisches Umschalten zu einer mobilen Version der Site für Smartphones wäre jedoch in diesem Fall nicht angebracht.

Komfortable Navigation

Zusätzlich zu stets wachsenden ästhetischen Ansprüchen und Usability-Anforderungen gilt es neuerdings neben mausgesteuerten Benutzeroberflächen der Desktops und Laptops auch Touchscreens von Smartphones, Netbooks und Tablets zu berücksichtigen. Mit CSS3, Javascript und HTML5 steht ein gemeinsamer Unterbau für beide Arten zur Verfügung.Webdesigner waren lange gewohnt, Schaltflächen mit Hover-Zuständen zu versehen. So sehr das Konzept auf einer mausgesteuerten Oberfläche Sinn macht, auf einem Touchscreen ist es nicht hilfreich.Analoges gilt für klassische Drop-down-Menüs, auch diese haben auf Touchscreens aus Gründen der Usability ausgedient. Um die Navigation auf touchfähigen Geräten zugänglich zu machen, empfiehlt sich der Einsatz eines geeigneten Frameworks.Webdesigner müssen sicherstellen, dass Besucher eine Website einerseits mit Maus und Tastatur bedienen können, andererseits aber auch auf touchfähigen Mobilgeräten mit den Fingerspitzen komfortabel zu Recht kommen. Nicht zuletzt sollte die mobile Version einer Website auch den Kriterien der Barrierefreiheit entsprechen, damit die zugehörigen Inhalte auch über Screenreader zugänglich sind.

Zielgruppengerechte Inhalte

Um die knapp bemessene Fläche mobiler Displays effizient auszunutzen, müssen Überschriften, Bilder oder Videos und Fließtext anders gewichtet werden. Großer Wert wird auf die Lesbarkeit von Texten gelegt. Da viele mobile Mikrogeräte - vor allem auf Basis von iOS - kein Flash unterstützen, gilt es diesen Geräten alternative Inhalte bereitzustellen. Das besagt jedoch nicht, dass Sie auf Flash verzichten sollten.Adobe Flash und AIR sind auf iOS-Geräten immer noch tabu, machen aber auf technisch gleichwertigen Android-OS-Geräten seit Flash Player 10.3 eine beeindruckend gute Figur. Mit dem GPU-beschleunigten Adobe Flash Player 11 und Adobe AIR 3 lässt sich sogar die Interaktion in höchster Geschwindigkeit programmieren. Dies zeigt aber, dass Flash und höchste Performance sich nicht ausschließen müssen sondern, im Gegenteil, moderne Flash- und AIR-Versionen auf mobilen Geräten höchste Performance bieten.Beim Zusammenstellen von Inhalten für die mobile Version einer Website sind Kreativität und Disziplin gefragt. Ein gutes Beispiel sind Softwaredownloads. Durch die Bereitstellung von Downloads für Desktop-Applikationen im Rahmen der mobilen Version einer Website würde man übers Ziel hinausschießen, da sich diese Daten auf einem Smartphone ohnehin nicht nutzen lassen. Es kann dagegen durchaus Sinn machen, dem Benutzer die betreffenden Downloads als Links per E-Mail zuzuschicken. Eine Ausnahme bilden HTML5-Apps, die auf mobilen Geräten laufen.Viele Anbieter von Webinhalten oder -diensten stellen inzwischen ihre HTML5- Apps auf der eigenen Website zum Download bereit; die einen, weil sie keinen Zugang zum Apple App Store erhalten konnten, die anderen weil sie nicht bereit waren, eine Gebühr in Höhe von 30 Prozent für In-App-Verkäufe an Apple zu zahlen und die Kundendaten an Apple zu verlieren.So umgehen diese Betreiber den Android- und den App Store und nehmen direkten Kontakt mit mobilen Nutzern ihrer Dienste oder Inhalte auf. Ein prominentes Beispiel für diese Strategie ist die Magazin-App der Financial Times.

Web Analytics für mobile Geräte

Mobile Kleingeräte verstehen unter Umständen nicht genügend Javascript, um mit serverseitigen Datenerfassungsskripten der Analytics-Software interagieren zu können. Dies betrifft sowohl Google Analytics als auch andere Lösungen mit Javascript-basiertem Tagging komprimierten Inhalten, darunter Adobe Omniture.Google bietet für die eigenen Analytics-Dienste serverseitige Skripte in PHP (ab Version 5.x), JSP, ASP.NET und Perl unter der Adresse code.google.com/mobile/analytics/ . Diesen Code installiert man auf allen Seiten, die mobile Webbesucher empfangen, entweder direkt in dem Code des betreffenden Themes oder mit Hilfe eines Plug-ins über die Plug-in-Schnittstelle des CMS.Darüber hinaus können Sie das Verhalten der Benutzer Ihrer HTML5-Apps für Mobilgeräte beobachten (solange Sie dabei die betreffende Person nicht identifizieren können). Hierzu können Sie Mobile Apps SDKs von Google für Ihre iOS- und Android-Apps nutzen: code.google.com/mobile/analytics/docs/ .

Datendurchsatz und Leistung

Smartphones sind mittlerweile so leistungsfähig wie vor Kurzem noch ein Desktop-Computer, sie werden jedoch generell von den niedrigeren Datenübertragungsraten der 3G-Funknetze ausgebremst. Eine lobenswerte Ausnahme stellt derzeit Kindle Fire mit Silk auf Basis der Split-Browser-Architektur von Amazon dar.Dank der Anbindung an Amazons Cloud-Dienste über die Split-Browser-Architektur verhält sich Amazon Silk von der Geschwindigkeit her auch in einem 3G-Netz wie ein Desktop-Browser mit einem Breitband-Zugang zum Internet.Beim Zugriff auf eine Website durch Silk auf einem Kindle Fire geht die Anfrage an ein Amazon-Datacenter aus; Amazons Supercomputer holen dann die benötigten Daten vom Webserver über Amazons Backbone, führen daran Anpassungen durch und liefern sie optimiert an das Kindle aus. So dauert jeder Zugriff im Durschnitt etwa 5 statt der sonst üblichen 100 Millisekunden.Innerhalb weniger Sekunden sind Amazons EC2-Dienste in der Lage, die Größe von Bildern, E-Books, PDFs oder Videos auf die Bedürfnisse des Kindle-Benutzers zuzuschneiden, kleine Dateien wie CSS-Stylesheets und Javascript-Skripte zusammenzufassen, zu minifizieren und zu "gzippen", um die Anzahl von HTTP-Anfragen und die erforderliche Bandbreite zu reduzieren. Das Resultat ist ein schneller Seitenaufbau auch beim Zugriff über Mobilfunk der dritten Generation.

Mobilfreundlichkeit im CMS

Etablierte CMS versuchen inzwischen mit mobilen Themes und optimierten Plug-ins dem Betreiber der Seite unter die Arme zu greifen. Benutzern von Joomla steht beispielsweise eine kostenlose Lösung namens Mobile Joomla mit Unterstützung für iPhone, Android, Blackberry und Nokia zur Verfügung (mobilejoomla.com ). Websites auf Basis von Wordpress können unter Verwendung eines optimierten Themes für mobile Geräte optimiert werden. Zu den besten Lösungen dieser Kategorie zählen jQuery Mobile, News Press Mobile, Carrington Mobile und iPhonesta Mobile Wordpress Theme sowie Wordpress Mobile Theme Pack.Mobile JoomlaAnbieter: mobilejoomla.com Kompatibilität: iPhone, Android, Blackberry, Nokia

wurfl.sourceforge.net Preis: kostenlos

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Ben Stiller Owen Wilson Zoolander Hansel
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im September mit Highlights wie "Zoolander 2", "Die Tribute von Panem – Mockingjay 2" und der neuen Staffel von "Mr.…