Über das CSS-Tricks Redesign

Falls Sie es noch nicht bemerkt haben, habe ich hier ein kleines Design-Update vorgenommen. Ich dachte, ich nutze die Gelegenheit, um einige Punkte und Funktionen des neuen Designs zu erläutern.

Warum?

Weil es Spaß machte. Weil ich ein Designer bin und wir nie zufrieden sind. Weil ich denke, dass Websites mindestens einmal im Jahr ein kleines Design-Update erhalten sollten.

Gibt es etwas Neues?

Nein, nicht wirklich. Nur ein neues Gesicht. Im Backend verschiebe ich langsam einige Dinge in WordPress, die vorher außerhalb davon lagen. Wie alle Videoseiten. Die meisten davon sind auf statischen Seiten, die ich einzeln erstellt habe, als ich sie brauchte. Ich erinnere mich nicht einmal mehr warum. Aber jetzt habe ich eine spezielle WordPress-Seitenvorlage dafür, in die ich die Inhalte in benutzerdefinierte Felder einfüge, was meiner Meinung nach großartig funktioniert. Das ermöglicht Kommentare auf den Videoseiten selbst, was gut ist. Das erleichtert auch zukünftige Designanpassungen erheblich.

Verbindung zum alten Design

Ich habe in der Vergangenheit oft gesagt, dass ich evolutionäres Design mehr mag als revolutionäres Design. Im Wesentlichen Tweaking und Verbesserung statt von Grund auf neu zu beginnen. Obwohl dieses Design sich ziemlich anders anfühlt, halte ich es immer noch für evolutionär. Die zugrunde liegende Codebasis hat sich kaum verändert. Die Hintergrundtextur ist zwar heller, aber dieselbe. Das Tag ist immer noch da! Die Seitenleiste ist immer noch rechts und enthält exakt denselben Inhalt an exakt denselben Stellen. Der Footer ist immer noch riesig =)

jQuery

Ich mag jQuery, du magst jQuery, WordPress mag jQuery. Ich habe es im letzten Design ein wenig verwendet, aber ich denke, wenn ich die Bibliothek lade, kann ich sie auch besser nutzen. Dinge, die jQuery im neuen Design tut

• Erzeugt das Farb-Fading im Hauptmenü. Tutorial dazu folgt bald.
• Treibt den Tabbed Slider in der Seitenleiste an.
• Ruft meinen letzten Tweet im Footer ab.
• Animiert die Links im Footer.

Änderungen an Seitentiteln

Das alte Design hat fast an jeder Seite „ – CSS-Tricks“ angehängt. Ich erinnere mich nicht einmal mehr warum, ich glaube, es war entweder eine frühe SEO-Maßnahme oder es kam einfach als Teil einer Vorlage, von der ich ausgegangen bin. Ich mochte es nie. Jetzt verwende ich eine viel cleverere Technik, um Seiten in WordPress korrekt zu benennen. Die Homepage ist nur der Name des Blogs. Beiträge sind nur der Name des Beitrags.

Hier ist das clevere PHP-Snippet (spezifisch für WordPress), das die Seitentitel handhabt

<title>
	<?php if (is_home()) { echo bloginfo('name');
	} elseif (is_404()) {
	echo '404 Error - Page Not Found';
	} elseif (is_category()) {
	echo 'Category:'; wp_title('');
	} elseif (is_search()) {
	echo 'Search Results';
	} elseif ( is_day() || is_month() || is_year() ) {
	echo 'Archives:'; wp_title('');
	} else {
	echo wp_title('');
	}
	?>
</title>

@font-face

Als Anlehnung an CSS3 verwende ich @font-face für einige Texte im Footer. Sie können es (zum Zeitpunkt des Schreibens) nur in Firefox 3.1 Beta und den neuesten Versionen von Safari sehen. Ich verwende die kostenlose und sehr schöne Fontin-Schriftart von Jos Buivenga.

Wenn Sie daran interessiert sind, @font-face zu verwenden, mehr darüber erfahren möchten und erfahren möchten, wie Sie es in IE zum Laufen bringen, lesen Sie den Artikel von Jon Tan.

