Design v17

Wir haben am 1. Januar ein neues Website-Design eingeführt! Dies ist die 17. Version von CSS-Tricks, wenn Sie das glauben können. Die Versionen entwickeln sich nach dem anfänglichen Start in der Regel erheblich weiter, aber wir archivieren Screenshots auf dieser Design-History-Seite. Wie ich in unserem Dankesbeitrag für 2018 gesagt habe

Dies ist mit Abstand die meiste Zeit, Mühe und das meiste Geld, das seit dem großen v10-Design in ein Redesign geflossen ist. Es gibt viele ästhetische Änderungen, aber auch eine ganze Menge UX-Arbeit, Ausrichtung auf Geschäftsziele, Workflow-Optimierung und Backend-Entwicklungsarbeit, die damit verbunden waren.

Dies ist eine große Sache! Die Resonanz war bisher ziemlich gut, aber bitte beachten Sie, dass wir es in den ersten Tagen verfeinern und viele Fehler beheben werden.

Hier sind einige Notizen darüber, wer beteiligt war, wie es dazu kam und worauf Sie achten sollten.

Kylie leitete dieses Projekt

Kylie Timpani war die leitende Designerin und im Grunde die gesamte Projektleiterin dafür.

Ich habe sie im April 2017 zum ersten Mal kontaktiert, wir haben im Mai gesprochen und im Juni mit der Arbeit begonnen. Aus meiner Sicht war dies ein ziemlich lockerer Prozess, da ich keine besonderen Fristen und ziemlich lockere Ziele hatte. Lassen Sie uns eine attraktive Seite erstellen, die in jeder Hinsicht besser ist als die, die wir jetzt haben.

Kylie war super organisiert und hatte einen sehr durchdachten Prozess für jeden Aspekt dieses Projekts. Allein im ersten Zeitblock, den Kylie für dieses Projekt eingeplant hatte, hat sie

• Eine vollständige Inhaltsinventur durchgeführt
• Analysedaten ausgewertet, um Nutzer, Traffic und Nutzung auf hoher Ebene zu verstehen
• Eine Leserumfrage erstellt, verteilt und analysiert, um die Leser besser zu verstehen und spezifische Fragen zu beantworten, die sie an sie hatte
• Mit allen Mitarbeitern von CSS-Tricks gesprochen, um deren Rollen, Arbeitsabläufe und Ideen zu verstehen

Kylie ist offensichtlich nicht die Art von Designerin, die einfach ein Designtool öffnet und anfängt zu kritzeln. So sehr sie auch eine großartige visuelle Designerin ist, die Arbeit war hochgradig informiert. Sie sprach weiter mit unserer Werbeagentur, identifizierte klar die aktuellen Stärken und Schwächen der Website und machte leichtes Wireframing.

Ich benutze Figma für visuelle Designarbeiten, und Kylie hat das gerne als Designtool verwendet. Das war gut, da wir beide Team-Zugriff hatten und es gemeinsam nutzen konnten. Für mich war es hauptsächlich nützlich, alles sehen und referenzieren zu können und Notizen zu den Designs zu machen.

Wir haben auch Asana verwendet, um zu verfolgen, woran gerade gearbeitet wurde, und letztendlich als Ort, um Fehler und Stellen zu verfolgen, die bei der Implementierung des Designs Aufmerksamkeit erforderten.

Vielen Dank, Kylie, für all deine hervorragende Arbeit an diesem Projekt! Wenn etwas an der Website nicht ganz stimmt oder fehlerhaft ist, liegt das an meiner schlechten Implementierung. Und viel Glück! ⤵️

⚡️ So! Apropos lebensverändernde Neuigkeiten… in nur wenigen Wochen ziehe ich nach San Francisco! Ich freue mich SO SEHR, mich @nrrrdcore und ihrem wirklich unglaublichen Team bei Apple anzuschließen! 👩🏻‍💻✨

