Ich habe die Website neu gestaltet! Ich kann nie an das Wort „Redesign“ denken, ohne auch an „Realigning“ zu denken, aus Camerons Molls bahnbrechendem Artikel. Ich habe nicht bei Null angefangen. Dieses Design war keine Sache einer leeren Design-Leinwand und eines leeren Code-Editors. Ich bezweifle, dass ein zukünftiges Redesign das auch sein wird. Ich habe mit dem angefangen, was wir bereits hatten, und einiges verschoben. Aber ich habe so viel verschoben, fast jede einzelne Datei angefasst, dass es würdig ist, eine Linie zu ziehen und zu sagen: Das ist V18.
Ich führe eine sehr unvollständige Design-Historie hier.
Erste Schritte
Ich beginne immer gerne damit, mich in einem Design-Tool umzusehen. Nach 3 oder 4 Durchläufen in Figma (und nachdem ich zurückkam, nachdem ich mit dem Erstellen begonnen hatte, um das Footer-Design auszuarbeiten), war das, wo ich aufgehört habe.
Sobald ich mit dem Visuellen relativ zufrieden bin, springe ich über und beginne mit dem Codieren, wobei ich dort alle endgültigen Entscheidungen treffe. Das Endprodukt ist nicht 1000 Meilen anders als das hier, aber es hat einige Unterschiede (und erforderte 10x mehr Entscheidungen).
Einfachheit
Es mag auf den ersten Blick nicht so aussehen, aber für mich, während ich daran gearbeitet habe, war das Kernthema die Vereinfachung. Nicht drastisch, nur so, 20%.
Der Header in V17 hatte eine spezielle mobile Version und behandelte den offenen/geschlossenen Zustand. Der V18-Header ist nur eine Handvoll Links, die auf kleinen Bildschirmen in die nächste Zeile umbrechen. Ich habe einen „Zurück nach oben“-Link in den Footer eingefügt, der erscheint, sobald Sie vom oberen Bereich wegscrollen, um Ihnen zu helfen, wieder zur Navigation zu gelangen. Diese Scroll-Erkennung (basierend auf IntersectionObserver) ist es, die ich verwende, um den Stern auf dem Weg zurück nach oben auch zu „drehen“.
Ich kann jetzt schon sagen, dass der Website-Header eines der Dinge sein wird, die sich in V18 erheblich weiterentwickeln werden, da dort noch mehr an Feinabstimmung zu finden ist.
Das Suchformular in V17 hatte ebenfalls offene/geschlossene Zustände und spezielle Vorlagen für die Ergebnis-Seite. Ich bin jetzt ganz auf Jetpack Search umgestiegen, daher tue ich nichts weiter, als sie zu öffnen, wenn Sie auf das Suchsymbol klicken.
Diese Suche ist JavaScript-gesteuert, und um sie widerstandsfähiger zu machen, ist sie auch ein gültiger Hyperlink zu Google-Suchergebnissen
<a
href="https://www.google.com/search?q=site:css-tricks.com%20layout"
class="jetpack-search-filter__link"
>
<span class="screen-reader-text">Search</span>
<svg> ... </svg>
</a>
Es gab früher eine Vielzahl unterschiedlicher Layouts in V17 (z. B. Sidebar links oder rechts) und Header-Stile (z. B. Video im Header). Jetzt gibt es größtenteils nur noch jeweils einen.
Der Footer in V17 wurde ziemlich ausufernd, mit ganzen Abschnitten für das Newsletter-Formular, soziale Medien, verwandte Seiten und mehr. Ich habe das alles zu einem traditionelleren Footer komprimiert, falls es so etwas gibt.
Es gibt jetzt einen Look für „Karten“, egal ob es sich um einen Artikel, ein Video, einen Leitfaden usw. handelt. Es gibt leichte Variationen, je nachdem, ob der Autor relevant ist, ob er Tags, einen Call-to-Action usw. hat, aber es ist alles die gleiche Basis (und Vorlage). Die Hauptvariation ist eine „Mini“-Karte, die jetzt bei beliebten Artikeln, dem monatlichen Mixup und In-Artikel-bezogenen Artikeln weitgehend konsistent verwendet wird.
Der Newsletter-Bereich ist erheblich vereinfacht worden. In V17 war die URL /newsletters/ eine Art „Landing Page“ für den Newsletter, und Sie konnten den neuesten in einer Seitenleiste anzeigen.
Jetzt leitet Sie diese URL einfach zum neuesten Newsletter weiter, damit Sie ihn wie jeden anderen Inhalt einfach lesen können, und auch zu vergangenen Ausgaben navigieren können.
Beitragsbilder
WordPress hat das Konzept eines Beitragsbildes pro Artikel. Sie müssen es nicht verwenden, aber wir tun es. Ich mag, wie es natürlich in andere Dinge integriert ist. Wie es automatisch zum Bild für Social-Media-Integrationen wird. Wir haben es in V17 als dezentes background-image Ding verwendet.
Vielleicht hätte eine perfekte Website in einer perfekten Welt eine perfekte Content-Strategie, so dass jeder einzelne Artikel ein perfektes Beitragsbild hat. Ein passendes Farbschema, exakte Abmessungen, sehr vorhersehbar. Aber das ist keine perfekte Welt. Ich bevorzuge Systeme, die Schlampigkeit zulassen. Das Design um unsere Beitragsbilder herum akzeptiert so ziemlich alles.
- Ein markengeschützter Farbverlauf wird darüber gelegt und mit
mix-blend-modedarauf gemischt, wodurch sie sich alle zusammengehörig anfühlen. - Die Ausnahme ist, dass sie bei Bedarf in Größe und Zuschnitt angepasst werden.
Damit ist bekannt, dass unsere Beitragsbilder in vielen Kontexten verwendet werden
CSS-Statistiken
Betrachtet man nur das CSS zwischen den beiden Versionen (Project Wallace hilft hier)
Minifiziert und gzip-komprimiert ist das Haupt-Stylesheet 16,4 kB groß. Vielleicht nicht so klein, wie ein reines Utility-Stylesheet sein könnte, aber das ist keine Größe, über die ich mir jemals Sorgen machen würde, besonders da die Größe stark abwärts tendierte, ohne es wirklich zu versuchen.
Kein Geschwindigkeitsdämon
Auf CSS-Tricks werden ziemlich viele Ressourcen genutzt. Wenn Geschwindigkeit meine #1 Priorität wäre, würde ich als Erstes anfangen, die genutzten Ressourcen abzuschneiden. Meiner Meinung nach würde das die Seite viel weniger spaßig machen, aber dem Inhalt wahrscheinlich nicht allzu sehr schaden. Ich möchte das einfach nicht. Ich würde lieber Wege finden, die Seite relativ schnell zu halten und sie gleichzeitig visuell reich zu gestalten. Vielleicht kann ich das später mal erforschen, um eine deutlich leichtere Version der Seite zu ermöglichen, die auf standardbasierte Weise opt-in ist.
Was diese Ressourcen angeht…
- Bilder sind das größte Gewicht. Fast jede Seite hat ziemlich viele davon (10+). Ich versuche, sie von einem CDN in einem optimierten Format über ein CDN zu servieren und mit der Syntax für responsiven Bildern zu dimensionieren. Es gibt noch mehr, was ich tun kann, aber ich habe schon einen guten Anfang gemacht.
- Es gibt immer noch ca. 180 kB JavaScript. Die Jetpack Search-Funktion wird von diesem, dem gewichtigsten Modul, angetrieben. Ein Polyfill wird geladen (wahrscheinlich von dem), was ich mir ansehen sollte, um zu sehen, ob es entfernt werden kann. Ich benutze immer noch jQuery, was ich definitiv beim nächsten Mal entfernen werde. Nichts gegen jQuery, ich benutze es einfach nicht mehr sehr viel. Die meisten meiner Dinge sind sowieso in reinem JavaScript geschrieben. Google Analytics ist dabei, und der Rest sind kleine Skripte (ironischerweise) für Performance-Dinge oder Werbung.
- Die Schriftarten wiegen ca. 163 kB und sie werden nicht auf besonders ausgefallene Weise geladen.
Alle diese drei Dinge sind Ziele für Geschwindigkeitsverbesserungen.
Und trotzdem, hey, der Desktop Lighthouse-Bericht ist nicht schlecht
Diese Ergebnisse stammen von der Homepage, die aufgrund der großen Inhaltsgitter eine der schwereren Seiten ist. Es gibt hier immer noch viele Versuche mit Performance-Best-Practices
- Alles wird von globalen http/2 CDNs geliefert und gecached
- Assets optimiert/minifiziert/kombiniert wo möglich
- Assets/Werbung lazy-loaded wo möglich
- Premium-Hosting
- HTML über das Kabel + instant.page
Ich habe darauf geachtet, auch SpeedCurve-Berichte davor und danach durchzuführen, und es gab ermutigende Nachrichten
Meine Hoffnung ist, dass es sich ziemlich flott anfühlt, wenn Sie sich auf der Website umsehen und bei späteren Besuchen wiederkommen.
Typografie
Es ist wieder durchgängig Hoefler&Co..
Den Großteil der Artikeltypografie habe ich unverändert gelassen, da dies einer der letzten Design-Sprints war, den ich in V17 durchgeführt habe, und ich mag, wo er aufgehört hat. Jetzt, wo clamp() da ist, verwende ich es für fluide Typografie für einen Großteil der Website. Zum Beispiel Header
font-size: clamp(2rem, calc(2rem + 1.2vw), 3rem);aXe
Ich habe das Axe DevTools Plugin verwendet, um Seiten vor dem Launch zu testen, und einige Dinge gefunden, die behoben werden mussten. Nicht gerade ein tiefer Einblick in die Barrierefreiheit, aber auch dies war kein kompletter Rewrite, daher erwarte ich nicht, dass sich in Bezug auf die Barrierefreiheit furchtbar viel geändert hat. Ich bin besonders daran interessiert, hier Probleme zu beheben, also halten Sie sich nicht zurück!
Fehler
Ich bin sicher, dass es einige gibt. Ich möchte diesen Kommentar-Thread lieber nicht für Bugs verwenden. Wenn Sie auf einen gestoßen sind, wenden Sie sich bitte an uns unter [email protected]. 🧡
Danke Chris! Bitte, was verwenden Sie für browserübergreifendes Gerätetesting?
Nicht mehr viel. Ich öffne eine Website in ein paar verschiedenen Desktop-Browsern und auf meinem Handy (manchmal im Simulator). Wenn ich etwas testen muss, das ich nicht habe: https://crossbrowsertesting.com/
Danke für die Richtung!
Es ist sehr erfreulich, die Transformation und wo die Designbemühungen platziert wurden. Wie immer, danke, dass Sie so detailliert dokumentiert und geteilt haben!
Großartige Arbeit! Zwei Anmerkungen zur Barrierefreiheit für das neue Design. Erstens würde ich „text-transform: all-caps“ nur für Akronyme reservieren. Nicht nur, dass einige Screenreader diese Überschriften als Akronyme lesen (z. B. „F.A.M.I.L.Y“ statt „Family“), sondern Großbuchstaben machen den Text für Menschen mit Legasthenie schwerer lesbar. Zweitens wäre sicherzustellen, dass der Farbkontrast für den Grau-auf-Grau-Text ausreichend ist, zum Beispiel für die Kleingedruckten am unteren Rand dieses Formulars bei den Häkchen, den Footer-Text und die Datumsstempel auf den Karten.
Hallo Chris
Sie haben die große JS-Suchdatei erwähnt. Ich hatte ein ähnliches Problem bei WPOwls. Abgesehen davon, dass ich Algolia verwende, habe ich die Suchseite auf eine separate Seite verlagert und alle benötigten Dateien nur dort geladen.
Oder Sie könnten darüber nachdenken, all die Such-Sachen per Lazy Loading zu laden, sobald der Benutzer auf das Suchsymbol klickt.
Und ja – ich konnte jQuery auch komplett entfernen :)
ICH MAG ES, aber der Kommentarbereich ist ein wenig störend. Wahrscheinlich wegen der Überbeanspruchung von Grau und mangelndem Kontrast
Ich wünschte, ich wäre ein guter Designer wie Sie :( diese Seite ist großartig! Ich liebe es, jedes Mal das neue Design zu sehen
wirklich cool! Ich wünschte, ich hätte eine Website mit dieser Vorlage!
Danke für das Redesign, das ist eine deutliche Verbesserung gegenüber V17. Sie haben es geschafft, die Seite gleichzeitig einfacher und bombastischer zu machen.
Sieht super aus.
Ich liebe das sich ständig entwickelnde Design und ich mache auf meiner Website normalerweise dasselbe. Es geht nie zu einer vollständigen Neuerstellung und entwickelt sich normalerweise nur etwa 15-25% pro Jahr mit der Weiterentwicklung des Block-Editors für WP weiter.
Ich bin sicher, dass ich im nächsten Jahr buchstäblich ZEHNEN von Stunden auf der Website verbringen werde, wie ich es immer für die besten Anleitungen/Referenzen tue.
-Tim
Ich hole meine Urlaubslektüre nach. Danke für die Erwähnung, Chris. Dieses Redesign (Realign!) hat etwas Elegantes, und ich kann es nicht ganz fassen. Zugegeben, der Header ist wunderschön, die Typografie ist solide, die Ecken sind sorgfältig abgerundet (ist das ein Wort) und mehr. Und vielleicht liegt es daran, dass ich es nicht ganz fassen kann – die Gesamtpassform und -verarbeitung, die Summe aller Details, machen dies zu einem gut ausgeführten Design. Und ganz zu schweigen von all den Code-Verbesserungen im Hintergrund! Bravo! Ich wünsche Ihnen ein sehr erfolgreiches Jahr 2021, mein Freund.
Haha! Ich kann das „Design des absoluten Minimums in XD/Figma/was auch immer und ab in den Code“-Gefühl nachvollziehen. Es ist immer einfacher, Entscheidungen zu treffen, wenn man bereits am Codieren ist und sieht, wie die Dinge funktionieren.
Das neue Design gefällt mir übrigens sehr gut.
Es gibt ein kleines „Problem“ mit diesem Textbereich, Sie können ihn unendlich horizontal vergrößern, Sie sollten ihm vielleicht eine
min-widthundmax-widthgeben. Die Vorschau für Inline-Code ist ebenfalls etwas schwer zu lesen, sie hat einen hellrosa Hintergrund und den Text in Weiß.Das ist großartig!
RIP die Nachricht „Kann auch tatsächliches ‚CSS‘ oder ‚Tricks‘ enthalten oder auch nicht“ :(
Cool… „realign“, wie üblich sehr schön und ich merke, dass die Navigation hier aus Frankreich „schnappig“ ist.
Also, nach diesen paar Wochen, wie viele Dinge haben Sie reparieren können? Ich wünschte, ich könnte eine Community bitten, Probleme auf meinen Websites zu verfolgen
Sie haben die Browser, die Sie weiterhin unterstützen wollen, nicht erwähnt, daher zögere ich, einen Beitrag zu leisten, wenn es Ihnen am Ende egal ist.
Wunderschönes neues Design! Ich liebe es auch, wenn Leute ihre Gedanken hinter dem Designprozess teilen – danke! Eine Sache – die Kommentare sind irgendwie… klobig. Anfangs war ich mir nicht einmal sicher, ob es überhaupt Kommentare waren.
:) tolle Arbeit Chris (mal wieder)!
Was für eine Reise das war, ich habe mir einige der älteren Versionen angesehen
https://web.archive.org/web/*/css-tricks.com