Ein gutes responsives Webdesign ist von Natur aus für diejenigen, die Inhalte online konsumieren, unbemerkt. Wenn jemand nach einer neuen Website fragt, ist ihm das Konzept oft nicht bewusst, obwohl er es täglich erlebt. Und dennoch ist das responsive Website-Design mittlerweile in der gesamten Branche als Standard anerkannt.
Die Erstellung reaktionsfähiger Websites hat unsere Prozesse verändert, angefangen beim Erstellen von Nachbildungen kompletter Seiten bis hin zum Erstellen von Bibliotheken wiederverwendbarer Komponenten und Layouts.
Layout ist inhaltsorientiert und Stile sind markengesteuert
Kürzlich wurden wir von einem bestehenden Kunden angesprochen, um seine Website entsprechend neu zu gestalten. Wir hatten vorher mit ihnen in einem steifen Wasserfallverfahren gearbeitet. Durch den Übergang zu einem agilen Workflow konnten wir Änderungen an jedem Punkt des Projekts vornehmen.
Während des gesamten Prozesses haben wir uns an die Philosophie gehalten, dass das Layout inhaltlich und die Marken markenorientiert sind.
Spezifikationsdokumente eignen sich hervorragend zum Auflisten aller Funktionen, die eine Site benötigt. Aber ist es wirklich was der Kunde braucht? Es ist sehr schwierig, diese Funktionen an Ort und Stelle zu visualisieren. Das Ergebnis ist, dass Spezifikationsdokumente oft zu aufgeblähten Wunschlisten werden. Dies hilft dem Kunden, den Designern oder der endgültigen Website nicht.
Anstelle von Spezifikationsdokumenten haben wir uns für die Verwendung von Drahtrahmen entschieden. Der erste Schritt des Projekts bestand in der Erstellung von Drahtbildern für jede Seite. Das hört sich vielleicht nach Overkill an, aber die Drahtrahmen führten zu frühen Diskussionen über den Inhalt und die Funktionen für jede Seite. Wir haben festgestellt, dass Features, die wir nie zuvor in Betracht gezogen haben, hinzugefügt wurden, während viele entfernt wurden.
Wireframes gaben uns eine klare, visuelle Darstellung, wie Inhalt und Funktionalität auf jeder Seite priorisiert werden sollten. Diese Drahtrahmen wurden dann zu einem Bezugspunkt und ersetzten ein Spezifikationsdokument.
Schlüssel zum Erfolg: Die Herstellung von Drahtrahmen anstelle von Spezifikationsdokumenten konzentriert sich auf die Kernfunktionen und die Bedeutung von Inhalten.
Die Überprüfung der Drahtrahmen ermöglicht es uns, eine Liste aller gängigen Komponenten zu erstellen. Auf einer einzigen Seite gibt es Dutzende von kleinen Abschnitten auf jeder Seite, die sich sehr ähneln. Diese Komponenten können in einer erschöpfenden Liste zusammengestellt werden, die später verwendet wird.
Diese Phase hat drei Hauptvorteile:
Schlüssel zum Erfolg: Es ist wichtig, zu planen, wie die Front-End-Entwicklung eines Projekts angegangen werden soll, um eine wartungsfreundliche, schlanke Codebasis zu schaffen.
Musterbibliotheken sind eine Sammlung gängiger Elemente, die auf einer Website verwendet werden. Durch die Fokussierung der Front-End-Entwicklung auf Komponenten, die nicht von Seiten abhängig sind, können wir den Code-Overhead reduzieren und die Konsistenz verbessern.
Mit der Liste der Komponenten, die wir während der Auditing-Phase zusammengestellt haben, können wir unser Sass in einer überschaubaren Sammlung von Dateien strukturieren.
Wir haben Pattern-Bibliotheken für einige Projekte verwendet, hatten aber immer Probleme mit Namenskonventionen, insbesondere mit der Ordnerstruktur: Wo setzt du deine Styles für diesen Musik-Player, in Komponenten oder in Teilbereichen?
Zuvor hatten wir Terminologien wie Teiltabellen und Komponenten verwendet , um unsere Sass-Dateien zu organisieren. Während diese als völlig legitime Namenskonventionen erscheinen, sind sie offen für Interpretationen. Wenn mehrere Entwickler an einem Projekt arbeiten, führt das Offenlegen der Codebasis für die Interpretation zu unorganisiertem CSS.
BEM (Block, Element, Modifier) liefert uns eine gemeinsame Konvention und schafft ein Verständnis zwischen Front-End-Entwicklern. Der alte Weg war einzelnen Entwicklern, Klassennamen zu finden, die alle zu hoch waren, um daraus eine Bedeutung abzuleiten. Zum Glück hatten wir Glück zu sehen Brad Frost sprich über seine Musterbibliothek am Upfront-Konferenz in Manchester. Pattern Lab liefert eine Terminologie aus der Chemie, um die Komponenten zu beschreiben, aus denen die Bibliothek besteht. Die Verwendung von Atomen, Molekülen und Organismen zur Beschreibung der Unterschiede zwischen Komponenten auf einer Seite hilft Entwicklern, das Projekt zu verstehen, das Konzept zu erklären.
Atomic Design ist für Benutzeroberflächen: http://t.co/eEZSYeK5VF Sie können atomares Design auf jede Benutzeroberfläche anwenden, wie Instagram pic.twitter.com/BrztgtRoGU
- Brad Frost (@brad_frost) 10. Juli 2015
In der Natur sind Atome die kleinste Bezeichnung (außer wir tauchen in Quarks und Elektronen auf). In der Webentwicklung sind Atome die grundlegendsten Elemente von HTML. Im Grunde genommen machen sie nicht viel alleine. Dazu gehören Überschriften, Absätze, Eingaben, Schaltflächen, Listen ... Sie bekommen die Idee.
Dies sind die nächsten Schichten. In der Chemie bestehen Moleküle aus Atomen, und das gilt auch für die Struktur von CSS. Moleküle sind Komponenten auf der Website, die Atome verwenden, um sie zu bilden.
Ein gutes Beispiel für ein Molekül ist ein Suchfeld. Dieser enthält 3 Atome: ein Label, eine Eingabe und einen Button. Die Molekülschicht beginnt einige der Elemente zu bilden, die wir auf der Website verwenden können. Es ist wichtig, all diese Moleküle skalierbar zu machen. Sie sollten so konzipiert sein, dass sie überall auf der Website verwendet werden können. Unser oberstes Ziel ist es, CSS so flexibel und wiederverwendbar wie möglich zu machen.
Wie der Name schon sagt, sind Organismen Gruppen von Molekülen. Einige Beispiele hierfür sind eine Kopfzeile, Fußzeile oder eine Produktliste.
Wenn wir das Beispiel eines Headers nehmen, würde dies ein Logo, Suche und Navigation beinhalten. Diese wurden alle als Moleküle erstellt und zu einem Kopforganismus kombiniert.
Hier endet die biochemische Analogie. Wie Brad sagt, "lernen Sie eine Sprache, die für die Kunden und den endgültigen Output mehr Sinn macht" . Vorlagen sind der Leim einer Website. Diese kombinieren alle von uns erstellten Organismen zu einem Layout, das auf eine Seite der Website angewendet werden kann.
Ein Beispiel könnte ein Blogeintrag sein. Diese Vorlage enthält eine Kopf- und Fußzeile, eine Liste mit Blogelementen und eine Seitenleiste. Vorlagen sind im Allgemeinen strukturell und enthalten nur das Layout.
Der letzte Abschnitt ist Seiten. Hier können Sie die Vorlagen mit echten Daten testen. Seiten sind spezifische Instanzen einer Vorlage. Dieser Teil ist wichtig, weil er zeigt, wie erfolgreich die Atome, Moleküle, Organismen und Schablonen sind.
Es ist unvermeidlich, dass beim Aufbau der Website bestimmte Szenarien übersehen werden. Das klassische Beispiel sind lange Titel oder Catering für verschiedene Währungen und Sprachen.
Schlüssel zum Mitnehmen: Namenskonventionen sind wichtig. Layering CSS erstellt eine saubere Codebasis, um so klein wie möglich zu arbeiten.
Muster zu entwerfen ist schwer. Sie können ein isoliertes Muster wie eine Nachricht nicht entwerfen und erwarten, dass es mit dem Rest der Seite übereinstimmt. Die Art und Weise, wie wir Websites erstellen und wie wir sie gestalten, ist unterschiedlich.
Die Entwürfe werden sich wahrscheinlich ändern, unabhängig davon, ob wir eine Freigabe erhalten ... Die Unterzeichnung wurde zu einem irrelevanten Schritt in dem Prozess, der nur Druck auf beide Seiten ausübte
Wir haben Photoshop verwendet, um Modelle der Drahtrahmen mit diesen gestylten Komponenten zu erstellen. Sobald wir mit dem Look and Feel der Designs zufrieden waren, entschieden wir uns, jede Komponente zu isolieren. So konnten wir sicherstellen, dass jede Komponente flexibel genug war, um auf der Website zu funktionieren.
Wir waren uns sehr bewusst, dass wir keine Designarbeit bekommen würden. Die Design-Abzeichnung schafft eine Barriere, bei der sich der Designer unter Druck gesetzt fühlt, etwas zu schaffen, das in Stein gemeißelt wird. Designs werden sich wahrscheinlich ändern, unabhängig davon, ob wir eine Freigabe erhalten oder nicht. Im Allgemeinen sind wir bereit, Änderungen an jedem Punkt der Projekt-Timeline zu berücksichtigen. Die Unterzeichnung wurde zu einem irrelevanten Schritt in dem Prozess, der beide Seiten nur zum Nachteil der Beziehung unter Druck setzte.
Es ist wichtig zu wissen, wann man von Photoshop zu Code wechseln muss. Dieser Schritt ist viel früher als wir es aus zwei Gründen gewohnt waren:
Anstatt zusätzliche Zeit in Photoshop zu investieren, haben wir uns entschieden, die Zeit in Code zu investieren. Wenn wir irgendetwas perfektionieren sollten, sollte es der Code sein, der tatsächlich von allen Benutzern der Website verwendet und gesehen wird. Für uns war Photoshop ein Werkzeug, um einen Designstil zu erstellen, der auf der gesamten Website verwendet werden kann.
Design ist viel mehr über die Zusammenarbeit zwischen allen im Team. Mockups waren immer noch ein sehr wichtiger Teil des Prozesses und halfen dem Kunden, sich vorzustellen, wie die Site aussehen würde. Wenn wir alle mit der allgemeinen Ausrichtung des Designs zufrieden wären, würden wir es nach Code verschieben. Wir haben selten Zeit damit verbracht, vor- und zurückzugehen, um Photoshop-Dokumente wieder gut zu machen.
Schlüssel zum Mitnehmen: Photoshop ist ein großartiges Werkzeug zum Erstellen von Design-Konzepten. Es ist wichtig, so schnell wie möglich zum Code zu wechseln. Vervollkommnen Sie es im Code, nicht Photoshop.
Das Schöne an diesem Workflow ist, dass es so viele Orte gibt, an denen man die Website überprüfen und verbessern kann.
Es ist wichtig zu beachten, dass dies lose Schritte in unserem Projektprozess sind. Wenn wir während des Projekts etwas Neues brauchen, behandeln wir es im Allgemeinen als eigenständige, modulare Komponente, die in die Website eingefügt werden und das Designdesign der Website übernehmen kann.
Jeder dieser Schritte bietet einen Punkt, an dem wir unsere bisherige Arbeit überprüfen können. Es ermöglicht auch eine neue Sicht, um die Dinge aus einer anderen Perspektive zu betrachten.
Während jeder dieser Phasen können wir feststellen, dass einige Teile nicht so gut funktionieren wie erwartet. Das ist in Ordnung. In der Tat ist es gut. Eine schlechte Usability frühzeitig zu erkennen ist der Schlüssel für eine erfolgreiche Website. Wenn Sie diese Teile der Website zurückverfolgen und drahtlos gestalten, wird das Projekt besser, wenn es online geht.
Schlüssel zum Mitnehmen: Haben Sie keine Angst, um zum Anfang zurückzukehren, wenn etwas verbessert werden muss. Fangen Sie diese früh an, wird das Projekt besser, wenn es live geht.
Wir haben tagelang zusammengearbeitet, um sicherzustellen, dass jeder Teil der Website zu einem hohen Standard fertiggestellt wurde. Wir haben so viele Szenarien wie möglich getestet und sichergestellt, dass das Browsen konsistent war.
Sobald die Daten auf der Website sind, können wir die Website vollständig testen. Es ist oft zu einfach, ein Projekt live zu setzen, ohne es vollständig testen zu müssen. Wir können die Geschwindigkeit, die Leichtigkeit der Navigation und vor allem den Einkaufsstrom überprüfen.
Jeder erwähnt Apple als Perfektionisten, aber ich bin mir sicher, dass ihre ersten Versuche alles andere als perfekt waren. Es braucht Zeit und Hingabe, um diese letzten Verbesserungen zu machen, um uns die Produkte zu geben, die wir heute lieben. Mit unserem Gerätelabor, das die meisten gängigen Geräte und Plattformen umfasst, konnten wir sicherstellen, dass die Erfahrung auf so vielen der neuesten Plattformen und Bildschirmgrößen wie möglich optimiert wurde.
Von jedem Projekt zu lernen, ist wichtig, um Prozesse, die zu besseren Websites führen, kontinuierlich zu verbessern.
Bei diesem Projekt entstand eine eigene Musterbibliothek, die die Konsistenz zwischen den Projekten fördert. Wenn wir in einer Agentur arbeiten, haben wir möglicherweise Dutzende von Projekten gleichzeitig in der Entwicklung. Die Fähigkeit, an jedem Projekt zu arbeiten, ist wichtig.
Die Schaffung einer Basis, an der wir alle arbeiten können, wird dazu beitragen, dieses Ziel zu erreichen.
Die Leistung der Website wurde erst gegen Ende des Projekts berücksichtigt. Eine erfolgreiche responsive Website muss schlank und schnell sein. Die große Auswahl an Geräten und ihre Fähigkeiten variieren massiv von brandneuen Mac-Computern zu alten Smartphones. Beim Erstellen einer medienreichen Website kann es sehr schwierig sein, die Leistung zu verwalten, insbesondere wenn man sie nachträglich verbessert.
Auf der Upfront Conference in Manchester haben wir gesehen Yesenia Pérez Cruz Sprechen Sie über die Berücksichtigung von Leistung in jeder Phase eines Projekts, einschließlich Design. Im Nachhinein hätten wir das umsetzen sollen. Als Team aus mehreren Designern, Entwicklern und Front-End-Entwicklern sollte die Verwaltung der Gesamtgröße und -leistung (insbesondere der wahrgenommenen Leistung) eine größere Priorität haben.
Alles auf einer Seite hat Kosten für die Leistung. Durch die Priorisierung der wichtigen Informationen wird sichergestellt, dass die Website nicht nur schnell, sondern auch für weitere Geräte zugänglich ist. Bei einigen älteren Geräten haben wir festgestellt, dass auf der Website nicht nur der Browser, sondern das gesamte Gerät abgestürzt ist. Der Versuch, die Website rückwirkend zu beschleunigen, bedeutete, dass wir die Website nicht so schnell machen konnten, wie es hätte sein können.
Beim nächsten Mal werden wir sicherstellen, dass die Leistung in jede Phase des Prozesses integriert wird, also ist es kein nachträglicher Einfall.