Programmierung des neuen Themes

Ich entschied, dass es einfacher wäre, in derselben Umgebung zu arbeiten, in der CSS-Tricks derzeit lebt. Also registrierte ich eine Top-Level-Domain und richtete sie auf demselben Server ein. So konnte ich nach Fertigstellung und Abschluss buchstäblich nur ein paar Ordner und Dateien verschieben und das war's. Alle relativen Dateipfade wären genau gleich, was ich nicht hätte tun können, wenn ich von einem Unterverzeichnis der ursprünglichen Website aus gearbeitet hätte. Vielleicht übertrieben, vielleicht gibt es bessere Wege, dies zu tun. Egal, für mich hat es großartig funktioniert.

Ein Problem, auf das ich stieß, war die Tatsache, dass ich alle Beiträge und Kommentare von der Hauptseite auf die Testseite kopieren wollte. Ich hätte einfach von der Hauptseite exportieren und auf der Testseite importieren können. Habe ich versucht, aber die Datei war 10 MB groß, was zu groß war (selbst nach einigen ausgefallenen Hacking-Tricks), als dass WordPress sie hätte importieren können. Ich hätte die Datenbank verschieben können, aber ich war einfach zu faul und habe es nicht getan.

Also… Als das Design fast fertig war und eine echte Live-Testphase auf der echten Live-Seite benötigte, fand ich ein fantastisches WordPress-Plugin, das den Trick gemacht hat. Es heißt Theme Switcher und erlaubt es Ihnen, Personen, die angemeldet sind (und einen ausreichend hohen Zugriff haben), ein anderes Theme anzuzeigen. So konnte ich mein neues Theme aktivieren und es buchstäblich in Aktion sehen, während alle anderen noch das alte Design sahen. Äußerst hilfreich.

Es ist nicht zentriert

Nur eine Designentscheidung. Um dieses Design zu zentrieren, müsste ich mir eine Möglichkeit überlegen, die linke Seite so zu lösen, dass sie die gleiche wiederholende Grafik wie die rechte verwendet. Das würde einen ordentlichen horizontalen Platz einnehmen und ich glaube einfach nicht, dass es notwendig ist. Mir ist die linke Ausrichtung sowieso lieber.

Dinge, mit denen man leben muss

Zu diesem Zeitpunkt habe ich viel zu viele Artikel, um jemals (jemals) jeden einzeln durchzugehen und Änderungen vorzunehmen. Es gibt einige Konsistenzen in den Artikeln, die bestimmte Designaspekte der Website diktieren. Zum Beispiel

• Bilder in allen Beiträgen sind maximal 570px groß. Der Hauptinhaltsbereich der Website muss daher immer mindestens so breit sein.
• Bilder in allen Beiträgen sollten auf Weiß angezeigt werden. Als ich mit diesem neuen Design begann, hatte ich eine kleine Textur im Hauptinhaltsbereich, die mir gefiel, aber dann ging ich zurück und sah mir alte Beiträge mit vielen Bildern an, die auf Weiß angezeigt werden sollten, und es sah schrecklich aus. Von nun an muss mein Hauptinhaltsbereich immer einen weißen Hintergrund haben.
• Alle Code-Schnipsel in meinen Archiven sind sowohl in <pre>- als auch in <code>-Tags eingeschlossen, mit einem Klassennamen, der den Code-Typ angibt. Alle HTML-Codes sind unverändert. Ich verwende ein Plugin, das mir dies ermöglicht, und ein weiteres Plugin für das Hervorheben. Ich mag das System okay, aber ich bin absolut darin gefangen. Verschiedene Code-Highlighter haben unterschiedliche Anforderungen an die Handhabung Ihres Codes, und ich habe weitaus zu viele Snippets, um sie jemals zu ändern.

Ich hoffe, es gefällt Ihnen!

Da haben Sie es! Ich hoffe, es gefällt Ihnen, lassen Sie es mich gerne wissen (egal ob gut oder schlecht). Zur Nachwelt hier einige Screenshots.

Altes Design

Neues Design