Entwicklerentscheidungen für den Aufbau flexibler Komponenten

In der realen Welt unterscheiden sich Inhalte oft erheblich von den ordentlichen, perfekt passenden Inhalten, die in Designs präsentiert werden. Darüber hinaus haben die Benutzer im modernen Web eine ständig wachsende Auswahl an Optionen für den Zugriff auf die von uns erstellten Websites.

In diesem Artikel gehen wir durch den Prozess, ein scheinbar einfaches Design für eine Text- und Medienkomponente zu nehmen und zu entscheiden, wie es am besten in Code übersetzt werden kann, wobei wir die Bedürfnisse von Benutzern und Inhaltsautoren berücksichtigen. Wir werden uns nicht mit der Codierung befassen , sondern mit den Faktoren, die unsere Entwicklungsentscheidungen bestimmen. Wir berücksichtigen bei jedem Schritt die Fragen, die wir (sowohl uns selbst als auch anderen Interessengruppen) stellen müssen.

Ändern unserer Entwicklungsmentalität

Wir können einfach nicht mehr nur für „optimale“ Inhalte oder Browsing-Bedingungen designen und entwickeln. Stattdessen müssen wir die inhärente Flexibilität und Unvorhersehbarkeit des Internets annehmen und widerstandsfähige Komponenten entwickeln. Statische Mockups können nicht jedes Szenario abdecken, daher fallen viele Designentscheidungen den Entwicklern zur Erstellungszeit. Ob Sie es mögen oder nicht, wenn Sie ein UI-Entwickler sind, sind Sie ein Designer – auch wenn Sie sich selbst nicht als einen betrachten!

In meinem Job bei der auf WordPress spezialisierten Webagentur Atomic Smash erstellen wir Websites für Kunden, die maximale Flexibilität von den von uns bereitgestellten Komponenten benötigen, und gleichzeitig sicherzustellen, dass die Website immer noch gut aussieht, egal mit welchen Inhalten sie darauf werfen. Manchmal bedeutet das Interpretieren eines Designs, den Designer zu bitten, seine Ideen weiter auszuarbeiten (oder sie sogar neu zu bewerten). In anderen Fällen bedeutet es, Designentscheidungen spontan zu treffen oder Empfehlungen auf der Grundlage unseres Wissens und unserer Erfahrung zu geben. Wir werden uns einige Fälle ansehen, in denen diese Ansätze in dieser Fallstudie angemessen sein könnten.

Das Design

Wir beginnen mit einem einfachen Design für eine Text- und Medienkomponente – etwas, das ziemlich häufig auf Produkt-Landingpages zu sehen ist. Es besteht aus einem Bild oder Video auf der linken Seite und einer Spalte auf der rechten Seite, die eine Überschrift, einen Textabsatz und einen Call-to-Action-Link enthält. Dieses Design ist für ein (fiktives) Startup, das Menschen hilft, die eine neue Fähigkeit erlernen möchten, einen Tutor zu finden.

Hinweis: Wenn Sie direkt zum Code springen und alle möglichen Lösungen ansehen möchten, die wir für diese Komponente gefunden haben, finden Sie sie in dieser Codepen-Demo.

Layout und Reihenfolge

Der Designer hat festgelegt, dass das Layout jeder anderen Komponente umgedreht werden sollte, sodass das Bild rechts und die Textspalte links ist.

Im mobilen Layout hingegen wird das Bild in jedem Fall über den Textinhalt gestapelt. Angenommen, wir erstellen dieses Layout entweder mit Grid oder Flexbox, könnten wir flex-direction oder die Eigenschaft order , um das Layout für jede zweite Komponente neu zu ordnen:

 .text-and-media:nth-child(even) { flex-direction: row-reverse; }

Denken Sie daran, dass diese zwar den Inhalt visuell neu anordnen, die DOM-Reihenfolge jedoch nicht ändern. Dies bedeutet, dass für eine sehbehinderte Person, die die Website mit einem Screenreader durchsucht, die Reihenfolge des Inhalts möglicherweise nicht logisch erscheint und von links nach rechts nach rechts nach links springt.

Wenn der einzige Inhalt in einer der Spalten ein Bild ist, denke ich persönlich, dass die Verwendung der order -Eigenschaft mehr oder weniger in Ordnung ist. Aber wenn wir zum Beispiel zwei Textspalten hätten, könnte die Neuordnung mit CSS zu einer verwirrenden Erfahrung führen. In diesen Fällen stehen uns einige andere Optionen zur Verfügung. Wir könnten:

