Ist es wirklich notwendig, zuerst eine Website für Handys zu programmieren?

9

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?

ccc
quelle
2
Ich bin mir nicht sicher, was Ihre Frage ist. Ist es "Soll ich eine mobile Site erstellen" oder "Soll ich zuerst eine mobile Site erstellen"? Ersteres lautet "Ja - 50% der Web-Hits sind mobile Geräte", letzteres "Sie entscheiden, ich bevorzuge Desktop, dann ordnen Sie den Inhalt neu". Nebenbei bemerkt, diese Seite funktioniert sehr gut auf Mobilgeräten. Ich würde vorschlagen, das Menü zu reduzieren - es nimmt den gesamten mobilen Bildschirm ein.
Metasomatismus
@Metasomatism Die Frage basiert auf der Effizienz des Codes und wie er auf verschiedenen Geräten geladen wird. Ich könnte diesen Link versuchen, wenn dies hier nicht an Bedeutung gewinnt (ich möchte nicht doppelt posten). Ich habe die Navigation für Handys geändert. Wenn Sie sich auf die weiße Navigation beziehen, die über den Inhalt faltet, ist dies beabsichtigt. :)
ccc
1
Ich habe mein neuestes Projekt mit dem Ansatz "Mobile First" gestartet, und ich denke, ich werde dies für jedes nächste Projekt tun, bei dem eine mobile Site wünschenswert ist. Indem ich mich einschränke, kann ich mich besser auf die wichtigsten Dinge konzentrieren und nicht an ausgefallene Dinge denken. Ich finde es auch einfacher, zu vergrößern (da ich nur wenige Dinge in einem großen Bereich zu platzieren habe) als zu verkleinern (viele Dinge in einem kleinen Bereich zu platzieren). Aber ich denke, das könnte von Person zu Person unterschiedlich sein.
ROAL
3
Ich denke, es wäre hilfreich für Sie, meine reaktionsschnelle Designgrundierung
Zach Saucier
1
Bei Mobile geht es zunächst darum, sich auf das Wesentliche zu konzentrieren, sowohl bei der Programmierung zur Bereitstellung von Assets als auch beim Design für die Präsentation von Inhalten. Daher ist es eine großartige Möglichkeit, mit dem Design einer reaktionsfähigen Website zu beginnen, da Sie sich auf das Minimum an Inhaltselementen und Layoutoptionen reduziert fühlen und gezwungen sind, Prioritäten zu setzen.
Kontur

Antworten:

24

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.

PieBie
quelle
Ich bin auch farbenblind: p ... Es ist diese Farbe, die zu dem Stil passt, den ich anstrebe. Jede der 4 Seiten wird anders gefärbt. Wenn Sie denken, dass das eine schlechte Idee ist, lassen Sie es mich wissen. :)
ccc
Gern geschehen @MarcusPorter, und vielen Dank, dass Sie meine Antwort angenommen haben. Manchmal hilft es, andere zu fragen, was sie denken, wenn Sie Zweifel haben;) Und es ist sicherlich keine schlechte Idee, jeder Seite ihre eigene Farbe zu geben. Obwohl ich neugierig bin, wie Sie sich für Farben oder Farbkombinationen entscheiden, wenn Sie farbenblind sind ...
PieBie
3
Was? Nein, Sie sollten nicht zwei Websites erstellen. Das ist albern und seit 2005 nicht mehr der richtige Weg. Sie erstellen eine Site, die sich an die Umgebung anpasst. Es heißt Responsive Webdesign
PieBie
1
Ich meinte nicht Features, ich meinte Rüschen, Polster, vielleicht sogar Bilder. Natürlich nie Features. Ein gutes Beispiel wäre das Menü: Sie fügen kein Menü hinzu, wenn die Site größer wird, aber Sie ersetzen eine Schaltfläche durch ein vollständiges Menü.
PieBie
2
@piebie: Tatsächlich ging der Trend dahin, dass inhaltsintensive Websites wieder separate mobile Infrastrukturen erstellen. Überprüfen Sie beispielsweise das AMP-Projekt.
David Mulder
11

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!

Django Reinhardt
quelle
2
Eigentlich ist das nur teilweise richtig. Laut den mobilen Testergebnissen von Tim Kadlec aus dem Jahr 2012 für Bilddownloads werden nur sehr alte mobile Browser (Android 3.0, Blackberry 6, Safari 4 usw.) beide Bilder herunterladen . Jeder andere mobile Browser lädt nur das entsprechende Bild herunter.
Cimmanon
@ Cimmanon Du hast absolut Recht. Danke, dass du mich darauf aufmerksam gemacht hast. Ich habe es gegen ein Beispiel ausgetauscht, bei dem Kadlecs Tests fehlgeschlagen sind.
Django Reinhardt
Laut Link wird der richtige Weg sein, background-imageindividuell auf Desktop und Mobile einzustellen .
hlcs
4

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.

