Ansicht eines Arbeitsplatzes im Home Office mit einer Responsive Website auf einem Smartphone

Mobile First Webdesign

Der Mobile First Ansatz im Webdesign

Gesenkter Kopf in der Innenstadt, Kopfhörer im Ohr und das Smartphone vor dem Mund, um dem Freund im nächstgelegenen Restaurant mitzuteilen, dass sie in 5 Minuten da ist. Vorher noch schnell die Speisekarte gecheckt, damit er schon mal bestellen kann.

Dieses Szenario ist bei vielen Menschen mittlerweile zum Alltag geworden. Smartphones sind unser stetiger Begleiter im Alltagsleben. Wir nutzen diese fast für alles. Am meisten sind wir allerdings auf der Suche nach Informationen im Internet. Egal, ob wir unterwegs oder zu Hause sind, in der Regel greifen wir schnell zu unserem Handy und suchen danach. Nicht ohne Grund lag der Anteil der mobilen Internetnutzer der deutschen Wohnbevölkerung ab 14 Jahren in Privathaushalten bereits im Jahr 2019 schon bei 74 %.

Deshalb ist der Ansatz, der für die Konzeption und das Design Ihres Internetauftritts eine enorm große Rolle spielt, das Mobile First Prinzip.

Was bedeutet Mobile First?

Bei der Konzeption und Gestaltung Ihrer Website beginnen Sie mit der Darstellung auf mobilen Endgeräten. Das beschreibt diesen Ansatz ziemlich simpel. Man arbeitet von der kleinsten Layout-Version hin zur größten.

Bislang wurde beim Webdesign die Desktop-Darstellung als Basis verwendet und das fertige Design auf mobile Geräte übertragen. Diese Herangehensweise erzeugt oftmals eine sehr überladene Version auf dem Smartphone und dem Tablet, da alle Elemente auf der Seite untergebracht werden mussten. Viele Elemente auf dem schmalen Endgerät waren entweder zu groß, zu klein oder überlagerten sich gegenseitig – für den Nutzer wurde es unübersichtlich. Ein gutes Beispiel dafür sind Bilder. Es ist wichtig im Hinterkopf zu behalten, dass der Bildinhalt auf allen Gerät erkennbar bleiben muss. Wenn die Bilder dieses Potential nicht bieten, müssen manchmal verschiedene Ausschnitte für unterschiedliche Geräte ausgegeben werden.

Desktop-Only-Webseiten könnten künftig nicht mehr in den Suchergebnissen bei Google zu finden sein

Seit Google beschloss, vorrangig nur noch für mobile Endgeräte optimierte Websites zu berücksichtigen, wurde dieser Ansatz noch mal um ein Vielfaches wichtiger. Das Prinzip von „Mobile First“ selbst hatte zwar schon bei der Einführung der Smartphones seinen Ursprung, bekommt jedoch durch die ansteigende mobile Internetnutzung einen immer höheren Stellenwert.

So könnte es kommen, dass Desktop-Only-Webseiten aus den Suchergebnissen ab dem Frühjahr 2021 allmählich verschwinden. Für Betreiber von Webseiten, die bis dahin immer noch keine mobile Version ihrer Internetpräsenz beziehungsweise eine komplette Darstellung aller Inhalte für Mobilgeräte vorweisen, hat dies gravierende Folgen: Inhalte, die ausschließlich für Desktop-Geräte erstellt wurden, stellen mobile Nutzer nicht ausreichend zufrieden und fallen schlussendlich aus dem Index. Suchende können die Inhalte bei der Suchmaschine nicht mehr finden, womit wichtiger Traffic und wertvolle Besucher künftig ausbleiben.

Im Ursprung sollte die Umstellung auf die Mobile First Indexierung bereits im September abgeschlossen sein – aufgrund der Umstände durch die Coronavirus-Erkrankung COVID-19 verschob die Suchmaschine das Vorhaben auf das Frühjahr 2021. Im März 2021 soll es dann soweit sein. Sind Sie darauf vorbereitet?

Die Darstellung zeigt den Mobile-First-Index und den Wegfall von Desktop-Only-Websites

Responsive Webdesign versus Mobile First

Responsive Webdesign ist die Art, wie eine Website umgesetzt wird, die sich flexibel an definierte Bildschirmgrößen anpasst. In diesem Punkt reißen wir also etwas das Technische an. Es werden für die Website bestimmte Größen festgelegt, die beispielsweise das Aussehen auf dem Tablet oder Smartphone beschreiben – eben das responsive Verhalten. Diese definierten Größen nennt man Breakpoints, bei denen die Website ab einem bestimmten Punkt in ein anderes Layout umbricht. Am Computer lässt sich das gut simulieren, wenn Sie einfach Ihr Browserfenster verkleinern.

In der Fachsprache von Webdesignern werden diese Breakpoints mithilfe von Media Queries innerhalb des CSS festgelegt. Media Queries (Medienabfragen) ordnen das Aussehen Ihrer Website einem bestimmten Ausgabemedium zu, wie beispielsweise Tablet oder Smartphone. Dabei spielt die Breite, die „Width“, die wichtigste Rolle. Anhand der Width wird die Größe des Ausgabemedium identifiziert und die korrekte Darstelung Ihrer Website wird angewendet. Dieser CSS-Code beschreibt mit seinen CSS-Stilen das Aussehen Ihrer Website – das responsive Design.

