Teil des Jobs eines Front-End-Entwicklers ist die Anwendung verschiedener Techniken und Technologien, um die gewünschte UI und UX zu realisieren. Vielleicht arbeitest du mit einem Designteam und implementierst deren Entwürfe. Ich weiß, wenn ich ein Design sehe (verdammt, selbst wenn ich weiß, dass ich es nicht bauen werde), beginnt mein Front-End-Gehirn, alle möglichen Dinge auszulösen, von denen ich weiß, dass sie mit der Aufgabe zusammenhängen.
Schauen wir uns an, was ich meine.
Schauen Sie sich diese entzückende Dribbble-Aufnahme für eine Rezept-Website von Riko Sapto Dimo an.
Es ist ein sehr ansprechendes Design, und es gibt vieles zu bedenken aus der Perspektive des Front-End-Webdesigns und der Entwicklung.
Wir werden uns hauptsächlich mit Designmuster-Entscheidungen und HTML/CSS-Technologie-Entscheidungen befassen. Es gibt noch viel mehr im Job eines Front-End-Entwicklers. Barrierefreiheit! Leistung! Semantik! Designsysteme! Alles wichtige Dinge.
Mehrzeiliger gepolsterter Text
Ah ja, dieser Look, bei dem Text einen Hintergrund hat, der der Länge der Textzeilen folgt. Wir haben das früher Multi-Line Padded Text genannt und uns verschiedene Wege angesehen, dies zu tun. Der einfachste und modernste Weg ist mit box-decoration-break.
Sehen Sie den Pen Multiline Padding with box-decoration-break von Chris Coyier (@chriscoyier) auf CodePen.
Flexbox-Header
Dieser Headerbereich schreit förmlich nach Flexbox. Es ist ein Layout in einer Richtung mit Elementen unterschiedlicher Größe und unterschiedlichem Abstand dazwischen. Dies in Flexbox auszudrücken, wird einfacher sein als jede andere Methode und erfordert keine feste Größenbestimmung oder magische Zahlen – ganz zu schweigen von der Flexibilität!
Grid-Layout
Das gesamte Seitenlayout hier könnte schön mit CSS Grid ausgedrückt werden. Denken Sie daran, dass Flexbox und Grid nicht im Widerspruch zueinander stehen. Ein Element, das in einer Grid-Zelle platziert ist, kann Flexbox sein! Wie der obige Header macht das Sinn. Der Hauptinhaltsbereich und der Footer als Grid-Zellen könnten wahrscheinlich beides sein.
Vertikale Schrift
Nicht die offensichtlichste Sache, die man umsetzen kann! Ihre beste Wahl sind Schreibmodi. Jen Simmons hat darüber geschrieben, und hier ist eine Demo
Sehen Sie den Pen Writing Mode Demo — Headline von Jen Simmons (@jensimmons) auf CodePen.
Zeilenbegrenzung
Hier scheint eine Kürzung stattzufinden. Generell würden wir aus Leistungssicht wahrscheinlich wollen, dass die gesendeten Daten nur einige Zeilen lang sind. Aber auch das Frontend kann hier helfen, wenn es sein muss. Hier werden drei Textzeilen mit Auslassungspunkten am Ende angezeigt. Vielleicht muss das Design wirklich, dass der Text immer maximal drei Zeilen lang ist. Das nennt man Zeilenbegrenzung.
Sehen Sie den Pen Line Clampin’ von Chris Coyier (@chriscoyier) auf CodePen.
Benutzerdefinierte Schriftarten
Wie die meisten Websites heutzutage ist dieses Design mit benutzerdefinierten Webfonts überzogen. Bei einem so markanten Design wäre ich sehr vorsichtig mit meiner Schriftart-Lade-Technik. Mein Gefühl sagt mir, dass ich FOIT mehr als FOUT bevorzugen würde, und idealerweise würde ich diese Schriftartdatei so hart wie möglich cachen, damit wir beides so oft wie möglich vermeiden.
Text über Bildern
Der Text „Dinner Menu“ liegt direkt über einigen geschäftigen fotografischen Bildern darunter. Er ist trotzdem lesbar, hauptsächlich wegen des hellen Weiß des Textes über einem abgedunkelten Bild. Wir haben dies in der Vergangenheit im Detail behandelt. Weißer Text über einem abgedunkelten Bild ist im Allgemeinen die beste Wahl, und zwar so abgedunkelt, dass fast jedes Bild in Ordnung ist. Es gibt jedoch auch andere Optionen, wie z. B. Verläufe und Unschärfe (was auch im Footer verwendet wird)
Sehen Sie den Pen ByKwaq von Chris Coyier (@chriscoyier) auf CodePen.
SVG-Icons / Sternebewertungen
Es gibt eine Reihe von einfachen Vektor-Icons, die über das Design verteilt sind. Das sind sichere Werte für ein SVG-Icon-System. Dies ist meine aktuelle Empfehlung für die Herangehensweise an ein SVG-Icon-System. Inline das SVG. Einfach und leistungsstark.
Diese Sternebewertungen sind wahrscheinlich auch im SVG-Bereich. Hier ist eine gute Sammlung von Optionen. Die fortschrittliche Verbesserung von Radio-Buttons scheint immer eine kluge Vorgehensweise zu sein.
Sehen Sie den Pen CSS: Radio Input Stars von Jake Albaugh (@jakealbaugh) auf CodePen.
Hamburger
Es mag auf einem so großen Bildschirm wie diesem etwas überflüssig erscheinen, besonders da bereits eine Navigation sichtbar ist. Aber hey, es ist heutzutage schwer zu vermeiden und es gibt etwas zu sagen über das Trainieren von Benutzern, wo die Seitennavigation stattfinden kann, egal wo sie auf die Seite schauen.
Hier ist eine Sammlung dieser Art von Menüs.
Sehen Sie den Pen Hamburger menu flip with text change von Eric Grucza (@egrucza) auf CodePen.
Gibt es noch etwas im Design, das ich nicht erwähnt habe und das Ihnen sofort in den Sinn kommt?
Chris, es gibt ein paar zusätzliche Dinge, die ich gesehen habe und die nützlich sein könnten
CSS mask-image ist nützlich, wenn Sie ein Hintergrundbild haben, das zu hell ist und Sie es abdunkeln möchten, ohne zum Designer zurückkehren zu müssen, um das Bild abzudunkeln
Komponenten! Nur ein allgemeines Denken (jenseits des Flexbox-Headers und CSS Grid) darüber, wie man Dinge „teilt“. Wiederverwendbare Dinge wie die runden Bildavatare, das Sternensystem usw.
Farb- und Schriftsysteme. Nicht nur, wie Sie diese laden werden, sondern wie Sie Schattierungen von Blau erhalten, eine Hierarchie für die Skalierung der Schriftarten usw., damit wir diese Schriftsysteme weiterhin konsistent und nützlich auf anderen Teilen der Website halten können.
Mein erster Gedanke ... wo ist das mobile Design?
Das war auch mein Gedanke. Mein Gehirn begann, die vielen Wege zu dekonstruieren, wie dies zu Mobilgeräten „zusammenklappen“ könnte.
Auch mein erster Gedanke. Und wie ich CSS zwischen mehreren Stylesheets aufteilen/teilen/laden würde.
Eine Artikelreihe, die Designs von Dribbble (oder anderen) nimmt und sie tatsächlich codiert, wäre wirklich schön. Das Auslegen der zugrunde liegenden Technik, um diese Dinge zu realisieren, ist cool, aber echter Code in Flexbox und CSS Grid, um diese Dinge tatsächlich als Code zum Leben zu erwecken, wäre großartig und könnte als exzellentes Tutorial dienen. Ich weiß, dass ich persönlich nicht gut mit theoretischen Beispielen umgehen kann, aber wenn ich sehe, wie etwas praktisch angewendet wird, klickt es bei mir.
Ich freue mich, sagen zu können, dass ich gerade den ersten einer Reihe von Artikeln veröffentlicht habe, in denen ich die Codierung eines Dribbble-Designs untersuche – https://medium.com/p/dribbble-designs-in-code-part-1-venue-landing-page-bc5b7f22b986
Es ist viel einfacher als das hier beschriebene, da es mein erstes ist :) Feedback ist sehr willkommen!
Was mir in den Sinn kommt, ist: „Ich kann das nicht alles tun – ich muss IE10 unterstützen!“ Also muss ich nach älteren Wegen suchen, Dinge zu tun.
Ich kann box-decoration-break nicht verwenden, aber eine box-shadow-Methode scheint zu funktionieren.
Die Bildunschärfe scheint hässlich, aber möglich zu sein. https://www.jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/
Und der Rest scheint kompatibel zu sein. Ich bin so froh, dass ich IE7 nicht mehr unterstützen muss.
Toller Artikel wie immer, Chris! :)
Ein kurzer Kommentar zum Flexbox-Header. Ich würde argumentieren, dass Sie mit CSS Grid das gleiche Maß an Flexibilität haben, auch wenn es kein mehrdimensionales Layout erfordert.
Das ist großartig!
Können Sie erklären, was der Code tut, insbesondere grid: auto / auto-flow auto;
Ich habe versucht nachzuschauen, was die Kombination auf grid: bedeutet, aber ich bin mir nicht sicher ... also wäre ich dankbar für einen Hinweis. =)
@Michael: „grid:“ ist nur eine Kurzform für das Grid-Layout (d. h. grid-template-rows/columns/area/auto-flow usw.) – hier setzt es speziell grid-auto-flow auf column (die rechte Seite des Schrägstrichs), wodurch die gewünschte horizontale Ausrichtung der Header-Elemente erzielt wird.
Weitere Details darüber, warum Sie diese Kurzform verwenden möchten, finden Sie in Rachel Andrews brillanter Artikel hier: https://www.smashingmagazine.com/2017/10/naming-things-css-grid-layout/#the-grid-shorthand-the-explicit-and-implicit-grid
Ich würde gerne den Flex-Code für diesen Header sehen. Wie machen Sie die unterschiedlichen Breiten und Abstände? Ich habe Flex noch nicht ganz verstanden…
Tom, für die obere Flexbox würden Sie justify-content: space-between und align-items: center verwenden. Die meisten Elemente würden direkt im Hauptnavigations-Div als Kinder platziert. Sie sehen jedoch, dass die Navigationslinks insbesondere gruppiert sind. Sie möchten diese in ein anderes Div legen, das entweder display: inline ist oder eine verschachtelte Flexbox verwendet, je nachdem. Sie können die anfänglichen Breiten der Elemente mit dem basis-Parameter festlegen, aber ich finde, es ist am besten, die Standardwerte so oft wie möglich zu verwenden und nicht zu verkomplizieren. Navigationsschaltflächen wie diese hätten normalerweise einen Standard-Padding, der Ihnen das richtige Layout verleiht. Sie möchten, dass justify-content: space-between die Arbeit für Sie erledigt.
Dasselbe gilt für die Elemente auf der rechten Seite. Sie würden sie auf ähnliche Weise gruppieren.
Ich denke, es wäre tatsächlich viel einfacher mit Grid.
Ja, es ist ein Layout in einer Richtung, aber Flex gibt Ihnen nicht die Kontrolle über die Abstände, die Grid Ihnen geben kann.
Ich habe Flex ein wenig verwendet – in einem aktuellen Projekt – aber die Abstände waren gleichmäßig. Es sind die unterschiedlichen Breiten der Dinge, die mich verwirren. Während der kurzen Zeit, in der ich mit flex-basis herumgespielt habe, um Breiten wie diese zu steuern, hat es buchstäblich nichts bewirkt. Nichts hat sich geändert. Ich bin immer noch dabei, das und Grid zu lernen.
Grid ist eine aufregende neue Komponente, aber es ist nicht einfacher, ein Grid für den in diesem Artikel gezeigten Header einzurichten. Stellen Sie drei Eigenschaften ein (display: flex, justify-content: space-between und align-items: center) und Sie sind fertig. Zusätzlich gibt es in IE nur etwa 25% Unterstützung für Grid. Die IE-Ubiquität sinkt auf fast 12%, aber das ist global und national. Wenn Sie sich an Unternehmen, Banken oder Fintech wenden, werden Sie leider höhere IE-Nutzungsstatistiken finden.
Ein weiteres Problem könnte darin bestehen, wie das große Hintergrundbild gehandhabt wird. Da ein großer Teil eine solide Farbe (oder Textur) zu sein scheint, ist es vielleicht gut geeignet für mehrere Hintergrundregeln. Ich bin auch auf Situationen gestoßen, in denen der Kunde nicht möchte, dass der Haupttextblock (in diesem Fall links) jemals über den Hintergrundbildteil gelegt wird – das zu lösen wäre eine größere Herausforderung – vielleicht mit shape-outside. Gute Dinge hier (wie immer). Danke, Chris!
Ich habe festgestellt, dass Radios eine gute Wahl für die Auswahl von Bewertungen sind, aber nicht wirklich für die Anzeige von Bewertungen, wenn man mit partiellen Werten zu tun hat. Dafür habe ich eine gute Ersetzung gefunden.
Das ist auch Teil dessen, was ich jedes Mal tue, wenn ich ein Design erhalte, ich beginne, die Techniken, modernen Spezifikationen und Browser zu durchdenken, die uns angeboten werden.
Was ich aus diesem Artikel gelernt habe, ist, dass wir im Jahr 2018 immer noch eine Menge Hacks verwenden, um Dinge zum Laufen zu bringen.
Diese Radiobuttons für das Sternebewertungssystem sind nicht zugänglich :/
Die Labels enthalten keinen Text. Sie könnten aria-label=“# Sterne“ auf den Input-Elementen hinzufügen, um das zu umgehen.
Ich frage mich, wie sie den verschwommenen Hintergrund im Footer gemacht haben? Das ist eine Sache, die ich noch nie gelöst habe.
backdrop-filter: blur();
-webkit-backdrop-filter: blur();
Einer meiner ersten Gedanken war: „Welche Elemente kann ich wiederverwenden und wie?“ Ich habe sofort die Sternebewertungen bemerkt, zusammen mit der durchschnittlichen Bewertung und der Anzahl der Rezensionen; die runden Thumbnails und ihre Platzierung mit einem Textblock (Profil im Header, Rezepte im Footer, „versucht, das zu kochen“ im Hauptinhalt). Ich nähere mich jeder Website gerne als UI und implementiere sie in Form von kleineren, wiederverwendbaren, variablen Elementen.