1. Bringen Sie unsere Bedenken hinsichtlich der Barrierefreiheit vor und empfehlen Sie, dass für mobile Layouts die visuelle Reihenfolge geändert wird, damit sie der Desktop-Reihenfolge entspricht.
2. Verwenden Sie Javascript, um die Elemente im DOM neu anzuordnen.

Wir müssen auch überlegen, ob wir die Reihenfolge durch den Selektor :nth-child erzwingen oder dem Client erlauben, die Reihenfolge zu kontrollieren (indem wir beispielsweise der Komponente eine Klasse hinzufügen). Die Eignung jeder Option hängt wahrscheinlich vom Projekt ab.

Umgang mit unterschiedlichen Inhaltslängen

Bei der Gestaltung ist das Verhältnis von Textinhalten zum Bild durchaus gefällig. Dadurch kann das Bild ein ideales Seitenverhältnis beibehalten. Aber was soll passieren, wenn der Text länger oder kürzer ist als das, was präsentiert wird? Beschäftigen wir uns zuerst mit ersterem.

Längerer Inhalt

Wir können eine Zeichenbegrenzung für das Textfeld in unserem gewählten CMS festlegen (wenn wir dazu neigen), aber wir sollten zumindest einige Variationen in unserer Komponente zulassen. Wenn wir einen längeren Absatz hinzufügen, könnte sich die gegenüberliegende Medienspalte auf eine von mehreren Arten verhalten:

1. Das Bild oder Video bleibt oben, während unten Platz hinzugefügt wird (Abb. 1).
2. Das Bild oder Video wird zentriert, wodurch oben oder unten Platz hinzugefügt wird (Abb. 2).
3. Die Proportionen des Bildes oder Videos werden mithilfe von object-fit: cover , um Verzerrungen zu vermeiden und sicherzustellen, dass das Bild den verfügbaren Platz ausfüllt. Dies würde bedeuten, dass einige Teile des Bildes abgeschnitten werden (Abb. 3).

Wir haben entschieden, dass Option 3 visuell am ansprechendsten ist und dass die Autoren von Inhalten größtenteils in der Lage sein würden, geeignete Bilder zu beschaffen, bei denen ein kleiner Teil des Ausschnitts akzeptabel wäre. Eine größere Herausforderung stellte es jedoch für Videoinhalte dar, bei denen das Risiko größer ist, dass wichtige Teile abgeschnitten werden könnten. Wir haben uns für eine andere Option entschieden, nämlich eine andere Variation des Designs zu erstellen, bei der das Video sein ursprüngliches Seitenverhältnis beibehält und innerhalb einer maximalen Breite enthalten ist, anstatt am Rand der Seite ausgerichtet zu werden.

Inhaltsautoren könnten diese Option wählen, wenn sie ihren Anforderungen besser entspricht.

Darüber hinaus haben wir uns entschieden, diese Auswahl auf Fälle auszudehnen, in denen ein Bild anstelle eines Videos verwendet wurde. Es bietet dem Kunden eine größere Auswahl an Layoutoptionen, ohne das Design nachteilig zu beeinflussen. Im weiteren Seitenkontext betrachtet, könnte es sogar als Verbesserung angesehen werden, da es interessantere Seiten ermöglicht, wenn mehrere dieser Blöcke auf einer Seite verwendet werden.

Kürzerer Inhalt

Der Umgang mit weniger Inhalt ist etwas einfacher, stellt uns aber dennoch vor einige Probleme. Wie soll sich das Bild verhalten, wenn der Textinhalt kürzer ist? Soll es flacher werden, damit die Gesamthöhe des Bauteils durch den Textinhalt bestimmt wird (Abb. 4)? Oder sollten wir ein minimales Seitenverhältnis festlegen, damit das Bild nicht wie ein Letterbox-Format aussieht, oder dem Bild erlauben, seine natürliche, intrinsische Höhe einzunehmen? In diesem Fall haben wir auch die Überlegung, ob wir den Text mittig oder oben ausrichten (Abb. 5 und 5a).

Überschriftslänge

Vergessen wir nicht, dass wir auch Überschriften unterschiedlicher Länge testen müssen. Im Design sind die Überschriften kurz und knackig und werden selten in eine zweite Zeile umbrochen. Was aber, wenn eine Überschrift mehrere Zeilen lang ist oder der Inhalt viele lange Wörter enthält, was zu einem anderen Textumbruch führt? Dies kann insbesondere in Sprachen wie Deutsch ein Problem darstellen, wo Wörter in der Regel viel länger sind als beispielsweise im Englischen. Lässt die Größe der Überschriftenschrift im Design eine angemessene Zeilenlänge zu, wenn sie in diesem Layout verwendet wird? Sollen lange Wörter beim Umbruch getrennt werden? Dieser Artikel von Ahmad Shadeed behandelt das Problem der Inhaltslänge und enthält einige praktische Tipps, wie man damit in CSS umgehen kann.

