Mobile First Design: Warum es großartig ist und warum es scheiße ist

In der Vergangenheit haben sich die meisten Webdesigner und ihre Kunden zuerst an die Desktopseite eines Projekts gewandt, während der mobile Teil als sekundäres Ziel belassen wurde, das später erreicht wird. Selbst mit dem Aufkommen von Responsive Design beginnen viele von uns mit der Website in voller Größe und arbeiten sich nach unten.

Es gibt jedoch einen wachsenden Trend in der Branche, diesen Workflow auf den Kopf zu stellen und tatsächlich mit mobilen Überlegungen zu beginnen und dann bis zu einer größeren Desktop-Version zu arbeiten.

Warum würden Sie jemals so an ein Projekt herangehen? Was sind einige der Vor- und Nachteile dieser Strategie? Lesen Sie weiter, um es herauszufinden!

Mobiles Webdesign ist keine Nische

Wenn Sie immer noch im Kopf haben, dass mobiles Webdesign und Anwendungsentwicklung eine Nischenbranche sind, müssen Sie Ihre Denkweise ändern. Mobil ist kein Trend, noch ist es die Zukunft, es ist die Gegenwart. Glaubst du mir nicht? Hier sind einige verrückte Statistiken von Mobithinking:

• Es gibt weltweit über 1, 2 Milliarden mobile Webnutzer
• In den USA sind 25% der mobilen Webbenutzer nur mobil (sie verwenden selten einen Desktop, um auf das Web zuzugreifen).
• Mobile Apps wurden 10, 9 Milliarden Mal heruntergeladen
• Der Umsatz mit Mobilgeräten steigt auf breiter Front, da über 85 Prozent der neuen Mobiltelefone auf das mobile Web zugreifen können

Eine der wichtigsten Fakten hier ist der zweite Punkt, der ans Licht bringt, dass viele Benutzer wahrscheinlich immer nur die mobile Version Ihrer Website sehen werden. Das ist eine erstaunliche Offenbarung, nicht wahr?

Mehr als je zuvor haben wir das Internet in der Tasche, nicht nur in der Nähe unseres Schreibtisches oder sogar zu Hause. Dies ist ein globaler Trend, der erst in den kommenden Jahren weiter wachsen wird. Bist du bereit dafür? Umfasst Ihre berufliche Kompetenz die Webentwicklung für alle wichtigen Plattformen oder nur für die Desktop-Arena?

Warum zuerst mobil?

Wahrscheinlich hat keiner der Leute, die dies lesen, bis jetzt etwas Neues gelernt. Die über 500 US-Dollar teuren Telefone in den Taschen aller, die Sie kennen, sind alles Anzeichen dafür, dass das Internet aus seiner computerförmigen Box herausgebrochen ist.

Die Tatsache, dass der mobile Webzugriff beliebt ist, überzeugt mich jedoch fast nicht davon, dass ich eine Strategie verfolgen muss, bei der das mobile Internet an erster Stelle steht. Die Kehrseite von 25% der mobilen Benutzer, die nur mobil sind, ist, dass 75% von ihnen dies nicht sind! Der Desktop ist nach wie vor ein wichtiges Medium, das noch nicht vergessen oder in den Hintergrund gedrängt werden darf. Warum erwägen wir überhaupt, die Mobile-First-Route zu wählen?

Einer der Hauptkatalysatoren für den Aufstieg des Mobile-First-Webdesigns war die Ankündigung von Eric Schmidt im Jahr 2010, dass Google diesen Ansatz von nun an verfolgen werde, und sagte sogar: „Ich denke, es ist jetzt das gemeinsame Projekt von wir alle wollen mobil die Antwort auf so ziemlich alles machen “(Quelle). Warum diese drastische Änderung des Ansatzes?

Graceful Degradation vs. Progressive Enhancement

Dies sind einige wichtige Schlagworte von vor einigen Jahren, die noch viel Einblick in den Begriff des Mobile-First-Webdesigns geben können und warum dies ein wichtiges Konzept ist.

Eine anmutige Verschlechterung ergab sich aus der Notwendigkeit, eine Designfunktion auf so vielen Browsern und Plattformen wie möglich zu haben. Designer und Entwickler wollten die Vorteile neuer Technologien nutzen, ohne Benutzer mit Setups auszuschließen, die keine Unterstützung hatten. Die allgemeine Schlussfolgerung bestand darin, die bestmögliche Erfahrung zu schaffen und bereitzustellen, dann jede mögliche Verschlechterung zu berücksichtigen und sicherzustellen, dass die Website trotz aller Mängel funktionsfähig bleibt.

