Ich habe eine Reihe von Quellen durchgelesen, in denen es heißt, dass das erste Design von Mobilgeräten fast unabdingbar ist. Ich kann nicht leugnen, dass es offensichtliche Vorteile hat, wie z. B. schnellere Ladezeiten für Mobiltelefone, die im Allgemeinen langsamere Download-Geschwindigkeiten über 3G und 4G aufweisen.

Was aber, wenn Sie eine kleinere Website mit sehr wenigen Bildern erstellen?

Ich würde gerne von anderen Meinungen zu diesem Thema hören und ob die Leute denken, dass es Ausnahmen gibt oder nicht. Persönlich bevorzuge ich es, zuerst für den Desktop zu entwerfen / zu codieren und von dort aus zu verkleinern. Aber ist es wirklich so wichtig, zuerst für Mobilgeräte zu entwerfen / zu codieren, oder sind die Endergebnisse nicht signifikant genug, um in bestimmten Situationen zu stören?

Aus rein gestalterischer Sicht ist es sinnvoll, zunächst mit der mobilen Version zu beginnen.

Der schwierigste Teil des Designprozesses ist immer das Beschneiden, niemals das Hinzufügen. Je kleiner die Bildschirmfläche ist, die Sie sich erlauben, desto mehr müssen Sie darüber nachdenken, was in Ihrem Design wichtig ist und welche Informationen Sie wirklich anzeigen müssen. Außerdem müssen Sie sich Gedanken über die Barrierefreiheit machen, da Text und andere Elemente kleiner sind.

Sobald Sie die 'Light'-Version entworfen haben, können Sie zusätzliche Dinge wie Designelemente hinzufügen und Dinge vergrößern, wenn Sie Immobilien gewinnen. Wie von @Django hervorgehoben, sollten Sie niemals Features aus dem Design auslassen.

Ein Beispiel für Ihre Site könnte das Menü sein. Sie haben beschlossen, die Menüpunkte zu verlassen und durch ein Hamburger-Symbol zu ersetzen, was Standardverfahren ist. Wenn die Menüelemente jedoch eines der wichtigsten Dinge auf der Seite sind, möchten Sie sie nicht hinter einem Klick verbergen.

Nebenbemerkung: Das Rot auf Blau auf Ihrer Website ist wirklich schlecht für den Farbenblinden. Bitte überlegen Sie, dies zu ändern.

Mobile First ist eine bewährte Methode - es ist kein Gesetz. Wenn Sie verstehen, warum Sie es "verwenden" sollten, können Sie eine fundierte Entscheidung treffen, warum Sie es nicht für ein bestimmtes Projekt verwenden möchten, und das ist in Ordnung.

Es ist erwähnenswert, dass sich "Mobile First" auf das Design / UX und den Build selbst bezieht . Mobile First Design beschleunigt Ihre Website für Benutzer nicht, Mobile First Development jedoch .

Schauen wir uns beide an.

Mobil zuerst im Design

Beim Mobile First Design geht es darum, Ihre Funktionen und Benutzerfreundlichkeit auf das zu reduzieren, was Sie benötigen . Der Gedanke dahinter lautet wie folgt: Anstatt zuerst den Desktop zu entwerfen und dann zu kämpfen, um alle Funktionen, die Sie sich ausgedacht haben, in ein 320 Pixel breites Display zu integrieren und eine gute Benutzeroberfläche zu erhalten, beginnen Sie zuerst mit dem Handy ...

Wenn die UX durch all Ihre Funktionen auf Mobilgeräten überladen oder beschädigt wird, sollten Sie sich fragen, ob der Benutzer sie wirklich alle benötigt. Können Sie einige von ihnen loswerden und die Erfahrung tatsächlich verbessern? Wenn ja, warum haben Sie sie? Vielleicht sind sie doch nicht unbedingt erforderlich, und vielleicht sollten sie nicht auf Ihrer Website sein.

Die Theorie besagt, dass dies Ihnen hilft, Ihre Funktionen auf das zu reduzieren, was Sie unbedingt benötigen , und dass Sie dies dann zu einem schönen Desktop-Erlebnis skalieren können.

Mobile zuerst in der Entwicklung

Bei der ersten mobilen Entwicklung geht es darum, zuerst die mobile Version zu schreiben und dann Ausnahmen für größere Bildschirme einzufügen. Der Grund, warum dies für mobile Benutzer besser (und schneller) ist, ist folgender: Sie haben zwei Bilder für eine Website, ein großes für den Desktop und ein kleineres für das Handy. Wenn Sie zuerst den Desktop codieren, sieht Ihr CSS ungefähr so ​​aus:

.test2 {
    background-image:url('images/verylargeimage.png');
}

// If on a smaller screen...
@media all and (max-width: 600px) {
    .test2 { 
      background-image:url('images/smallimage.png');
    }
}

Dies bedeutet, dass der mobile Benutzer das tatsächlich herunterlädt, large.jpgbevor das CSS es ausschaltet. Das ist sehr schlecht.

Mobile sieht zunächst so aus:

.test2 {
     background-image:url('images/smallimage.png');
}

// If on a larger screen
@media all and (min-width: 600px) {
    .test2 { 
        background-image:url('images/verylargeimage.png');
    }
}

Der mobile Benutzer lädt niemals herunter large.jpg.

Ich hoffe, das hilft, die Dinge ein wenig klarer zu machen, wenn Sie sie vorher nicht verstanden haben!

Der Ursprung von "Mobile First"

Die Idee von "Mobile First" in Bezug auf Responsive Design stammt aus einer Zeit, als die Browser für mobile Geräte viel weniger leistungsfähig waren als auf einem Desktop-Gerät. Viele von ihnen unterstützten Medienabfragen überhaupt nicht, daher fällt die Idee, ein ausgefallenes Desktop-Design aufzubauen und dann mithilfe von Medienabfragen für ein schmales Ansichtsfenster Stile beizubehalten, auf den Kopf.

