Mobile First – revisited


08.12.2016 von

https://www.iteratec.de/fileadmin/Bilder/News/iteratec_logo.png https://www.iteratec.de/fileadmin/Bilder/News/iteratec_logo.png iteratec GmbH

Als ich im letzten Jahrtausend angefangen habe, mich professionell mit Web-Applikationen zu befassen, lag der Schwerpunkt noch auf der Server-Seite. Die Browser waren noch ziemlich dumm und jede Interaktion mit dem Nutzer musste erst einmal zum Server geschickt werden. Die Browser waren – natürlich – auf dem Desktop. Die wenigen Mobiles haben höchstes WAP angeboten – eine Technik die inzwischen überholt ist und nirgends mehr unterstützt wird.

Die Webseiten waren dabei auf den zur Verfügung stehenden Platz ausgelegt. Was dabei zur Verfügung steht, hat sich im Laufe der Zeit allerdings auch immer wieder einmal geändert. Die Tendenz war allerdings immer mehr Platz vorauszusetzen, weil die verbreiteten Bildschirme immer größer wurden.

Responsive Design

Einen Einschnitt gab es dann, als die Browser immer mehr Funktionalität für die Darstellung der Webseiten angeboten haben. Zusätzlich waren die Mobiltelefone immer mehr in der Lage, solche Seiten ebenfalls darzustellen. Allerdings hatte sich der Platz auf dem Bildschirm dabei drastisch reduziert.

Der Effekt, den man beobachten konnte war, dass die „normale“ Webseite auf dem Mobiltelefon nicht mehr gut ausgesehen hat. Es wurde viel zu viel Platz vorausgesetzt und die Seiten mussten in alle Richtungen gescrollt werden. Das war auch eine Folge davon, dass gewisse Mindestauflösungen vorausgesetzt wurden – und diese zum Teil auch noch in Pixeln angegeben waren.

Um dem entgegenzuwirken ist das „Responsive Design“ aufgekommen. Die Darstellung passt sich dem zur Verfügung stehenden Platz an. Das heißt, man nehme ein Webseiten-Design und mache es flexibler:

  • Die Breite wird variabel in Prozent angegeben, anstatt Pixel zu verwenden.
  • Die Schriftgröße wird ebenfalls in Prozent angegeben, wobei das sich auf die vom Benutzer eingestellte Schriftgröße bezieht.
  • Die Anordnung der Elemente kann verändert werden, um den eventuell fehlenden Platz zu kompensieren.
  • Elemente werden ausgeblendet, um einen kleinen Bildschirm nicht zu überfrachten.

Mit diesen Mitteln war es dann halbwegs erträglich, Webseiten auf einem Mobiltelefon zu betrachten.

Mobile First

Zu dem Responsive Design kam dann ein neuer Trend, der Mobile-First-Ansatz. Die Idee dabei ist, die mobilen Endgeräte nicht als Nachgedanke durch weglassen zu berücksichtigen. Stattdessen wird das Webseiten-Design von Anfang an auf die mobilen Endgeräte zugeschnitten. Wenn etwas auf dem kleinen Bildschirm eines Mobiltelefons Platz findet, dann passt das garantiert auch auf Bildschirme, die bedeutend mehr Platz zur Verfügung stellen.

Mit dem Mobile-First-Ansatz wird automatisch auch ein anderes Problem gelöst, nämlich die Festlegung einer passenden Austeilung der Inhalte. Wenn man wenig Platz voraussetzt, dann ist die Tendenz zu überfrachteten Seiten deutlich geringer als bei einem großen Desktop-Bildschirm. Die Fokussierung auf eine Aussage pro Seite klappt damit einfacher. Und zudem ist das ein Stück zurück zu den Wurzeln von Hypertext-Markup, bei dem die Verlinkung im Vordergrund steht und nicht das endlose Hintereinanderreihen von immer mehr Aspekten.

Mobile First – weiter gedacht

Leider führt der Mobile-First-Ansatz unter anderen Umständen zu suboptimalen Webseiten. Die Seiten die danach entworfen wurden, enthalten meist eine sehr reduzierte Menge an Inhalten. Stattdessen machen sich großflächige Bilder breit. So ist es nicht ungewöhnlich, dass man im Desktop-Browser bei einer solchen Webseite erst einmal von einem Bildschirm füllenden Bild begrüßt wird – und wenn man Glück hat vielleicht noch von einer Überschrift.

Ein anderer Negativeffekt ist die Zeilenlänge. Aus dem Drucksatz haben wir gelernt, dass eine Zeilenlänge von 60 bis 70 Zeichen optimal für den Lesefluss ist. Damit bekommt das menschliche Auge den Zeilenrücklauf noch flüssig hin. Bei den überlangen Zeilen im Desktop-Browser macht das bemerkbar Probleme.

Das kehrt den historischen Zustand einer für den Desktop entworfenen Site, die auf dem Mobile nicht so recht passt, genau um. Ich habe dann immer den Eindruck, dass ich das Browser-Fenster ganz klein machen muss, um den Eindruck eines Mobiles zu emulieren. Das kann es doch auch nicht sein.

„Mobile First“ ist der richtige Ansatz. Aber er heißt eben „Mobile First“ und nicht „Mobile Only“. Die Konsequenz, die ich daraus ziehe ist, dass „Mobile First“ nur der Anfang sein kann. Auch dieser Ansatz liefert schlechte Ergebnisse, wenn er nicht zu Ende gedacht wird. Nach der Betrachtung von mobilen Endgeräten muss auch eine Betrachtung von Browsern mit viel Platz auf dem Bildschirm erfolgen. Nur so kann man der Überfrachtung, wie auch der Gigantomanie der Bilder vorbeugen.

Technisch gesehen ist es heute kein Problem, über eine Endgeräte-Erkennung genau festzustellen, für welches Ausgabeformat eine Seite gerendert werden soll. Diese Information sollte man auch auswerten, um für das jeweilige Endgerät eine wirklich passende Seite zu produzieren.

Diesen Aufwand kann man sich sparen, wenn ein Endgerät bewusst vernachlässigt werden kann. Das ist beispielsweise der Fall, wenn der Zielnutzerkreis mit einer großen Mehrheit nur per Mobile oder per Desktop-Browser zugreift. In allen anderen Fällen heißt die Devise

Mobile First und Desktop next


Dieser Blog-Artikel steht under der Lizenz CC-BY-SA 4.0.

 

 

Diesen Artikel bewerten
 
 
 
 
 
 
 
0 Bewertungen (0 %)
Bewerten
 
 
 
 
 
 
1
5
0
 

Artikel im Warenkorb:

0