Redesign v15 Notizen

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Ein kleines Redesign hier. Wie immer ist es nur ein Anfang. Es wird sich in den kommenden Wochen, Monaten und Jahren ebb und fließen.

Es gibt Fehler! Es gibt kleine Unterschiede, an die man sich erst gewöhnen muss! Sie sind jederzeit herzlich eingeladen, uns zu kontaktieren und Fehler zu melden oder uns Ihre Meinung mitzuteilen. Sie wissen, wie viele Leute sagen: „Alle Websites sind gleich!“, nun, einige Dinge sind hier ganz bewusst anders.

Dedizierter Bereich für den Newsletter

Es fühlt sich viel besser an, ein Webarchiv des Newsletters zu haben. Da er handschriftlich ist, würde ich nicht wollen, dass dieser Inhalt im E-Mail-Land verloren geht. Dies ist nur eine einfache v1, ich bin sicher, dass wir diese Archive in Zukunft noch besser nutzbar machen können.

Kartenbasiertes Layout mit Featured Images

Was ich an kartenbasierten Layouts mag, ist, dass man die Breite der Karte so begrenzen kann, dass die Zeilenlänge nicht zu groß und die Bilder nicht zu riesig werden, und die Karten dann beliebig anordnen kann. Viele der Seiten verwenden CSS columns, um die Karten zu layouten.

Karten können das Surfen unterhaltsam machen.

Es hat schon einige Leute verwirrt, dass die nächste chronologische Karte unter der oberen linken statt rechts davon liegt. Ich verstehe die Verwirrung, aber ich bin nicht besonders besorgt. Nicht alle Seiten sind chronologisch. Ich bin mir nicht sicher, wie wichtig Chronologie ist, besonders wenn Daten klar dargestellt sind und der Inhalt relevant ist. Ich mag es, dass es leicht älteren Artikeln eine neue Chance gibt, am Anfang der nächsten Spalte zu glänzen.

Auf Mobilgeräten stapeln sich die Karten übereinander.

Was auch für einige Leute verwirrend war. Der Gedanke dahinter ist: Karten sind immer Auszüge. Das Stapeln (und damit das Ausblenden von Text) bedeutet: Klick/tippe darauf, um weiterzulesen.

Erweiterbare Bilder und Pens

Der Hauptinhaltsbereich ist genau zentriert, was sich von den letzten Designs unterscheidet. Er ist auch etwas schmaler. Ich bevorzuge die Schmalheit für Text, aber ich war ein wenig enttäuscht, dass dies Bilder und eingebettete Pens kleiner machte. Also habe ich die Bilder erweiterbar gemacht!

Das ist praktisch Daves Ding.

Außerdem haben wir die Pens in beide Richtungen erweiterbar gemacht

Oh, und auch Code, falls er benötigt wird

Tagging

Wir taggen Inhalte seit einigen Jahren, haben sie aber nie wirklich zugänglich gemacht. Dieses Design ist unser erster Versuch.

Kommentare

Kommentare bleiben erhalten, und wir möchten weiterhin die Diskussion über Kommentare fördern, aber wir möchten auch klare Erwartungen an das Kommentarverhalten haben. Hier ist der neueste Versuch dazu.

Betrachten Sie es wie einen Leserbrief.

Mit anderen Worten: mehr Moderation. Das bedeutet nicht nur, das Schlechte fernzuhalten, sondern auch dem Guten viele super-radikale Sterne zu geben!

Fluid Type

Ich kann einfach nicht genug davon bekommen, davon bekommen.

The Lodge kombiniert mit Videos

The Lodge waren sowieso immer nur Video-Screencasts, und da wir es nicht mehr berechnen, haben wir sie zusammengelegt. Alle diese Serien sind dort weiterhin verfügbar.

Performance

Wie immer gibt es Verbesserungen zu machen. Aber…

500ms für den DOM und 1,16s für den vollständigen Ladevorgang auf 3G sind nicht schlecht (Cache-Treffer, allerdings).

Ich konnte einige Performance-Optimierungen am Frontend vornehmen, wie z. B. das Entfernen einiger Bibliotheken, das Entfernen einiger Bilder, das verzögerte Laden anderer…

Header

Für die Neugierigen: Die seltsamen sich bewegenden Hintergründe sind SVG, das pseudo-zufällig generierte Punkte eines <polygon> sind. Hier ist der reduzierte Code dafür.

Sehen Sie den Pen CSS-Tricks Header von Chris Coyier (@chriscoyier) auf CodePen.

Neue Bereiche

Keiner dieser Bereiche ist bisher fertig, aber der Hauptgrund für mich, mit einem Redesign herumzuspielen, war, einige neue Bereiche zum Leben zu erwecken. Hier ist ein kleiner Vorgeschmack auf nur eine Seite eines Bereichs.