Dürfen Inhaltsautoren eine Überschrift ganz weglassen, wo es ihnen passt? Das bringt uns zur nächsten Überlegung.

Auslassen von Inhalten

Wenn Sie diese Komponente so flexibel wie möglich erstellen, müssen Sie sicherstellen, dass Inhaltsautoren bestimmte Felder weglassen können und das Design dennoch ordnungsgemäß aussieht und funktioniert. Es scheint vernünftig, dass der Client den Haupttext, den Link oder sogar die Überschrift weglassen möchte, wenn er diese Komponente in freier Wildbahn verwendet. Wir müssen darauf achten, mit jeder erdenklichen Kombination von Inhalten zu testen, damit wir sicher sein können, dass unsere Komponente unter Belastung nicht bricht. Es empfiehlt sich sicherzustellen, dass keine leeren HTML-Tags gerendert werden, wenn kein Feldinhalt vorhanden ist. Dies hilft uns, unvorhergesehene Layoutfehler zu vermeiden.

Wir können Inhaltsautoren mit „erforderlichen“ Feldern im CMS einschränken, aber vielleicht möchten wir auch Szenarien in Betracht ziehen, in denen ein Kunde das Bild weglassen könnte oder umgekehrt ohne den Textinhalt? Es könnte hilfreich sein, ihnen diese Optionen anzubieten. Hier ist ein Beispiel dafür, wie wir die Komponente in diesen Fällen rendern könnten:

Indem wir den Text etwas mehr einrücken und die Breite des Haupttexts erhöhen, können wir dafür sorgen, dass er sich ausgewogen anfühlt, selbst wenn kein Bild vorhanden ist.

Mehrere Links

Das Weglassen von Inhalten ist ein Szenario. Aber bei Atomic Smash stellten wir fest, dass Kunden häufiger die Option wünschten, der Komponente mehr als einen Link hinzuzufügen. Das stellt uns vor eine weitere Wahl: Wie werden mehrere Links angeordnet? Legen wir sie nebeneinander (Abb. 8) oder stapeln wir sie vertikal (Abb. 8a)?

Wie gehen wir mit Linktiteln unterschiedlicher Länge um? Ein netter Trick besteht darin, die Breite beider Glieder auf die maximale Breite des längsten einzustellen (Abb. 9). (Dieser Artikel behandelt genau das.) Das funktioniert gut für vertikal gestapelte Schaltflächen, während uns eine horizontale Anordnung noch mehr Auswahlmöglichkeiten bietet (Abb. 9a).

Brauchen wir einen sekundären Linkstil, um sie zu unterscheiden? Dies sind alles Fragen, die es zu berücksichtigen gilt.

Möglicherweise müssen wir (im Falle eines einzelnen Links) auch überlegen, ob der anklickbare Bereich des Links tatsächlich die gesamte Komponente umfassen sollte – damit Benutzer überall darauf klicken können, um den Link zu aktivieren. Diese Wahl könnte vielleicht vom weiteren Kontext abhängen. Es ist sicherlich in kartenbasierten Benutzeroberflächen üblich.

Video

Wenn die Komponente eher für Videos als für ein statisches Bild verwendet wird, stellen wir möglicherweise fest, dass das Design einige wichtige Informationen auslässt. Wie wird die Videowiedergabe gesteuert? Beim Schweben? Wird es beim Scrollen automatisch abgespielt? Sollen Steuerelemente für den Benutzer sichtbar sein?

Wenn das Video beim Hover abgespielt wird, müssen wir berücksichtigen, wie der Benutzer eines Geräts ohne Hover-Funktionen auf den Videoinhalt zugreift. Wenn das Video automatisch abgespielt wird, sollten wir alternativ in Betracht ziehen, dies für Benutzer mit einer Vorliebe für reduzierte Bewegung zu verhindern, die möglicherweise an Gleichgewichtsstörungen leiden (oder einfach nur störende Animationen vermeiden möchten). Wir sollten auch allen Benutzern die Möglichkeit bieten, das Video zu stoppen, wenn sie dies wünschen.

Es in Kontext setzen

Ein Problem, wenn wir uns beim Webdesign so stark auf Komponenten konzentrieren, ist, dass wir manchmal vergessen, zu berücksichtigen, wie die von uns erstellten Komponenten im Kontext der gesamten Webseite erscheinen. Wir müssen den Abstand berücksichtigen, sowohl zwischen Komponenten des gleichen Typs als auch in einem Seitenlayout, in dem andere Komponenten eingestreut sind.