In Bezug auf das mobile Webdesign bedeutete dies, dass eine vollständige Standardwebsite verkleinert und Inhalte und Funktionen schrittweise entfernt wurde, wenn das Ansichtsfenster kleiner und das System einfacher wurde (keine Flash-Unterstützung usw.).

Aus diesem Trend entstand eine kraftvolle neue Idee: progressive Verbesserung. In dieser Version der Geschichte setzen Sie Ihr Bestes auf der mobilen Plattform und bieten den Benutzern nur minimale Bildschirmfläche, Rechenleistung und Plugins von Drittanbietern - eine erstaunliche Erfahrung, die sowohl großartig aussieht als auch perfekt funktioniert. Bei Bedarf kann die Site schrittweise „erweitert“ und sogar für größere Plattformen mit weniger Einschränkungen komplett neu überdacht werden.

Warum Progressive Enhancement gewinnt

Auf den ersten Blick scheinen diese beiden Methoden ungefähr gleichwertig zu sein. Wen interessiert es, wo Sie den Designprozess beginnen, solange er abgeschlossen ist?

Die Realität ist jedoch etwas komplexer. Wenn Sie mit der Desktop-Plattform beginnen, möchten Sie in der Regel alles nutzen, was die Plattform zu bieten hat. Sie bauen ein erstaunliches Produkt, das viele großartige Technologien nutzt, nur um zu erkennen, dass nichts davon gut auf Mobilgeräte skaliert werden kann. Dies kann und führt zu stark verwässerten mobilen Produkten, die sich eher wie ein nachträglicher Einfall als wie ein poliertes Endprodukt anfühlen. Passiert das bei jedem Projekt? Vielleicht nicht, aber die Geschichte ist wahrscheinlich weitaus häufiger als Sie glauben möchten.

Wenn wir den Workflow für die progressive Verbesserung untersuchen, sieht das Ergebnis in der Regel anders aus. Hier beginnen wir mit einem Projekt, das sowohl super schlank als auch beeindruckend ist. Sie haben all diese Anfangsenergie in ein Produkt gesteckt, das trotz der vielen Einschränkungen, mit denen Sie konfrontiert waren, gut aussieht und funktioniert.

Noch wichtiger ist, dass Sie bereits das Problem durchlaufen haben, den Inhalt auf die wichtigsten Elemente zu reduzieren. Wenn es jetzt an der Zeit ist, dieses Design auf den Desktop zu bringen, anstatt sich der Entscheidung zu stellen, was geschnitten und wie Ihr Produkt verwässert werden soll, müssen Sie entscheiden, wie Sie es noch robuster machen möchten!

Webinhalt: Bestens selektiv bedient

Das obige Argument kommt von einem rein philosophischen Standpunkt aus zu Ihnen, mit der endgültigen Schlussfolgerung, dass das Ergebnis tendenziell besser ist, wenn ein Mobile-First-Ansatz gewählt wird. Wenn Sie ein Argument mit einer etwas besser beobachtbaren Substanz wünschen, suchen Sie nicht weiter, als wie Sie Ihre Inhalte bereitstellen.

Wenn wir den anmutigen Standpunkt der Verschlechterung einnehmen, wird der gesamte Inhalt (Text, Bilder, Video, Audio usw.) gleichzeitig auf der vermutlich größten Plattform bereitgestellt. Von hier aus werden mobile Versionen berücksichtigt, die einen Großteil dieses Inhalts einfach ignorieren oder von der Seite entfernen. Das Problem ist jedoch, dass bereits geladen wurde, ob die angegebene Plattform es benötigt oder nicht. Wir stellen fest, dass auf der Plattform mehr Inhalte bereitgestellt werden, als erforderlich sind, was häufig mit den langsamsten Download-Geschwindigkeiten verbunden ist. Sehen Sie etwas falsch daran?

Mit einem Mobile-First-Standpunkt laden wir zunächst das Nötigste auf die kleineren Plattformen. Dies führt zu einer schnelleren Erfahrung, die unnötige Verzögerungen vermeidet. Die zusätzlichen Ressourcen werden bei Bedarf streng auf Plattformen geladen, die sie gut verarbeiten können.

Was ist mit Responsive Design?

Wie passt das alles zum Responsive Design, dem anderen Trend, der das Web übernimmt? Die gute Nachricht ist, dass diese beiden Strategien nicht wettbewerbsfähig sind. Man könnte sagen, dass sie füreinander gemacht wurden.