— Kylie Timpani (@kylietimpani) 7. Januar 2019

Design-Sachen

Ich überlasse es Ihnen, das Design selbst zu erkunden, um all die kleinen Details zu finden, die wir eingebaut haben, aber ich werde ein paar davon hervorheben, bei denen es technische Details gibt, die Ihnen gefallen könnten.

Orange-zu-Pink

Offensichtlich haben wir bei diesem Design alles auf Dark Mode gesetzt. Das hat nichts mit der neuen Media Query zu tun, obwohl das mich daran erinnert, dass wir vielleicht Alternativen für diejenigen in Betracht ziehen sollten, die explizit prefers-color-scheme: light; eingestellt haben.

Die Marken-/Akzent-/Aktionsfarben sind Orange und Pink, was gegen die Dunkelheit recht auffällig aussieht, aber auch auf hellen Hintergründen funktioniert.

Ich habe ein schnelles kleines Sass @mixin erstellt, das es mir ermöglichte, diese Farben (mit Variationen, falls nötig) in verschiedenen Winkeln als Hintergründe zu verwenden

@mixin orange-to-pink($deg: to right, $col-1: $orange, $col-2: $pink) {
  background-image: linear-gradient($deg, $col-1, $col-2);
}

Und auch auf Text, wo immer wir ihn brauchten (am häufigsten für :hover und :focus)

