In der Vergangenheit haben sich die meisten Webdesigner und ihre Kunden zuerst mit der Desktopseite eines Projekts befasst, während der mobile Teil als sekundäres Ziel bleibt, das später erreicht wird. Selbst mit dem Aufkommen des responsiven Designs beginnen viele von uns mit der „vollen Größe“. Standort und Arbeit 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 zu einer größeren Desktop-Version zu arbeiten. Warum sollten Sie jemals ein Projekt auf diese Weise angehen? Was sind die Vor- und Nachteile dieser Strategie? Lesen Sie weiter, um es herauszufinden!
Dieser Artikel ist Teil unserer Serie "Blick über das Desktop-Design hinaus", die Sie in Partnerschaft mit Heart Internet VPS erhalten haben.
Mobile 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. Mobile ist kein Trend und auch keine Zukunft, es ist Gegenwart. Glaub mir nicht Hier sind ein paar verrückte Statistiken von Mobithinking vom letzten Monat.
- Es gibt über 1,2 Milliarden mobile Webbenutzer weltweit
- In den USA sind 25% der mobilen Webbenutzer ausschließlich mobil (sie verwenden selten einen Desktop, um auf das Web zuzugreifen).
- Mobile Apps wurden 10,9 Milliarden Mal heruntergeladen
- Der Verkauf von Mobilgeräten steigt auf breiter Front. Über 85 Prozent der neuen Mobiltelefone können auf das mobile Web zugreifen
Eine der wichtigsten Fakten ist der zweite Punkt, der ans Licht bringt, dass viele Benutzer wahrscheinlich nur die mobile Version Ihrer Website sehen werden. Das ist eine erstaunliche Offenbarung, nicht wahr?
Das Web ist mehr als je zuvor etwas, das wir in unseren Taschen tragen, nicht etwas, das nur in der Nähe unseres Schreibtischs oder sogar in unseren Häusern hängt. Dies ist ein globaler Trend, der nur in den nächsten Jahren weiter wachsen wird. Bist du dafür bereit? Umfassen Ihre beruflichen Fähigkeiten Webentwicklung für alle wichtigen Plattformen oder nur den Desktopbereich?
Warum zuerst mobil?
Wahrscheinlich hat keiner der Leute, die dies lesen, bis jetzt etwas Neues gelernt. Die Telefone im Wert von über 200 US-Dollar in den Taschen aller, die Sie kennen, sind alles, was Sie brauchen, um zu zeigen, dass das Internet aus seiner computerförmigen Box herausgebrochen ist.
Die Tatsache, dass der Zugang zum mobilen Web populär ist, überzeugt mich jedoch fast nicht davon, dass ich eine Strategie verfolgen muss, bei der Mobile wirklich an erster Stelle steht. Die Kehrseite von 25% der mobilen Benutzer, die ausschließlich mobil sind, besteht darin, dass 75% nicht mobil sind. Offensichtlich ist der Desktop immer noch ein wichtiges Medium, das noch nicht ganz vergessen oder in den Hintergrund tritt. Warum überlegen wir sogar, die mobile erste Route zu wählen?
Einer der Hauptkatalysatoren für den Aufstieg des mobilen ersten Webdesigns war die Ankündigung von Eric Schmidt im Jahr 2010, dass Google diesen Ansatz von nun an verfolgen und so weit sagen will: Ich denke, es ist jetzt das gemeinsame Projekt von allen von uns die mobile Antwort auf so ziemlich alles? (Quelle). Warum diese drastische Änderung des Ansatzes?
Graceful Degradation vs. progressive Verbesserung
Dies sind einige der wichtigsten Schlagworte aus der Zeit vor einigen Jahren, die immer noch viel Einblick in die Idee des Mobile First Webdesigns und warum es ein wichtiges Konzept ist, zu berücksichtigen.
Anmutige Verschlechterung ergab sich aus der Notwendigkeit, eine Designfunktion für so viele Browser und Plattformen wie möglich zu haben. Designer und Entwickler wollten die neue Technologie nutzen, ohne Benutzer mit Setups auszuschließen, die keinen Support hatten. Die allgemeine Schlussfolgerung lautete, die bestmögliche Erfahrung zu schaffen und zu bedienen, um dann jede mögliche Verschlechterung zu berücksichtigen und sicherzustellen, dass die Website trotz etwaiger Mängel funktionsfähig bleibt.
In Bezug auf das mobile Webdesign bedeutete dies, dass eine vollständige Standardwebsite Inhalte und Funktionen schrittweise verkleinern und allmählich entfernen würde, da der Darstellungsbereich kleiner und das System einfacher wurde (keine Flash-Unterstützung usw.).
Aus diesem Trend entstand eine schlagkräftige neue Idee: progressive Verbesserung. In dieser Version der Geschichte setzen Sie Ihr Bestes auf der mobilen Plattform, indem Sie den Benutzern minimale Bildschirmfläche, Rechenleistung und Plug-Ins von Drittanbietern bieten. Dies ist eine erstaunliche Erfahrung, die sowohl großartig aussieht als auch perfekt funktioniert. Je nach Bedarf kann der Standort schrittweise verbessert werden. und sogar für größere Plattformen mit weniger Einschränkungen völlig neu gedacht.
Warum progressive Verbesserung gewinnt
Auf einen Blick scheinen diese beiden Methoden ungefähr gleich zu sein. Wen kümmert es, wo Sie mit dem Designprozess beginnen, solange es fertig ist, oder?
Die Realität der Situation 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 festzustellen, dass nichts davon bis hin zu mobilen Geräten reicht. Dies kann und führt zu stark verwässerten mobilen Produkten, die sich eher nachträglich anfühlen als nach einem polierten Fertigprodukt. Kommt das bei jedem Projekt vor? Vielleicht nicht, aber die Geschichte ist wahrscheinlich weitaus häufiger, als Sie glauben möchten.
Wenn wir den progressiven Verbesserungsworkflow untersuchen, ist das Ergebnis tendenziell eine andere Geschichte. Wir beginnen hier mit einem Projekt, das sowohl sehr schlank als auch ziemlich beeindruckend ist. Sie haben all die Start-Energie genommen und in ein Produkt verwandelt, das trotz der vielen Einschränkungen, denen Sie gegenüberstanden, gut aussieht und funktioniert.
Noch wichtiger ist, Sie haben bereits das Problem durchlaufen, den Inhalt auf die wichtigsten Elemente zu reduzieren. Wenn es nun an der Zeit ist, dieses Design auf den Desktop zu bringen, müssen Sie sich nicht entscheiden, was Sie schneiden und wie Sie Ihr Produkt verwässern müssen, sondern entscheiden, wie Sie es noch robuster machen!
Web-Inhalt: Am besten selektiv serviert
Das obige Argument kommt aus rein philosophischer Sicht, mit dem Endergebnis neigt besser sein, wenn ein mobiler erster Ansatz gewählt wird. Wenn Sie eine Auseinandersetzung mit etwas mehr beobachtbarer Substanz wünschen, suchen Sie nicht weiter, als wie Sie Ihre Inhalte bereitstellen.
Wenn wir den Standpunkt der eleganten Verschlechterung einnehmen, wird der gesamte Inhalt (Text, Bilder, Video, Audio usw.) gleichzeitig auf die als wahrscheinlich größte Plattform vorgesehene Serving-Funktion geliefert. Von hier aus werden mobile Versionen berücksichtigt, die einen Großteil dieses Inhalts von der Seite ignorieren oder entfernen. Das Problem ist jedoch, dass bereits geladen wurde, ob die Plattform dies benötigte oder nicht. Wir stellen fest, dass wir mehr Inhalte bereitstellen, als auf der Plattform erforderlich sind, was oft mit den langsamsten Downloadgeschwindigkeiten verbunden ist. Sehen Sie irgendetwas falsch damit?
Mit einem mobilen ersten Blickpunkt laden wir zunächst das Nötigste auf den kleineren Plattformen. Dies führt zu einem schnelleren Erlebnis, das unnötige Verzögerungen vermeidet. Die zusätzlichen Ressourcen werden streng auf Plattformen geladen, die sie gut handhaben können.
Was ist mit Responsive Design?
Wie passt das alles zu Responsive Design, dem anderen Trend, der das Internet übernimmt? Die gute Nachricht ist, dass diese beiden Strategien nicht wettbewerbsfähig sind. Man könnte sagen, dass sie füreinander geschaffen wurden.
Responsive Design basiert auf dem Konzept von Medienabfragen, die auf bestimmte Geräte und Ansichtsfenstergrößen abzielen. Aus diesem Grund können Sie Ihr anfängliches CSS aus einer mobilen Perspektive kodieren und dann Medienabfragen verwenden, um mit zunehmender Größe des Darstellungsbereichs das zusätzliche Styling gezielt zu unterstützen.
Dies ist wahrscheinlich das Gegenteil der Methode, die Sie beim responsive Design normalerweise verwenden: Beginnen Sie groß und reduzieren Sie dann. In Anbetracht der obigen Argumente steckt natürlich eine große Logik hinter der Strukturierung Ihrer Medienanfragen von klein bis groß.
Der große fette Nachteil
Hurra für mobiles erstes Webdesign. Es ist offensichtlich das Beste, was seit The Oatmeal im Internet zu finden ist. Warum bin ich nicht begeistert? Warum habe ich, obwohl ich über Responsive Design sprudle, das Thema Mobile First Webdesign oft völlig umgangen?
Die Antwort hier ist einfach: Es macht weder Spaß noch ist es einfach. Sicheres, responsives Design ist schwierig, aber es erlaubt mir, meine Layoutmuskeln richtig zu trainieren und eine Menge eingebauter Browserfunktionen zu nutzen, um coole Leistungen zu erbringen. Responsive Design macht meine Spielzeugkiste größer, nicht kleiner.
Beim mobilen ersten Design bin ich jedoch mit den Einschränkungen des ersten Schrittes überfordert. Das macht überhaupt keinen Spaß! Sofort bin ich mit einem kleineren Bildschirm, weniger Ressourcen und einer Menge Kopfschmerzen konfrontiert. Außerdem ist es kein komfortables Gebiet. Ich habe die meiste Zeit meiner Webdesign-Karriere im Desktopbereich verbracht und Erfahrungen mit Mausbewegungen und Klicks gesammelt, nicht mit dem Finger. Ich habe viel mobil gearbeitet, aber ich würde es nicht als starken Anzug bezeichnen.
Aus strenger Designperspektive heraus finde ich es sehr schwierig, wirklich in ein Design einzutauchen, wenn ich mit Mobile beginne und mich nach oben arbeite. Ich erwähnte dies in einem kürzlich erschienenen Artikel zu vielen "Huzzahs". In den Kommentaren haben sogar führende Branchenexperten eine ähnliche Melodie gehört.
Sich der Herausforderung stellen
Lassen Sie uns einen kurzen Blick auf meine Argumente für und gegen einen Mobile First Design-Ansatz werfen. In der? Für? In dieser Kategorie haben wir unkomplizierte und logische Argumente, die schwer zu spielen sind. Im? Gegen? Kategorie Ich habe viel Jammern und persönliches Zögern. Welche Seite gewinnt Ihrer Meinung nach diese Schlacht?
Vielleicht haben Sie einige bessere Argumente für das Thema "Anti-Mobile-First" als ich, aber wenn ich das aus objektiver Sicht betrachte, ist es offensichtlich, dass der Mobile-First-Ansatz der stärkere Konkurrent ist.
Das bedeutet, dass ich mich wahrscheinlich selbst überwinden muss und mich der Herausforderung stellen muss, Projekte mit einem mobilen Standpunkt zu beginnen. Wenn es mir nicht gerade angenehm fällt, zuerst für Mobile zu entwerfen, gut, bedeutet das, dass ich Raum zum Wachsen habe und Techniken zum Lernen habe.
Wenn meine Gründe für die Einführung eines mobilen ersten Ansatzes benutzerzentriert sind und meine Gründe dagegen persönlich sind, muss ich letztendlich ein wenig Trost aufgeben, um ein besserer Designer zu sein.
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 mobilen ersten Workflows deutlich erkennen. Also, was hält dich zurück?
Teilen Sie meine persönliche Perspektive, dass Mobile zuerst eine schwierige Strategie ist, die umgesetzt werden muss, und sich einig ist, dass Sie nur den Mann (oder die Frau, wenn Sie möchten) und den Sprung machen müssen? Oder gibt es etwas mehr, das dich zurückhält? Hinterlasse einen Kommentar und lass es uns wissen!
Bilder via BigStock: Reno Martin, Yellowj und PixelsAway.