Diese Text- und Medienkomponenten sind so konzipiert, dass sie sparsam verwendet werden und einen auffälligen Farbtupfer erzeugen und einen Bruch mit einem ansonsten linearen Layout darstellen. Aber mit WordPress könnte ein Inhaltsautor leicht entscheiden, eine ganze Seite zu erstellen, die nur aus diesen Komponenten besteht. Das könnte am Ende ziemlich langweilig aussehen und überhaupt nicht den Effekt haben, den wir uns erhofft haben!

Während des Erstellungsprozesses haben wir uns entschieden, eine Option hinzuzufügen, um die Hintergrundfarbe wegzulassen. Dadurch können wir die Seite aufteilen und interessanter gestalten:

Wir könnten entweder ein Muster mit :nth-child erzwingen oder ein Feld im CMS hinzufügen, um dem Kunden mehr kreative Kontrolle zu geben.

Obwohl dies nicht Teil des ursprünglichen Designs war, zeigt es, dass eine offene Kommunikationslinie zwischen Designer und Entwickler dazu beitragen kann, bessere Ergebnisse in Bezug auf flexiblere und robustere Designs zu erzielen.

WYSIWYG-Textstile

Bei der Betrachtung des Inhalts müssen wir nicht nur die Textlänge berücksichtigen, sondern auch die tatsächlichen HTML-Elemente, die im Textfeld zulässig sein könnten. Inhaltsautoren möchten möglicherweise mehrere Absätze, Ankerlinks, Listen und mehr zum Haupttext hinzufügen. Bei Atomic Smash stellen wir gerne ein WYSIWYG- (What You See Is What You Get) oder Rich-Text-Feld für diese Bereiche bereit, das viele verschiedene Elemente zulassen kann. Es ist wichtig, mit verschiedenen Arten von Inhalten zu testen und den Stil angemessen zu gestalten – einschließlich des Testens auf ausreichenden Farbkontrast bei allen verwendeten Hintergrundfarben.

Einpacken

Wir haben viele verschiedene Entscheidungen angesprochen, die mit dem Bau dieser scheinbar einfachen Komponente verbunden sind. Vielleicht fallen Ihnen sogar noch ein paar andere ein, die wir hier nicht behandelt haben! Indem wir jeden Aspekt des Designs berücksichtigt haben und wie es im Kontext verwendet werden könnte, haben wir am Ende etwas viel Vielseitigeres gefunden, das hoffentlich zu glücklicheren Kunden führen sollte!

Je mehr in einem Design weggelassen wird, desto mehr Zeit und Aufmerksamkeit wird manchmal von einem Entwickler verlangt. Ich habe unten eine Checkliste mit Dingen zusammengestellt, die beim Erstellen einer Komponente getestet und hinterfragt werden können, was für Sie nützlich sein könnte. Es kann auch für verschiedene Komponenten angepasst werden.

In der Lage zu sein, über die scheinbare Einfachheit hinauszublicken, eine Komponente in ihre Bestandteile zu zerlegen, Schlüsselfragen zu stellen (noch bevor eine Entwicklung stattfindet) und sogar zukünftige Verwendungen in Betracht zu ziehen, sind alles Fähigkeiten, die jedem Entwickler beim Erstellen von Websites gute Dienste leisten werden – und hilft Ihnen, bei Bedarf wesentlich genauere Schätzungen zu erstellen. Eine gute Teamkommunikation und ein starker kollaborativer Prozess sind von unschätzbarem Wert für den Aufbau robuster Websites, aber das Endergebnis macht es wert, in die Pflege dieser Kultur zu investieren. Lassen Sie uns Flexibilität in unsere Design- und Build-Prozesse integrieren.

Die Checkliste

Dinge zum Testen:

1. Zugänglichkeit des Layouts (mobil und Desktop).
2. Bilder mit unterschiedlichen inhärenten Seitenverhältnissen – werden sie angemessen beschnitten?
3. Längerer und kürzerer Fließtext (einschließlich mehrerer Absätze).
4. Längere und kürzere Überschrift (einschließlich verschiedener Wortlängen).
5. Weglassen (verschiedentlich) der Überschrift, des Haupttextes, der Links und des Bildes.
6. Mehrere Links (einschließlich unterschiedlich langer Linktexte).
7. Zugänglichkeit von Videoinhalten.
8. WYSIWYG-Textinhalt (Links, Listen usw. in den Fließtext einfügen).
9. Testen Sie im Kontext – fügen Sie mehrere Komponenten (mit unterschiedlichen Inhaltsoptionen) sowie andere Komponenten hinzu, die in das Seitenlayout gemischt werden.