„Mobile first“!?

„Mobile first“ ist die Zukunft der Web-Entwicklung. Das wird uns bereits seit einigen Jahren prophezeit und dieser Ansatz scheint heutzutage bei modernen Webseiten nicht mehr wegzudenken zu sein…

Offenbar hat uns die Zukunft aufgrund der wachsenden Marktdurchdringung mobiler Endgeräte früher eingeholt als erwartet! Im Folgenden wird erläutert, was das ominöse Schlagwort „Mobile first“ eigentlich bedeutet, wie man damit umgehen soll und welche Lösungsansätze es gibt.

Warum muss eine Webseite für die mobile Nutzung vorbereitet werden?

MobileDesktop
Displayklein, Quer- oder Hochformatgroß, Querformat
Pixeldichte (DPI)hochgering
BedienungFinger, SpracheMaus, Tastatur
Breitband-Verbindunglangsamschnell
CPUlangsamschnell
Stromversorgungbegrenzt (Akku)unbegrenzt (Stromnetz)
Browserunzählige Browser- und OS-Versionenin etwa 4-5 relevante Browser-Versionen
Flash®nein, danke!ja, bitte!

Ausnahmen bestätigen die Regel, aber dennoch zeigt sich, dass die Unterschiede zwischen den beiden Umgebungen nicht größer sein könnten. Was kann also unternommen werden, um eine Konvergenz herzustellen? Profitieren Desktop User eventuell auch vom „Mobile first“ Prinzip? Kann man eine bestehende Webseite einfach so anpassen?

Beim Aufkommen der ersten Smartphones hat man zusätzlich zur bestehenden Webseite, die gänzlich auf den Desktop abgestimmt war, eine neue mobile Webseite mit in der Regel neuem Design und weniger Inhalten erstellt, um auch die mobilen Endbenutzer zu bedienen. Leider ist dieser Ansatz im Sinne einer einfachen Wartbarkeit nicht sehr praktikabel und meistens leidet auch die Corporate Identity darunter. Heutzutage versucht man bei der Entwicklung darauf zu achten, beide Welten mit einem anpassungsfähigen System zu bedienen.

Wenn man den „Mobile first“ Ansatz in den Arbeitsprozess einer Website einordnet, müsste dies bereits in der Konzeptions-Phase geschehen, weil ein nachträgliches Adaptieren für eine mobile Nutzung nur mit erhöhtem Mehr-Aufwand möglich ist.

Grundsätzlich sollte im Zweifelsfall das Design und die Entwicklung auf das mobile System abgestimmt sein, weil Desktop-Systeme mobil optimierte Inhalte ohne Probleme darstellen können – umgekehrt ist das ohne Einschränkungen der Usability schwieriger. Ein weiterer Grund ist, dass alle mobilen Betriebssysteme auch verstärkt auf moderne Technologien wie HTML5 und CSS3 setzen und die Hardware darauf abgestimmt wird. Und wenn man es ganz pragmatisch betrachtet, liegt in der mobilen Nutzung auch das Wachstum und man erreicht mittlerweile mehr Publikum.

Mobile first: Optimierungen für spezielle Displays

Wann haben Sie das letzte Mal eine Werbung für PCs oder im speziellen für Desktop-Bildschirme gesehen? Medien berichten eigentlich nur über sinkende PC-Absatzzahlen und die neue mobile Revolution.

Der Entwicklungsstand von klassischen Computern ist, mit ein paar Ausnahmen, seit Jahren stehen geblieben, weil die Hersteller unter enormem Kostendruck stehen und sich außerdem auf das aufstrebende Geschäft mit Smartphones konzentriert haben.
Gerade beim Bildschirm kommt der technologische Unterschied am deutlichsten zur Geltung. Mobile Displays, zu denen auch die Tablet-Bildschirme gezählt werden, wurden schärfer, erhielten kräftigere Farben und wurden endlich mit höherer Pixeldichte ausgestattet. Kurz: die Bildqualität hat jene der Desktops innerhalb von ein paar Jahren überflügelt und somit ein völlig neues Surf-Erlebnis ermöglicht. Nachdem die mobilen Devices auch noch handlicher, leichter und günstiger wurden – cool waren Handys, Smartphones und Tablets ja schon immer – war der Trend nicht mehr aufzuhalten.

Für Entwickler bedeutet dies, dass, nachdem es klassische Computer denoch immer parallel zu mobilen Geräten geben wird, man zwei Welten miteinander verbinden muss. Ein Lösungsansatz dafür lautet „Responsive“ bzw. „Adaptive“ Design.

Durch CSS Media queries kann der Viewport einer Webseite angepasst werden und somit der Content gezielt für unterschiedliche Ausgabegrößen aufbereitet werden. Der große Vorteil für den Kunden ist, dass nur mehr ein System gewartet werden muss. Bei der Web-Entwicklung steigen jedoch die Implementierungs- und vor allem Test-Aufwände.