Responsive Design basiert auf dem Konzept von Medienabfragen, die auf bestimmte Geräte und Ansichtsfenstergrößen abzielen. Vor diesem Hintergrund können Sie Ihr ursprüngliches CSS aus einer mobilen Perspektive codieren und dann mithilfe von Medienabfragen mit zunehmender Größe des Ansichtsfensters selektiv zusätzliches Styling bereitstellen.

Dies ist wahrscheinlich das Gegenteil der Methode, die Sie normalerweise bei Responsive Design anwenden: Starten Sie groß und reduzieren Sie dann. Angesichts der obigen Argumente steckt jedoch viel Logik dahinter, Ihre Medienabfragen von klein nach groß zu strukturieren.

Der große fette Nachteil

Ein Hoch auf Mobile-First-Webdesign. Es ist das Beste, was es seit The Oatmeal im Internet gibt. Warum freue ich mich nicht darüber? Warum habe ich das Thema Mobile-First-Webdesign oft regelrecht vermieden, obwohl ich über Responsive Design schwärme?

Ich bin sofort mit einem kleineren Bildschirm, weniger Ressourcen und ein paar mehr Kopfschmerzen konfrontiert.

Die Antwort hier ist einfach: Es macht weder Spaß noch ist es einfach. Sicher, reaktionsschnelles Design ist schwierig, aber es ermöglicht mir, meine Layoutmuskeln zu spielen und viele integrierte Browserfunktionen zu nutzen, um einige coole Leistungen zu erbringen. Responsive Design macht meine Spielzeugkiste größer, nicht kleiner.

Beim Mobile-First-Design bin ich jedoch mit Einschränkungen für Schritt eins über den Kopf gestoßen. Das macht überhaupt keinen Spaß! Ich bin sofort mit einem kleineren Bildschirm, weniger Ressourcen und ein paar mehr Kopfschmerzen konfrontiert. Außerdem ist es einfach nicht das komfortable Gebiet. Ich habe den größten Teil meiner Webdesign-Karriere im Desktop-Bereich verbracht und Erfahrungen mit Mausschweben und -klicks gesammelt, nicht mit Fingerspitzen. Ich habe viel mobil gearbeitet, aber ich würde es nicht meine Stärke nennen.

Vor allem aus einer strengen Designperspektive fällt es mir sehr schwer, in ein Design einzutauchen, wenn ich mit dem Handy anfange und mich hocharbeite. Ich habe dies kürzlich in einem Artikel gegenüber vielen „Huzzahs“ in den Kommentaren erwähnt und sogar führende Branchenprofis eine ähnliche Melodie singen hören.

Sich der Herausforderung stellen

Schauen wir uns meine Argumente für und gegen einen Mobile-First-Design-Ansatz an. In der Kategorie "für" haben wir einfache und logische Argumente, die schwer herunterzuspielen sind. In der Kategorie „gegen“ habe ich viel Gejammer und persönliches Zögern. Welche Seite gewinnt deiner Meinung nach diesen Kampf?

Ich muss ein bisschen Trost aufgeben, um ein besserer Designer zu sein.

Vielleicht haben Sie einige bessere Anti-Mobile-First-Argumente als ich, aber wenn ich dies von einem objektiven Standpunkt aus betrachte, ist es offensichtlich, dass der Mobile-First-Ansatz der stärkere Konkurrent ist.

Dies bedeutet, dass ich mich wahrscheinlich selbst überwinden und mich der Herausforderung stellen muss, Projekte mit einem mobilen Standpunkt zu beginnen. Wenn ich es nicht mag, zuerst für Mobilgeräte zu entwerfen, bedeutet das, dass ich Raum zum Wachsen und Techniken zum Lernen habe.

Wenn meine Gründe für einen Mobile-First-Ansatz benutzerorientiert und meine Gründe dagegen persönlich sind, muss ich im Namen eines besseren Designers auf ein wenig Komfort verzichten.

Was hält dich zurück?

Sie wissen jetzt alles darüber, wie großartig Mobile-First-Webdesign für Ihre Benutzer ist. Sie wissen, dass große Unternehmen wie Google diesen Ansatz verfolgen, und Sie können die Vorteile eines Mobile-First-Workflows erkennen. Was hält dich zurück?

Teilen Sie meine Ansicht, dass Mobile-First eine schwer umsetzbare Strategie ist, und stimmen Sie zu, dass Sie nur den Sprung wagen müssen? Oder hält dich etwas Wesentlicheres zurück?