Ich habe eine Reihe von Quellen gelesen, die behaupten, dass Mobile First Design fast unerlässlich ist, was ich nicht leugnen kann, dass es offensichtliche Vorteile hat, wie schnellere Ladezeiten für Handys, die im Allgemeinen langsamere Download-Geschwindigkeiten durch 3G und 4G haben.
Aber was ist, 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 ziehe ich es vor, zuerst für den Desktop zu entwerfen/codieren und von dort aus herunterzuskalieren. Aber ist es wirklich so wichtig, zuerst für Mobilgeräte zu entwerfen/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, welche Informationen Sie wirklich zeigen müssen. Außerdem werden Sie sich zwingen, auch über Barrierefreiheit nachzudenken, da Text und andere Elemente kleiner werden.
Sobald Sie die „leichte“ Version entworfen haben, können Sie weitere Dinge wie Designelemente hinzufügen und Dinge vergrößern, wenn Sie Immobilien gewinnen. Wie von @Django betont, sollten Sie niemals Funktionen aus dem Design auslassen.
Ein Beispiel für Ihre Website könnte das Menü sein. Sie haben sich entschieden, die Menüpunkte zu verlassen und durch ein Hamburger-Symbol zu ersetzen, was ein Standardverfahren ist. Aber wenn die Menüpunkte eines der wichtigsten Dinge auf der Seite sind, möchten Sie sie nicht hinter einem Klick verstecken.
Nebenbemerkung: Das Rot auf Blau auf Ihrer Website ist wirklich schlecht für Farbenblinde, bitte ziehen Sie in Betracht, dies zu ändern.
Mobile First ist Best Practice – es ist kein Gesetz, und wenn Sie verstehen, warum Sie es verwenden „sollten“, können Sie eine fundierte Entscheidung darüber 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. Das Mobile-First-Design wird Ihre Website für die Nutzer nicht beschleunigen, aber die Mobile-First-Entwicklung wird es tun .
Schauen wir uns beide an.
Beim Mobile-First- Design geht es darum, Ihnen dabei zu helfen, Ihre Funktionen und Benutzerfreundlichkeit auf das zu reduzieren, was Sie brauchen . Der Gedanke dahinter lautet wie folgt: Anstatt zuerst den Desktop zu entwerfen und sich dann darum zu bemühen, alle Funktionen, die Sie sich ausgedacht haben, in ein 320 Pixel breites Display zu packen und eine gute UX beizubehalten, beginnen Sie zuerst mit Mobilgeräten ...
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. Kannst du einige von ihnen loswerden und das Erlebnis tatsächlich verbessern? Wenn ja, warum hast du sie? Vielleicht sind sie doch nicht unbedingt erforderlich, und vielleicht sollten sie nicht auf Ihrer Website sein.
Theoretisch hilft Ihnen dies dabei, Ihre Funktionen auf das zu reduzieren, was Sie unbedingt benötigen , und Sie können dies dann zu einem schönen Desktop-Erlebnis skalieren.
Bei der Mobile-First- 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 Mobilgeräte. Wenn Sie zuerst den Desktop programmieren, sieht Ihr CSS in etwa 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 die tatsächlich herunterlädt, large.jpgbevor das CSS sie 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 nie herunter large.jpg.
Ich hoffe, das hilft, die Dinge ein wenig klarer zu machen, wenn Sie sie vorher nicht verstanden haben!
background-imageindividuell auf Desktop und Mobile einzustellen.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 das, was Sie auf einem Desktop-Gerät finden würden. Viele von ihnen unterstützten überhaupt keine Medienabfragen, sodass die Idee, ein ausgefallenes Desktop-Design aufzubauen und dann Stile mit Medienabfragen für einen schmalen Darstellungsbereich einzufügen, auf der Hand liegt.
Die fehlende Unterstützung für Medienanfragen ist in der Tat die erste Medienanfrage.
-Bryan Rieger
Trotz der Tatsache, dass Browser für mobile Geräte mit ihren Desktop-Gegenstücken gleichgezogen haben, ist „mobile first“ immer noch die logischste Art, Ihre Stile zu schreiben.
Ich ziehe es vor, in Begriffen zu denken, "zu vermeiden, frühere Stildeklarationen rückgängig zu machen". Ein additiver Ansatz führt fast immer zu einem kompakteren Stylesheet, anstatt Stile zu schreiben und sie 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 einen bestimmten Darstellungsbereich 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 letzteres ist kompakter. Beispielstile, die schamlos von Brad Frosts 7 Gewohnheiten hocheffektiver Medienabfragen kopiert wurden .
Es gibt ein paar seltene Ausnahmen, bei denen „Desktop First“ besser geeignet ist als umgekehrt. Die bemerkenswerteste davon ist, wenn Sie Dinge wie reaktionsschnelle Tabellen tun. 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.
Eine Sache, die Sie auf keinen Fall tun sollten, ist, Ihre responsiven Stile in einzelne CSS-Dateien aufzuteilen und das media-Attribut für das Link-Element zu verwenden. Dies hat die unerwünschte Folge, dass das 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" />
Ich bin der Meinung, dass es egal ist. Es müssen Layouts für alle für das Design relevanten Ansichtsfenster erstellt werden (dies kann nur 2 oder bis zu 5 umfassen, wenn Sie eventuell benötigte kleinere Haltepunkte berücksichtigen!), Die Reihenfolge spielt am Ende keine Rolle. Vielen Designern fehlt die Disziplin, mit einem Desktop-Layout zu beginnen, und finden, dass es einfacher ist, mit einem mobilen Layout zu beginnen.
Wenn Sie mit einem Desktop-Layout beginnen möchten, müssen Sie der Versuchung widerstehen, all diese herrlichen Leerräume mit Unordnung zu füllen, die den Inhalt dieser Seite nicht verbessert. Brauchen Sie wirklich dieses 800 x 600-Stockfoto einer lächelnden Frau, die ein Telefon hält? Es kostet den mobilen Benutzer nur zusätzliches Geld, nutzlosen Fluff herunterzuladen, und ist nur eine visuelle Ablenkung für einen Desktop-Benutzer, an dem er vorbeispringen kann.
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 Mobile-First-Design 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 tun Fahren Sie sicher mit Ihrem Ansatz fort, aber wenn es sich um eine Website handelt, die hauptsächlich auf Telefonen und Tabs angezeigt wird, müssen Sie Ihre Strategie noch einmal überdenken.
Sie können auch erwägen, Ihre Website mit Bootstrap reaktionsschnell zu gestalten (viele andere Optionen sind ebenfalls verfügbar) und Sie können auch Ihre Bilder für eine mobilfreundliche Website optimieren, was auch die Ladezeit verkürzt.
Meiner Meinung nach besteht der Hauptgrund dafür, zuerst mobil zu sein, darin, eine Situation zu vermeiden, in der Ihre mobile Website nicht alles kann, was die Desktop-Version tut. Es gibt unzählige Websites, auf denen ich die Desktop-Version auf meinem Telefon anfordern muss, um etwas zu tun, denn obwohl das Telefon dies kann, tut es ihre mobile Version nicht. Das geht mir auf die Nerven.
Trotzdem denke ich, dass Desktop-First in Ordnung ist, solange Sie später nicht an den mobilen Funktionen sparen, wie es die meisten Unternehmen tun.
Außerdem machen viele Design-Frameworks dies 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 – die meiste Arbeit war bereits erledigt.
Metasomatismus
ccc
RÖL
Zach Saucier
Kontur