Das Fehlen von Unterstützung für Medienabfragen ist in der Tat die erste Medienabfrage.

- Bryan Rieger

Ist Mobile zuerst noch relevant?

Trotz der Tatsache, dass Browser für mobile Geräte ihre Desktop-Gegenstücke eingeholt haben, ist "mobile first" immer noch die logischste Methode, um Ihre Stile zu schreiben.

Ich denke lieber daran, "frühere Stildeklarationen nicht rückgängig zu machen". Ein additiver Ansatz führt fast immer zu einem kompakteren Stylesheet, anstatt Stile zu schreiben und später zu überschreiben. Stile, die für die meisten / alle Geräte geeignet sind, sollten außerhalb von Medienabfragen gefunden werden, während Stile, die nur für ein bestimmtes Ansichtsfenster relevant sind, hinter einer Medienabfrage stehen sollten.

Vergleichen Sie einen "Desktop First" -Ansatz:

.column {
    float: left;
    width: 50%;
}

@media all and (max-width: 50em) {
    .column {
        float: none;
        width: auto;
    }
}

Zu einem "Mobile First" -Ansatz:

@media all and (min-width: 50em) {
    .column {
        float: left;
        width: 50%;
    }
}

Die Ergebnisse sind die gleichen, aber die späteren sind kompakter. Beispielstile, die schamlos aus Brad Frosts 7 Gewohnheiten hochwirksamer Medienabfragen kopiert wurden .

Es gibt einige seltene Ausnahmen, in denen "Desktop zuerst" besser geeignet ist als umgekehrt. Am bemerkenswertesten ist dies, wenn Sie beispielsweise reaktionsschnelle Tabellen ausführen. Breitere Ansichtsfenster möchten die Standardstile für Tabellen, aber ein schmales Ansichtsfenster möchte all dies überschreiben, damit der Inhalt vertikal gestapelt werden kann.

Brechen Sie Ihre Stylesheets nicht auf

Eine Sache, die Sie unbedingt nicht tun sollten, ist, Ihre Reaktionsstile in einzelne CSS-Dateien aufzuteilen und das Medienattribut für das Linkelement zu verwenden. Dies hat die unerwünschte Folge, dass die UA alle verknüpften Stylesheets herunterlädt (dh es gibt keine Geschwindigkeitsverbesserung dafür).

<!-- this is bad, don't do this -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

Code sollte also zuerst mobil sein, aber was ist mit der Herangehensweise an das Design?

Ich bin der Meinung, dass es keine Rolle spielt. Layouts für alle Ansichtsfenster relevant für das Design muss getan werden (dies könnte so wenig beteiligt ist, wie 2 oder so viele wie 5 , wenn Sie Faktor in allen Moll-Stützpunkten Sie benötigen!), Um nicht Sache am Ende. Vielen Designern fehlt die Disziplin, mit einem Desktop-Layout zu beginnen, und sie finden, dass das Starten von einem mobilen Layout einfacher ist.

Wenn Sie von einem Desktop-Layout ausgehen möchten, müssen Sie die Versuchung vermeiden, all diese herrlichen Leerzeichen mit Unordnung zu füllen, die den Inhalt dieser Seite nicht verbessert. Benötigen Sie wirklich das 800x600 Stock Foto einer lächelnden Frau, die ein Telefon hält? Es kostet den mobilen Benutzer nur zusätzliches Geld, nutzlose Flusen herunterzuladen, und es ist nur eine visuelle Ablenkung für einen Desktop-Benutzer, vorbei zu springen.

Ich habe Ihre Website www.cosmosdesign.co.nz auf verschiedenen Bildschirmgrößen getestet und sie funktioniert auf allen Bildschirmen einwandfrei. In Bezug auf Ihre Frage zum mobilen Erstdesign möchte ich sagen, dass Ihr Designansatz Ihre Zielgruppe zusammen mit vielen anderen Faktoren wie Bildern, Inhalten usw. berücksichtigen muss. Wenn Ihre Zielgruppe diese Website hauptsächlich auf Desktops / Laptops verwendet, können Sie dies Fahren Sie mit Ihrem Ansatz fort, aber wenn es sich um eine Website handelt, die hauptsächlich auf Telefonen und Registerkarten angezeigt wird, müssen Sie sich Gedanken über Ihre Strategie machen.

Sie können auch in Betracht ziehen, Ihre Website mithilfe von Bootstrap reaktionsschnell zu gestalten (viele andere Optionen sind ebenfalls verfügbar), und Sie können Ihre Bilder für eine mobilfreundliche Website optimieren, wodurch sich auch die Ladezeit verkürzt.

Für mich ist der Hauptgrund, zuerst mobil zu sein, die Vermeidung einer Situation, in der Ihre mobile Website nicht alles tut, was die Desktop-Version tut. Es gibt Unmengen von Websites, auf denen ich die Desktop-Version auf meinem Telefon anfordern muss, um etwas zu tun, denn obwohl das Telefon dies kann, funktioniert die mobile Version nicht. Das nervt mich.

Trotzdem denke ich, dass Desktop-First in Ordnung ist, solange Sie später nicht an den mobilen Funktionen sparen, wie es die meisten Firmen tun.

Viele Design-Frameworks machen dies auch ziemlich einfach. Ich habe Material Design Lite verwendet, um eine ziemlich komplexe Desktop-First-App zu erstellen, und musste wirklich nur ein paar Dinge ändern, als ich sie für eine mobilfreundliche Version überarbeitete - der größte Teil der Arbeit war bereits erledigt.