Mobile Web im Jahr 2015 – Schluss mit lustig - One schweiz auf topsoft

Mobile Web im Jahr 2015 – Schluss mit lustig

Das Jahr 2015 wird vermutlich als jenes Jahr in die Geschichte eingehen, in welchem das „Mobile Web“ von Spass auf Ernst schaltete. Vorbei sind die Zeiten, als man zu den Pionieren gehörte, wenn man eine mobil-optimierte Website oder eine Native App im Store anbot. Tempi passati genauso für alle, die nur so spasseshalber erste Gehversuche mit einer Responsive Website unternehmen. Nein: Spätestens seit April 2015, seit auch Google nicht-mobile-fähige Sites durch schlechteres Ranking abstraft, ist das Thema geschäftsrelevant. Lesen Sie hier mehr zu diesem Thema. Es drohen Umsatzeinbussen, eine schlechtere Reichweite im Netz und ein verstaubtes Image.

Mobiler Kontext

Spätestens jetzt beginnt die Phase, bei welcher man sich nicht mehr Gedanken zum „ob“, sondern vielmehr zum „wie“ machen muss. Es ist höchste Zeit, sich umgehend mit dem mobilen Kontext auseinanderzusetzen. Doch was ist genau gemeint mit „mobilem Kontext“? Bei „Mobile“ geht es nicht einzig um Geräte. Der mobile Kontext umfasst Gegebenheiten und Situationen des „Unterwegs-Sein“, welche die Anforderungen bestimmen – und zwar bezogen auf Usability, Layout und Inhalt. Der Benutzer will während einer kurzen Fahrt im Tram einen Tisch fürs Abendessen reservieren. Oder er stellt nach einem Ausflug im Park fest, dass er das Bahnticket für die Heimreise noch nicht bestellt hat. In beiden Situationen erschweren die Umstände den Weg zum Ziel: Das Tram wackelt, die Zeit drängt, wir müssen beim nächsten Halt aussteigen. Im Park scheint die Sonne direkt ins Display und der Handy-Empfang lässt zu wünschen übrig. Diese einfachen Beispiele zeigen bereits einige Aspekte, wie der Kontext die Anforderungen stark mitgestaltet.

Mobile First

In vielen Fällen hilft uns ein neues, aber bereits bewährtes Vorgehen namens „Mobile First“. Dieses Konzept zwingt uns, unser Bewusstsein auf den mobilen Kontext auszurichten und den Fokus auf den mobilen Benutzer zu legen. Die neue Website und Webapplikation werden zunächst für mobile Endgeräte entworfen. Somit berücksichtigen wir nur die wesentlichsten Elemente, wir beginnen insgesamt fokussierter zu entwickeln. Diese Reduktion betrifft Funktion und Inhalt. Erst später kommen die grösseren Ansichten hinzu, wobei vor allem die visuelle Darstellung verändert wird. Mobile First hat oft einen positiven Impact auf die Desktop-Variante, da diese aufgeräumt und prägnant erscheint. Richtig angewendet liegen die weiteren Vorteile auf der Hand: die Website weist durch die ressourcen-schonende Entwicklung kürzere Ladezeiten auf, die Texte wirken treffender, die Wege sind kürzer – Eigenschaften, die mehr und mehr auch von Desktop-Nutzern geschätzt werden.

Die vom Konzept geforderte Reduktion kann schmerzhaft sein – es drohen schwierige und langwierige Auseinandersetzungen um Wichtigkeit und Relevanz der eigenen Angebote. Das Mobile First Konzept beginnt also oft mit einer strategischen Selbstbetrachtung, d.h. Management und Stakeholder sind gefordert, sich ganz hinter dieses Vorgehen zu stellen. .

Do’s and don‘ts

Was sind die wichtigsten Aspekte, die wir bezüglich Usability und Inhalt beachten müssen? Ein entscheidender Faktor stellt die Bedienung mit dem Finger dar. Verwenden Sie deshalb grosse Schriften mit genügend Durchschuss im Text, grosse Buttons und grosse Links. Wir sind nun mal nicht so treffsicher mit dem Finger wie mit der Computermaus (denken Sie nochmals an die Fahrt im Tram). Grosse Schriften bedeutet automatisch weniger Platz für Text. Lange Texte müssen gekürzt, konkretisiert und strukturiert werden. Bieten Sie mehrere Möglichkeiten, um zum gleichen Ziel zu gelangen, indem Sie Bilder und Titel verlinken. Platzieren Sie wichtige Menu-Punkte nicht nur im Kopfbereich, sondern auch im Footer. Lassen Sie das Hamburger-Menu mitscrollen. Und bieten Sie Teilfunktionen, die einfach zu bedienen sind. Oft wird die E-Mail-Teilfunktion dazu verwenden, ein interessantes Angebot für die spätere Betrachtung sich selbst zu schicken. Platzieren Sie Ihre Telefon-Nummer prominent und sorgen Sie dafür, dass das Telefonat bei Klick auf die Nummer automatisch startet.

Wählen sie ein geeignetes Farbklima und lassen sie allenfalls den fancy Hintergrund hinter dem Text weg, um den Kontrast zu verbessern. Reduzieren Sie die Felder in ihren Formularen oder teilen sie diese in verschiedene einzelne Formulare auf, die zu unterschiedlichen Zeitpunkten ausgefüllt werden können. Und wichtig: Machen Sie sich Gedanken zur Ladezeit. Verwenden Sie leichtere Bilder und nutzen Sie die Möglichkeiten, Inhalte nur bei Bedarf nachzuladen (z.B. durch sog. Infinite scrolling). Nutzen Sie, wenn sinnvoll, auch die technischen Möglichkeiten der Endgeräte wie GPS, Sensoren, Kontakte etc.

Fazit

Das mobile Zeitalter hat längst begonnen. Auch in der Schweiz surfen laut Net-Metrix seit dem April 2015 mehr Leute mit mobilen Endgeräten als mit Desktop-Computern oder Notebooks auf den untersuchten Webseiten. Setzen Sie sich von Beginn an bei neuen Projekten mit dem Thema intensiv auseinander. Im Netz stehen viele gute Leitfäden zur Verfügung. Sollten Sie Unterstützung benötigen, stehen wir von semabit Ihnen sehr gerne zur Verfügung.

Am 3. September 2015 haben wir in unserem Referat bei der #onedigicomp Reihe die fünf wichtigsten Musts und drei Stolperfallen vorgestellt. Schauen Sie sich die Präsentation unten an:

Link zur Prezi von Marc Jenzer


Autor:

Bild Marc Jenzer

Marc Jenzer

Geschäftsleitung, Beratung, Projektleitung, Entwicklung bei semabit GmbH.

Kontakt: Tel. +41 44 435 30 02, E-Mail marc.jenzer[at]semabit.ch

semabit GmbH
Bodenäckerstrasse 3
8957 Spreitenbach