Cimmanon
quelle
"Es ist nicht so wichtig" - natürlich. Und darum sollte es in dieser Frage gehen. Codierung / Programmierung ist hier im Allgemeinen nicht zum Thema, also nicht wirklich relevant (es ist natürlich relevant - sollte aber nicht der Hauptpunkt sein)
Cai
1
Können Sie den Unterschied zwischen einem reaktionsschnellen Design erkennen, bei dem das mobile Layout vor dem Desktop-Layout entworfen wurde? Der Ausdruck "Mobile First" stammt aus dem Codierungsaspekt des Responsive Design. Es spielt keine Rolle, welches Layout zuerst entworfen wird, solange beide fertig sind.
Cimmanon
Andere haben bereits in Antworten darüber gesprochen. Das Entwerfen einer Desktop-Website voller Funktionen ist dann nicht einfach, da sie nicht passen oder auf Mobilgeräten funktionieren. Dies führt häufig zu unangenehmen Elementen / Funktionen. Das Entwerfen für Mobilgeräte und das Hinzufügen von Funktionen für den Desktop ist einfach. So einfach ist das. Aber es ist wirklich wichtig. Vielleicht nicht an die Person, die die Website codiert, sondern an den Designer.
Cai
Sie haben meine Frage nicht beantwortet: Können Sie sagen, welche zuerst gemacht wurde? Die Tatsache, dass viele Leute schlecht darin sind, Desktop-Layouts zu entwerfen und viel Müll auf ihre Seiten zu werfen, hat nichts damit zu tun, welches Layout zuerst entworfen werden sollte. Beides muss getan werden. Welches zuerst getan werden sollte, hängt mehr von den individuellen Vorlieben / Fähigkeiten des Designers ab.
Cimmanon
Ich sage nur, dass es den Designprozess beeinflusst. Nehmen Sie zwei Szenarien: 1. Sie entwerfen eine reaktionsfähige Site, wobei Sie Mobile und Desktop sowie alles dazwischen während des gesamten Prozesses berücksichtigen. Toll. 2. Sie entwerfen eine reine Desktop-Site bis zur endgültigen Genehmigung und Ihr Kunde sagt "Oh, ich brauche sie, um auch auf Mobilgeräten zu arbeiten ..." und er möchte weiterhin x-, y- und z-Funktionen, die nicht funktionieren würden mobil, aber Sie haben das nicht berücksichtigt, als Sie nur für den Desktop entworfen haben ... Welches Szenario ist einfacher?
Cai
2

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.

Wazza
quelle
Sie machen einen guten Punkt in Bezug auf die Zielgruppe. Da meine Zielgruppe kleine Unternehmen usw. sind, stelle ich mir vor, dass meine Bevölkerungsgruppe meine Website mit Desktops anzeigen würde. Ich habe vor einiger Zeit kurz Bootstrap ausprobiert und es schien nicht so, als wäre es für mich, danke für den Vorschlag.
ccc
Ja, ich weiß, dass Frameworks wie Bootstrap den Code und den Aufwand erhöhen, aber es lohnt sich auf jeden Fall, wenn Sie Hilfe benötigen, können Sie mich gerne fragen.
Wazza
Ich habe das Gefühl, ich lerne immer noch CSS, ich hatte Probleme mit dieser einen Seite. Ich werde es in Zukunft sicher noch einmal bei einem meiner Kunden versuchen.
ccc
Wenn Sie sich Ihrer Zielgruppe sicher sind, können Sie diesen Ansatz sehr gut fortsetzen, aber ich möchte Sie warnen, dass es manchmal schwierig ist (wenn Sie kein Framework verwenden), später für kleinere Bildschirme zu verkleinern, wenn Sie viel Inhalt haben und Funktionen auf Ihrer Website. Alles Gute.
Wazza
Ja, du hast Recht. Außerdem hat PieBie einige gute Ratschläge zu diesem Thema gegeben, wenn Sie eine gute Lektüre wünschen.
ccc
-2

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.

Matthew
quelle
Manchmal werden Funktionen absichtlich für Mobilgeräte weggelassen , weil sie nicht in der Lage sind, die Intensität zu bewältigen
Zach Saucier
Sicher, wenn es ein Problem ist, ist es ein Problem. Aber es ist fast nie ein Problem, weil moderne Telefone jetzt ziemlich leistungsfähige Computer sind.
Matthew
Auf mehreren Websites muss ich die Desktop-Version abrufen, da die mobile Version nicht einmal Elemente in der Liste sortiert oder die Registerkarte "Diskussion" ausblendet oder eine bequeme Filterung nicht funktioniert. Das sieht wirklich eher so aus: "Erst Desktop machen und dann - schnell, schnell, Timeline endet gestern - Port auf Handy.
h22
Wenn Sie eine wirklich schwere Site haben, bis zu dem Punkt, an dem sie zu einer Webanwendung wird, ist es möglicherweise besser, sie auf eine App zu portieren, als zu versuchen, alles auf einer mobilen Site zu stopfen. Facebook hat beispielsweise seine Desktop-Site in zwei Apps aufgeteilt: Facebook und Messenger.
PieBie
Obwohl Facebook ziemlich gut darin war, alles nur in der mobilen Web-App verfügbar zu machen, können Sie dort auch ohne Messenger Nachrichten senden.
Matthew