http://mediaqueri.es – Inspirationen für Responsive Design

Mobile first: Neues Handling

Auch die unterschiedlichen Eingabemöglichkeiten und die neuen Bedienungsansätze bei kapazitiven Touchscreens durch den Finger (Klick, Scroll, Touch, Swipe) müssen beim Design einer Webseite bedacht werden.

Buttons sollten beispielsweise größer gestaltet werden und die Abstände zwischen den Textabschnitten sollten erhöht werden um den kleinen Bildschirm nicht zu überfüllen. Außerdem ist es sinnvoll, alle Elemente „fluid“ anzulegen, damit möglichst die gesamte Bildschirmbreite ausgefüllt wird und somit die Darstellung verbessert wird.

Mobile first: Optimierungen des Contents

Da es stundenlanges Surfen beim Smartphone in der Regel nicht gibt (begrenzte Stromversorgung, mangelnder Surf-Komfort, User sind meistens unterwegs und kurz angebunden und müssen die richtigen Informationen rasch finden etc.) muss der Content auf modernen Webseiten neu aufbereitet werden, ohne den Informationsgehalt zu verlieren.

Noch vor ein paar Jahren war das Ziel, möglichst viel Text auf einer Webseite zu platzieren. Zu viel Content kann jedoch abschreckend wirken und deshalb geht man heute eher nach den Mottos „weniger ist mehr“ oder „1 Bild sagt mehr als 1000 Worte“ vor und blendet weitere Details nur bei Bedarf ein bzw. lässt den User entscheiden, welche Informationen relevant sind und näher betrachtet werden sollen.

Web „browsen“ erhält wieder die ursprüngliche Bedeutung.

Mobile first: Optimierungen der statischen Dateien

Durch den Einsatz von Vektorgrafiken bzw. Webfonts können Bilder und Icons verlustfrei skaliert werden. Dies resultiert in besserer Darstellungsqualität, die vor allem bei mobilen Devices und hochauflösenden Displays zur Geltung kommt.

www.w3.org/Graphics/SVG – Informationen zu Scalable Vector Graphics (SVG)

icomoon.io – Icon Fonts selber erstellen

Obwohl es derzeit einen Trend in Richtung „Flat Design“ ohne viel Schnick-Schnack gibt, können native CSS3-Effekte den Einsatz von grafischen Bild-Elementen einschränken und somit die Ladezeit verringern.

www.css3maker.com – CSS3 Generator

Mobile first: Erhöhung der Übertragungsrate

Durch das Zusammenfassen gleicher Dateitypen in eine Datei und durch das Komprimieren statischer Dateien (CSS, Javascript, Bilder, HTML) mit gleichzeitiger Nutzung des Browser-Caches, kann die Geschwindigkeit der Webseite signifikant erhöht werden. Zudem hilft man dem End-User dabei, die gerade beim mobilen Surfen kostbaren Breitband-Ressourcen zu sparen.

Im Folgenden sind Tools zusammengefasst, die zum einen bei der technischen Analyse helfen können und zum anderen Dateien ohne Qualitätseinbußen komprimieren können.

Analyse-Tools

https://developers.google.com/speed/pagespeed/insights

http://developer.yahoo.com/yslow

Serverseitige Komprimierung und Aktivierung des Caches

https://gist.github.com/mauryaratan/2627841

Tools und Software zur Minimierung der Dateigröße

http://closure-compiler.appspot.com/home – Javascript minimieren und zugleich Warnmeldungen bzw. Fehler aufdecken

http://draeton.github.io/stitches – Image Sprite erstellen

http://pnggauntlet.com (Win, Mac, Linux) oder http://pngmini.com (Mac) evt. in Kombination mit http://imageoptim.com (Mac) – PNGs optimieren

Die Zukunft hat gerade erst begonnen!

  • Simplifying und Reduktion zum Wesentlichen
  • Sprachsteuerung
  • Automatisierungen
  • Cloud Computing
  • Outsourcing an Spezialisten
  • Mobility
  • etc.

Erste Zukunftstrends zeichnen sich bereits ab, aber mit dem Launch einer komplett neuen Technologie, Google Glass, steht bereits der nächste interaktive Bedienansatz in den Startlöchern, der bisher nie dagewesene Möglichkeiten bietet.

Wie man sieht, dreht sich die (IT-)Welt in enormem Tempo weiter und es gibt keinen Wirtschaftszweig, der davon nicht berührt wird. Gerade in der heutigen Zeit ist es unumgänglich, die digitale Strategie zu überdenken, um am Ball zu bleiben.

Landkind/Stadtkind. Stepping out of my comfort zone. Trying out ideas. Learning from it. Doing good work with good people.