Geschäftsführer, Webdesigner & Web-Entwickler, staatlich geprüfter Mediengestalter
Was bedeutet eigentlich mobile first? Wenn man sich mit modernem Webdesign und Responsive Design beschäftigt, führt kein Weg an diesem Begriff vorbei. Doch was ist das? Kurz gesagt, handelt es sich bei dem „mobile first“-Ansatz um ein Konzept, eine Webseite oder einen Onlineshop ausgehend von der mobilen Darstellung zu realisieren. Immerhin ist die mobile Darstellung einer Webseite wichtiger als die Desktop-Variante — zumindest, wenn man von der Entwicklung des Mobile Traffic Marktanteils ausgeht.
Viele Jahre lang wurden beim Design von Websites ausschließlich die Bildschirmgrößen von Desktop-Geräten berücksichtigt. Zunächst, weil es Smartphones und Tablets schlicht und ergreifend nicht gab. Aber trotz ihrer schwindelerregend schnellen Verbreitung wurden mobile Geräte in den ersten Jahren im Webdesign kaum berücksichtigt. Das hielt User natürlich nicht davon ab, in der Realität trotzdem Webseiten auf ihren Smartphones und Tablets zu öffnen. Die Folge davon war, dass unerwünschte Scrollbars, endlose lange Seiten und unproportionierte Verteilung der Inhalte den mobilen Bildschirm beherrschten. Bilder wurden zu groß angezeigt, Texte rechts und links einfach abgeschnitten.
Inhaltsverzeichnis
Der erste Schritt hin zur Demokratisierung des Webdesigns waren die sogenannten mobilen Webseiten. Dies waren eigens gestaltete Unterseiten, die mit einem “m” vor dem eigentlichen Domainnamen gekennzeichnet wurden, zum Beispiel m.telefonbuch.de. Diese mobilen Seiten wurden nur dann angezeigt, wenn User via Smartphone oder Tablet die Website aufriefen.
Das Problem mit diesen mobilen Seiten ist jedoch, dass sie oft nicht nur äußerlich stark von den Desktop-Seiten abweichen, sondern regelmäßig auch andere, meist stark verkürzte Inhalte bereitstellen. Weil die Komplexität Desktop-optimierter Websites auf dem kleinen Bildschirm eines Smartphones einfach nicht umzusetzen ist, wird häufig selbst relevanter Content einfach weggelassen.
Die Idee hinter den mobilen Seiten, Inhalte für die kleinen Bildschirme anzupassen und auf das Wesentliche zu reduzieren, war zwar im Prinzip richtig, aber dies führte häufig zu Frustration bei Usern, die bestimmte Informationen der Standard-Website auch auf der mobilen Seite suchten, und dann nicht fanden. Auch die Corporate Identity litt unter dem stark abweichenden Aussehen der mobilen Unterseite. Bald wurde klar, dass mobile Seiten nicht die Lösung sein konnten.
Mobile Endgeräte sind längst kein Nebenschauplatz mehr. Die mobile Internetnutzung hat inzwischen den Desktop weit überholt. 74% aller Internetnutzer surfen, wenn nicht ausschließlich, so doch zumindest auch über ihre Smartphones.
Auch im Webdesign hat sich in puncto Mobile Devices einiges getan. Dank Responsive Webdesign kann man nun auf abgekoppelte mobile Seiten verzichten.
Beim Responsive Webdesign geht es darum, Websites so zu gestalten, dass sie auf allen Geräten und in ihren unterschiedlichen Bildschirmformaten gut aussehen. Die Web-Technologien HTML und CSS werden dabei so eingesetzt, dass das Design einer Webseite beim Aufrufen automatisch dem Gerät angepasst wird. Zur großen Erleichterung der User hat sich die Einsicht durchgesetzt, dass Websites, egal auf welchem Gerät sie ausgespielt werden, immer die gleichen Informationen bereithalten sollten.
Dabei beruht Responsive Webdesign auf drei Maßnahmen-Pfeilern, die sich gegenseitig ergänzen:
Dem CSS, also der Technologie, die für das Aussehen einer Webseite zuständig ist, werden sogenannte Media Queries hinzugefügt. Diese regeln, wie sich das Layout je nach Bildschirmgröße zu verhalten hat. Dazu werden bestimmte Schwellenwerte bestimmt, das heißt maximale oder minimale Breiten und Höhen, und diesen Werten werden bestimmte Verhaltensweisen zugeordnet.
Media Queries sind beispielsweise dafür verantwortlich, wenn auf dem Smartphone Inhalte untereinander platziert werden, die auf dem Desktop nebeneinander erscheinen. Auch die Entscheidung, ob die Webseiten-Navigation horizontal oder vertikal, ausgeschrieben oder als sogenanntes Hamburger-Menü mit seinen drei waagerechten Strichen dargestellt wird, wird in Media Queries getroffen.
Dieselbe Schriftgröße, die auf dem Desktop wohlproportioniert wirkt, kann auf dem Smartphone völlig überdimensioniert erscheinen. Deshalb werden beim Responsive Webdesign fixe Pixelwerte häufig durch relative Größenangaben wie em, rem oder vw ersetzt. Das sind Größeneinheiten, die Bilder, Schriften und Container von Anfang an ins Verhältnis zu einer stabilen Größe setzen. Oft wird beispielsweise eine Standard-Schriftgröße für den Fließtext bestimmt, und alle andere Schriftgrößen wie Überschriften oder Buttons verhalten sich dann proportional dazu.
Responsive Layouts liegen fluide Raster (engl: grids) zugrunde, die sich vor allem der Breite des Screens anpassen. Dazu wird die Webseite in gleich große Zeilen und Spalten bei einer Gesamtbreite von 100% eingeteilt. Die verschiedenen Inhalte und Designelemente, wie zum Beispiel Textabschnitte und Bilder, werden mithilfe des Rasters auf der Seite platziert. Je nach Größe des Ansichtsfensters vergrößert oder verengt sich dieses Raster und die Inhalte werden daran angepasst.
Zwar wurden schon zu Beginn der 2010-er Jahre Stimmen laut, die den mobilen Geräten im Webdesign die Vorrangstellung einräumen wollten, aber spätestens 2018, als Google das Mobile First – Prinzip zum zentralen Ranking-Faktor erhob, kam das Konzept endgültig im Mainstream an.
Die Erkenntnis hat sich durchgesetzt, dass man allen Usern unabhängig vom Gerät die gleichen Informationen und eine harmonische Corporate Identity anbieten muss. Bei Mobile First, zuweilen auch als Content First bezeichnet, werden Websites von Anfang zunächst für den Einsatz auf mobilen Endgeräten gelayoutet.
Man geht bei Mobile First davon aus, dass weniger Leistung und vor allem weniger Platz zur Verfügung steht. Statt auf aufwändige Effekte konzentriert sich das Design von Anfang darauf, den Inhalt der Website zu transportieren, der Content bestimmt also das Layout. Erst nach und nach reichert man die Seite dann für leistungsfähigere und größere Geräte mit JavaScript und anderen komplexeren Funktionen an.
Dieses Prinzip nennt sich Progressive Enhancement (deutsch: schrittweise Erweiterung) und steht im Gegensatz zu dem älteren Modell der Graceful Degradation (deutsch: elegante Abstufung), wonach sich das Layout primär an leistungsfähigen, großen Bildschirmen orientierte und anschließend peu à peu die Funktionalität und Qualität auf kleinere, schwächere Systeme reduziert wurde.
Häufig wird dem Prinzip des Mobile First auch das Konzept der Mobile Usability untergeordnet. Mobile Usability umfasst etwa die Gestaltung der Websites mit Rücksicht beispielsweise auf einhändige Bedienung und „daumenlastige“ Tätigkeiten. Aber auch die Informationsarchitektur und die Inhalte selbst sollen bereits mit Fokus auf den mobilen Einsatz entwickelt werden.
Mobile First hat sich längst durchgesetzt, und wer bislang verpasst hat, seine Website anzupassen, wird zukünftig diesen Nachteil immer stärker zu spüren bekommen, zum Beispiel beim Ranking in den Suchergebnissen.
Desktop crawling, also das Durchforsten des Web nach Desktop-optimierten Websites, erfasste zu Beginn des Jahres 2020 immerhin noch 30% aller in den Google-Suchergebnissen erscheinenden Websites. Doch längst hat Google beschlossen, das Mobile First Indexing zum neuen Standard zu erheben. Bis zum Frühjahr 2021 soll Desktop crawling gänzlich eingestellt werden.
Wer bis dahin die Mobile Friendliness, sprich die mobile Nutzerfreundlichkeit, seiner Website verbessern möchte, sollte diese zum Beispiel auf Responsive Webdesign und optimierte Ladezeiten untersuchen. Google bietet dafür hilfreiche kostenlose Tools an. So liefern die Google Page Speed Insights wertvolle Hinweise, um die Geschwindigkeit einer Website zu überprüfen und zu verbessern. Außerdem kann getestet werden, ob eine Webseite für Mobilgeräte optimiert ist.
Spannende Artikel zum Thema Webdesign
Sie benötigen eine WordPress Agentur? Wir stehen als Ihre Experten zur Verfügung. Treten Sie mit uns in Kontakt und vereinbaren Sie ein unverbindliches Beratungsgespräch.
Eine Website wurde neu erstellt, entspricht den aktuellen Designs und technisch ist auch alles in bester Ordnung – und doch bleiben die Besucher:innen aus?...
mehr lesen
Der Begriff Joy of Use bezeichnet die Freude an der Verwendung. Selbst im B2B-Bereich ist dies eine Option, wenngleich sie zunächst vielleicht seltsam erscheinen...
mehr lesen
Hier gibt es eine Übersicht der beliebtesten und besten Google Web Fonts für das nächste Webdesign. Außerdem beantworten wir die Frage, was Google Fonts...
mehr lesen
Eine Website sollte heute nicht mehr nur funktional und informativ sein, auch andere Aspekte rücken mehr und mehr in den Vordergrund. Das merkt man...
mehr lesen
Was bedeutet tl;dr? Online gibt es eine Vielzahl an Abkürzungen, bei denen auf den ersten Blick nicht immer ersichtlich ist,…
Was ist der Kalt-Warm-Kontrast? Der Begriff „Kalt-Warm-Kontrast“ bezieht sich auf einen Kontrast oder eine Gegensätzlichkeit zwischen kalten und warmen Farbtönen…
Was sind Primärfarben? Bei Primärfarben handelt es sich gemäß der Farbenlehre um die Grundfarben, aus denen sich alle anderen Farben…