@mixin gradient-text() {
  background: linear-gradient(to right, $orange, $pink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Wir benötigten auch den Farbverlauf für Fills und Striche in SVG, also habe ich das ins Dokument gepackt, um es überall dort zu verwenden, wo es benötigt wurde.

<svg width="0" height="0" class="visually-hidden">
  <defs>
    <linearGradient id="orange-to-pink" x1="0" x2="0" y1="1" y2="0">
      <stop offset="0%" stop-color="#DA1B60" />
      <stop offset="100%" stop-color="#ff8a00" />
    </linearGradient>
  </defs>
</svg>

Fixiertes Header

Es gibt etwas an Headern, das immer mehr Komplexität hervorruft, als man vielleicht erwartet. Ich habe das kürzlich mit dem neuen CodePen-Header/Sidebar durchgemacht und es war für diese Seite kompliziert. Teilweise komplizierte das hier

• Es hat seine eigenen einzigartigen Breakpoints. Der Header ist ziemlich voll, daher sind die Breakpoints ziemlich spezifisch und einzigartig für ihn.
• Wir wollten einen festen (aber minimierten) Header, der beim Scrollen nach unten erscheint.
• Wenn Sie eingeloggt sind, gibt es auch eine WordPress-Admin-Bar, die oben auf der Seite fixiert ist. Ich wollte das berücksichtigen.

An einem Punkt wurde es ziemlich unübersichtlich und ich habe schließlich den gesamten CSS-Code gelöscht und ihn neu geschrieben, wobei ich alle Zustände berücksichtigt habe, und Media Queries mit Logik geschrieben habe, um Stile in jedem dieser Zustände klar zu definieren.

Die Idee eines nicht immer festen Headers ist an sich schon interessant. Es bedeutet, dass

• Sie bestimmen müssen, wann Sie die feste Position anwenden
• Sie sicherstellen müssen, dass der Übergang von nicht-fest zu fest (und zurück) keine Layout-Verschiebungen verursacht

Ich war nervös, einen onscroll-Listener anzuhängen und Berechnungen durchzuführen, um zu bestimmen, wann der Wechsel erfolgen soll. Ich bin sicher, es kann verantwortungsvoll gemacht werden, aber ich hatte damit keine guten Erfahrungen. Stattdessen habe ich ein winziges Ein-Pixel-Element auf dem Bildschirm platziert und einen IntersectionObserver daran angehängt und darauf reagiert. Das gab mir die Möglichkeit, die Position in CSS anzupassen, was ein schönes kleines Detail war.

Hier sind die absoluten Grundlagen dieses Codes

Siehe den Pen Fixed Header with IntersectionObserver von Chris Coyier (@chriscoyier) auf CodePen.

Mixup

Ein sehr cooles Feature dieses Designs ist der Mixup-Bereich auf der Homepage. Es war eine Idee von Kylie, um die Vielfalt und Tiefe der Inhalte, die hier auf CSS-Tricks verfügbar sind, zu zeigen und die Leute daran zu erinnern.

Die Linie, die hindurchgeht, muss von der Höhe des HTML-Inhalts in jeder dieser Boxen abhängen. Die Boxen sind auf einem CSS-Grid angeordnet, aber sie können und sollten sich immer noch nach Bedarf für Titel usw. erweitern. Anstatt dies irgendwie mit SVG zu versuchen, wird die Linie im Wesentlichen durch border und border-radius auf einzelnen Boxen zusammengefügt. Um sie auszurichten, musste ich sie gelegentlich mit transform verschieben.

Es gab auch einige z-index-Anweisungen. Es hat Spaß gemacht, dabei Fehler zu machen

Karten

Ich bin irgendwie verliebt in natives Scroll-Snapping. Die Karten haben auf dem Desktop eine lustige Animation, die die gesamte Karte beim Hover/Fokus enthüllt, und auf dem Handy können Sie die gesamte Karte sehen, sind aber leicht durchzufuckeln.

Danke, Amelia!

Das Design sah diese geschwungenen Linientrenner vor

Ich habe ein geringes Vertrauen in die SVG-Pfadsyntax, also habe ich den ersten Versuch unternommen. Ich konnte es so designen, dass es die Linie gut zeichnen und die Strichstärke beibehalten konnte, aber es skalierte nicht ganz richtig.

Siehe den Pen Lighted Path von Chris Coyier (@chriscoyier) auf CodePen.

Ich habe die SVG-Expertin Amelia Bellamy-Royds hinzugezogen, um mir zu helfen, es richtig zu machen. Sie können die Website gerne inspizieren, um zu sehen, wie es gemacht wurde. Es beinhaltet Maskierung und verschachtelte SVGs und Rechtecke und Transformationen und all diese lustigen Dinge. Amelia hat tatsächlich vier Variationen des Codes erstellt und alle Vor- und Nachteile sorgfältig vermerkt. Letztendlich haben wir uns für dieses entschieden

Siehe den Pen Lighted Path von Amelia Bellamy-Royds (@AmeliaBR) auf CodePen.

---

Eine weitere Sache, bei der Amelia geholfen hat, war das Designelement „Kreis aus Text“. Kylie hatte diese Instanzen skizziert, und ich fand sie so cool, dass ich sie unbedingt umsetzen wollte. Es gibt eine wirklich aufwendige Möglichkeit, dies zu tun, indem man die Zeichen in Spans aufteilt und transformiert, aber das ist etwas unübersichtlich im Vergleich zu <textPath> von SVG. Ich wusste, dass ich den SVG-Weg gehen wollte, aber vielleicht ihn in eine wiederverwendbare Komponente auslagern, damit es kein riesiger Codehaufen ist, jedes Mal, wenn ich einen verwenden möchte.

Mir fiel auf, dass eine Webkomponente hier der beste Weg sein könnte, weil ich die API quasi selbst erfinden kann. Was ich von einer Kreis-Text-Komponente erwartet habe

1. Den Text übergeben, der auf dem Kreis gesetzt werden soll
2. Den Radius des Kreises deklarieren
3. Den Kreis drehen, damit ich den Text an jedem Punkt entlang des Kreises starten kann

Das ergibt als Webkomponente absolut Sinn

<circle-text r="3em" rotate="-90deg">
  CSS is super fun & cool & I like CSS!!!
</circle-text>

Meine Expertise mit Webkomponenten ist begrenzt, daher habe ich mich wieder an Amelia gewandt, die sowohl mit Webkomponenten als auch mit SVG großartig ist – eine perfekte Kombination! Das konnte sie tun, was ich leicht in dieses Design integriert habe.

Danke, Ana!

Eine weitere Design-Idee, die Kylie ausgeheckt hat und mich etwas perplex machte, war diese Linie

Ich dachte wieder an SVG, aber ich wollte wirklich normalen HTML-Inhalt schön einbetten. Ich hoffte, es mit Borders oder etwas CSS-typischem hinzubekommen. Ich habe mich an Ana Tudor gewandt, die fantastisch darin ist, schwierige Designsituationen zu meistern und sie mit nativer Browsertechnologie zu lösen. Ana konnte hier eine gute Lösung mit mehreren Gradienten-Hintergründen im Hauptbereich und einem Rand für den oberen rechten Teil, der abfliegt, entwickeln.

Siehe den Pen nav von Ana Tudor (@thebabydino) auf CodePen.

Danke, Zach!

Schriften sind ein einzigartiger Teil des Ladeerlebnisses von Websites, da ihre Präsenz (oder deren Fehlen), wie sie erscheinen und wie sie sich ändern, alle eine wichtige Rolle für die wahrgenommene Leistung der Seite spielen.

Ich hatte das Glück, mit Zach Leatherman über das Laden von Schriften zu sprechen, aber ich fühle mich immer noch nicht ganz wohl damit, was die besten Praktiken in jeder gegebenen Situation sind. Für das Design von CSS-Tricks habe ich mich entschieden, den System-Schriftstapel für den Großteil des Haupttextes zu verwenden. Dies hat den großen Vorteil, dass er sofort gerendert werden kann und ästhetisch gut auf einer technischen Seite funktioniert, ganz zu schweigen davon, dass er sich generell gut mit Rubik, unserer Header-Schrift, kombinieren lässt.

Aber wir mussten uns immer noch mit Rubik auseinandersetzen. Es wird bald ein Artikel von Zach erscheinen, der dies im Detail behandelt, aber im Wesentlichen geht es darum

1. Erstellen Sie eine minimal subsetierte Version von Rubik, die den Großteil der Nutzung abdeckt
2. <link rel="preload" ... > sie
3. Verwenden Sie sie mit @font-face unter Verwendung von font-display
4. Laden Sie eine robustere Version in einer asynchronen zweiten Stufe

Gute Arbeit an alle, die an @css's Relaunch gearbeitet haben!

Schauen Sie sich die Webfonts an, die bei diesem ersten Render von 2,09s Fast 3G erscheinen 🎉

(Offenlegung: Ich habe hier ein bisschen beim Laden der Schriften geholfen 😇) pic.twitter.com/Ih7zJhelQQ

— Zach Leatherman (@zachleat) 1. Januar 2019

Einige Bereiche der Website sind etwas veraltet

Die Foren sind ein so komplizierter Bereich der Website, den man gestalten und pflegen kann. Ich habe einfach die Standard-bbPress-Stile dafür geladen, anstatt zu versuchen, Dinge zu überschreiben oder von Grund auf neu zu beginnen. Ich denke, das wird der beste Weg für die Zukunft sein.

Es gibt einen Galerie-Bereich auf dieser Website, aber ich verlinke ihn nicht mehr, da wir ihn nicht wirklich gut auf dem neuesten Stand gehalten haben und er auch nicht viel genutzt wurde. Die URLs funktionieren immer noch. Vielleicht kommt er eines Tages zurück, aber vorerst genieße ich die Reduzierung technischer und inhaltlicher Schulden.

Technologie-Stack

Es ist ziemlich langweilig. Es ist im Grunde dasselbe, was ich schon immer gemacht habe. Es ist eine Standard-WordPress-Installation mit einem benutzerdefinierten Theme, einem Dutzend Plugins und ein wenig benutzerdefinierter Funktionalität, wie z. B. Bildern, die von Cloudinary betrieben werden. Es läuft auf einer benutzerdefinierten Media Temple-Box, sodass es PHP 7 und MySQL 5.6 haben kann, plus eine Firewall, die auch als CDN fungiert. Es ist schön, eine ziemlich flotte Grundlage zu haben, daher liegt es an mir als Front-End-Entwickler, sie so zu halten.

Ich habe SVG für die Icons, Sass für das Styling und Babel zum Schreiben von jQuery-basierten Funktionalitäten in ES6 verwendet. Ich habe eine Gulp-Datei geschrieben, um all diese Verarbeitung durchzuführen und den lokalen BrowserSync-Entwicklungsserver auszuführen. Lokales WordPress über Local by Flywheel.

Ich bin eigentlich ziemlich zufrieden mit dem Stack, da er sich für mich schnell und produktiv anfühlte. Aber ich gebe zu, ein Teil von mir wünschte, ich hätte mich mehr mit neuen Technologien beschäftigt, wie z. B. webpack-basierte Verarbeitung oder das vollständige Eintauchen in ein server-gerendertes und React-gestütztes Headless WordPress über GraphQL. Der Grund, warum ich es nicht getan habe, ist, dass Langeweile mir so gut gedient hat und Zeit ein wichtiger Faktor ist, da ich alleine entwickle (mein Budget erlaubt kein ganzes Entwicklungsteam). Ich schätze, eine große Überholung der Front-End-Infrastruktur hätte die Entwicklungszeit verdreifacht, mit fragwürdigen Vorteilen. Es klingt immer noch lustig und könnte zukünftige Türen öffnen, aber hey, ein anderes Mal.

Mein letzter Bedauern ist, dass ich wünschte, ich hätte von Anfang an ein echtes Musterbibliotheksystem aufgesetzt. Ich denke, ich habe gut darin abgeschnitten, Dinge in wiederverwendbare Teile zu zerlegen, aber die Website ist nicht wirklich komponentenorientiert. Als ich mich der Ziellinie näherte, begann ich zu sehen, wie dies für mich etwas reibungsloser hätte verlaufen können, wenn ich mit echten Komponenten gearbeitet hätte, die Daten akzeptieren und Variationen und Ähnliches haben. Natives PHP ist dafür nicht gut geeignet, daher hätte mich das zu irgendeinem Vorlagensystem gezwungen, und das hätte ich wahrscheinlich nicht bereut. Wenn ich das nächste Mal bei PHP bleibe, würde ich vielleicht etwas wie Timber und Twig für alle Komponenten verwenden und dann Fractal für die Musterbibliothek, da es Twig unterstützt. Ich mag die Art und Weise, wie Timber die Daten von den Ansichten abstrahiert.

---

Von dieser App habe ich bisher noch nichts gehört, aber schaut euch mal Project Wallace an

Project Wallace ist ein Projekt, das darauf abzielt, über einen längeren Zeitraum Einblicke in Ihr CSS zu gewinnen. Es begann vor ein paar Jahren als Frustration mit bestehenden CSS-Analysetools, die nur eine einmalige Analyse durchführen. Im Laufe der Zeit wurden immer mehr Funktionen hinzugefügt, und jetzt ist Wallace die Anlaufstelle für Entwickler, die wissen wollen, ob ihre Komplexität zugenommen hat, oder für Designer, die wissen wollen, ob alle richtigen Farben und Schriften verwendet werden.

Bart Veneman hat es eingerichtet, um CSS-Tricks zu beobachten, und Sie können einen Vorher-Nachher-Vergleich und Diagramme über die Zeit sehen. Bart hat auch für uns über die Zahlen gebloggt. Danke Bart!

CodePen-Einbettungen

Der wahre Nutzen von CodePen Embed Themes kam hier zum Vorschein. Der Sinn eines Embed-Themes ist, dass Sie sie verwenden können, um das Design an die Stelle anzupassen, an der die Pens eingebettet werden, und wenn Sie dieses Design ändern müssen, können Sie sie alle auf einmal ändern. Es gibt wahrscheinlich Tausende von eingebetteten Pens auf dieser Website, und alle wurden auf einmal mit einer einzigen Theme-Änderung aktualisiert.

Es gibt ein paar spezielle Dinge, die ich mit CodePen-Einbettungen auf dieser Website gemacht habe

• Sie sind von der unteren rechten Ecke aus vergrößerbar. Mit jQuery. So.
• Sie haben eine Platzhalterhöhe. Wenn Sie einen Pen einbetten, können Sie wählen, wie hoch er sein soll. So hoch wird das <iframe> sein. Aber ich habe es angepasst, so dass das <p>, das vor dem iframe steht, die gleiche Höhe hat, damit es keine Reflow-Jank gibt.

Ich habe das Ding selbst mit Regex bearbeitet, so:

function codepen_reflow_fix($content) {
  $content = preg_replace('/data-height=(\'|")(\d*)(\'|")/', 'data-height="$2" style="height: $2px;"', $content);
  $content = preg_replace('/data-theme-id="\d*"/', 'data-theme-id="1"', $content);
  return $content;
}
add_filter('the_content', 'codepen_reflow_fix', 10);

Wir werden diese Funktion bald zu CodePen selbst bringen. Beachten Sie in dem obigen Regex, dass ich auch die Theme-ID erzwinge. Auf diese Weise haben alle eingebetteten Pens definitiv das richtige Theme, auch wenn wir es vergessen.

Erfolg freigeschaltet: Die benutzerdefinierte Scrollleiste ist das neue Feature, das jeder entweder liebt oder hasst

Wenn es eine Konstante bei jedem CSS-Tricks-Design gab, dann ist es, dass es mindestens ein Feature gibt, das die Leute entweder lieben oder hassen. Dieses Mal freue ich mich, Ihnen mitteilen zu können, dass es die benutzerdefinierte Scrollleiste ist. In gewisser Weise ist es für mich selbst. Ich benutze Scrollleisten manuell ziemlich oft und es fühlt sich sowohl lustig als auch sehr benutzerfreundlich an, diesen großen, dicken Klumpen rosafarbener Liebe zu greifen.

Es ist auch ein wenig inspiriert von VS Code, das eine ziemlich fette Scrollleiste aufweist

Es gibt sicherlich allgemeine Usability-Überlegungen zu benutzerdefinierten Scrollleisten, aber ich glaube nicht, dass diese zu stark, wenn überhaupt, verletzt wurden. Ich habe einige Rückmeldungen gehört wie „verändern Sie nicht die Benutzeroberfläche meines Browsers“, was ich irgendwie verstehe, aber bedeutet das, dass wir keine Formularsteuerelemente stylen oder gar CSS verwenden sollten? (LOL.) Und kommen Scrollleisten nicht vom System und nicht vom Browser?

Jedenfalls fälsche ich sie nicht oder so. Ich benutze nur ::-webkit-scrollbar und Freunde. Es gibt offizielle Scrollleisten-Styling-Sachen auf dem Weg, gemäß den CSS-Spezifikationen. Ich habe nichts davon verwendet. Ich denke, ich werde warten, bis mindestens ein Browser es unterstützt.

---

Wir haben noch viel Fehlerbehebung und Polieren an diesem Design zu tun. Wenn Sie uns per E-Mail, Tweet oder auf irgendeine Weise dazu kontaktiert haben, habe ich es wahrscheinlich gesehen und alles protokolliert, um sicherzustellen, dass alles bestmöglich behandelt wird. Bleiben Sie auch dran für einige neue Funktionen!

Wenn Sie Gedanken haben, hinterlassen Sie gerne Kommentare hier, nutzen Sie unser Kontaktformular, senden Sie eine E-Mail an [email protected] oder chatten Sie in unserer neuen Spectrum Community.