So – genug Fachsprache und Technik. Normalerweise wird für Responsive Webdesign als Basis die Desktop-Variante genutzt und von dort aus werden anschließend alle kleineren Bildschirmgrößen definiert. Bei der Mobile First Strategie geschieht es genau umgekehrt. Man beginnt mit der kleinsten Ausgabegröße und arbeitet sich Stück für Stück zur größten Ausgabegröße vor.

Darstellung der Vorgehensweise beim Mobile First Webdesign

Vorteile einer Mobile First Strategie im Webdesign

Fokus auf das Wesentliche

Kleine Displays und das geringe Platzangebot in der Breite sorgen für Reduktion. Die Konzentration liegt fast automatisch auf den wichtigsten Bestandteilen, sodass Nutzer nicht überfordert werden. Das betrifft später auch die Ansicht einer Seite auf dem Desktop. Viele Elemente, die den Nutzer ablenken könnten, werden durch die Integration des Mobile First Ansatzes reduziert. Vergessen Sie also niemals: Nicht alles ist gleich wichtig!

Neukundengewinnung: Erreichen Sie mehr potenzielle Kunden

Die Tage sind vorbei, an denen Ihre Interessenten Sie nur am Desktop-Computer suchen. Wir alle sind ständig unterwegs und haben immer weniger Zeit. Fakt ist auch, dass Smartphones nicht nur für den privaten Gebrauch, sondern auch im geschäftlichen Bereich alltäglich genutzt werden. Eine Studie von SISTRIX zeigt, dass 50 % der B2B-relevanten Suchanfragen mobil laufen. Viele Unternehmer sind tagsüber ebenfalls unterwegs und surfen mit dem Smartphone.

Irrtum im Mobile First Webdesign

Reduktion verbessert nicht immer auch automatisch die Benutzerfreundlichkeit

Mit dem mobilen Design einer Website geht immer eine gewisse Vereinfachung einher. Die Resultate werden aber oft ohne Weiteres für die Desktop-Variante übernommen. Immer häufiger ist zu sehen, dass auch diese ein sogenanntes „Burger-Icon" für das Menü nutzen, obwohl hier genug Platz für alle Menüpunkte wäre. Der Nutzer muss einen umständlichen Weg zurücklegen, um auf jede einzelne Seite zu gelangen. An diesem Beispiel zeigt sich, dass nicht alles von der mobilen Version adaptiert werden sollte, sondern das Hinterfragen, ob die Vereinfachung auf dem Desktop generell Sinn macht, besonders wichtig ist. Machen Sie es sich zur obersten Priorität, Ihre Nutzer zu begeistern, statt zu frustrieren.

Darstellung einer Desktop-Version mit Burger-Icon

Mobile First und User First Design

Ab und zu ist die Rede von „Auf das Wichtigste konzentrieren“. Woher wissen Sie aber, was das Wichtigste ist? Dazu müssen Sie sich klar machen, für wen Ihre Website gedacht ist: Ihre User. Ihre Website ist nicht für Sie, sondern für all die Menschen, die auf der Suche nach Informationen zu Ihren Produkten, Dienstleistungen oder Ihrem Unternehmen sind. Es gilt also herauszufinden, welche Informationen Ihre Nutzer und Webseitenbesucher benötigen, um genau diese auf Ihrer Internetseite bestmöglich darzustellen. So können Ihre potenziellen Kunden oder Mitarbeiter diese schnell und leicht finden. Das ist User First Design.

In Kombination mit dem Mobile First Prinzip bedeutet das: Nachdem die grundlegenden Bedürfnisse des Nutzers feststehen, wird unter dem Mobile First Ansatz versucht, die Informationen so auszugestalten, dass diese schnell und einfach zu finden sind. Es entsteht eine auf Ihre Besucher ausgerichtete Internetpräsenz, die auf mobilen Endgeräten optimal dargestellt wird.

Ihre Webseite im Mobile First Webdesign

Sie möchten Ihre Kunden dort abholen, wo sie sind, nämlich am Smartphone? Dann informieren Sie sich jetzt, was wir Ihnen als Webdesign Agentur bieten und vereinbaren gern ein Gespräch mit uns. Wir beantworten all Ihre Fragen rund um Mobile First und ein herausragendes Design für Ihre neue oder bestehende Website kompetent. Gern schauen wir uns Ihre Seite an.

Als professionelle Digitalagentur ist alto. auf das Thema Mobile First Webdesign spezialisiert und unsere Experten wissen genau, worauf es bei einer Optimierung zu achten gilt, damit Sie Erfolg im Web haben. Machen Sie jetzt Ihren Content und Ihre Seiten für mobile Besucher und deren Endgeräte fit. Rufen Sie uns an oder nehmen Sie einfach über unser Formular Kontakt mit uns auf. Gern können Sie Ihre Internetseite auch kostenlos mit einem Website Check überprüfen lassen.

Moritz Riemer

Autor:

Moritz Riemer

Graphic Designer. Umgibt sich gern mit den neusten Trends aus der Branche und hat immer eine besondere Idee im Hinterkopf. Schreibt auf dem alto. Experten-Blog über Webdesign und konzeptionelle Ansätze in Kombination mit User Experience.

Mark-Oliver Müller, Geschäftsführer
Sie haben Fragen?

Mein Name ist Mark-Oliver Müller und ich helfe Ihnen sehr gern weiter.

Ich rufe Sie auch zurück. Wann passt es Ihnen?

* Pflichtfelder

Jetzt teilen