Aus dem Maschinenraum: Hintergründe und technisches zum neuen Look

Aus der Kategorie »just jawl«

Kein Einleitungssatz, denn der Titel sagt ja schon alles.

Hintergrund (aka. „Warum?”)

Außer, dass man sich ja gelegentlich am Look des eigenen Blogs satt gesehen hat gab es zwei Grundgedanken, die das neue Theme erfüllen sollte:

  1. Für die regelmäßigen Leserinnen sollten die Artikel komplett im Mittelpunkt stehen. Ihr kommt, um zu lesen, das freut mich und das möchte ich Euch nicht unnötig erschweren.
  2. Wer zufällig vorbei kommt, der sollte aber alles finden, um auch ein bischen hier zu bleiben. Ich schreibe ja schließlich nicht umsonst seit 13 Jahren hier rein, da gibts ja mehr zu entdecken als ich mich selbst erinnere.
    Früher packte man dafür eine Sidebar mit verwandten Artikeln, Tags, Kategorien, der Blogroll und so weiter voll – aber (siehe a) das wollte ich nicht.

Die Quadratur des Kreises also? Ich habs versucht.

Die Artikel stehen groß und zentriert auf der Seite; ich hab mir mit der Typographie Mühe gegeben und ich hoffe, es ist alles gut lesbar. Statt der Droid Sans schaut Ihr auf die Open Sans – das ist nicht besonders originell, aber ich finde das eine sehr angenehm lesbare Schrift.1

Alles andere verbirgt sich hinter Slidern und Akkordeons (Akkordeonen? Akkordeoni?) – und bei „alles andere” hoffe ich, dass ich dem Zufallsbesucher viele Möglichkeiten an die Hand gebe, ein bisschen ins Stöbern zu kommen und ihm alle Fragen beantworte, die man beim Zufallsbesuch einer fremden Website so haben kann. Ich werde in der nächsten Zeit mal sehen, ob sich die Absprungrate – die auch hier natürlich blogtypisch eher hoch ist – in der nächsten Zeit ändert.

Technisches

Ich habe bis auf eine Ausnahme2 keine Pixelgrafiken mehr auf der Seite. Alle Icons, egal ob bei den Kategorien, bei den Share-Icons, die Link-Kennzeichnungen, das Logo oder whatever: Alles SVGs.
„Aber die doofen Internet Explorer können doch keine SVGs?” höre ich Euch fragen. Richtig.
In meiner htaccess-Datei stehen deshalb folgende Zeilen:

RewriteEngine On
RewriteBase /
RewriteRule \.svg$ /makesvg.php [L]

Wenn also eine SVG-Datei angefordert wird, dann wird die Anfrage an die Datei makesvg.php umgeleitet. In dieser Datei steht (unter anderem, ich habe das hier der Übersichtlichkeit halber gekürzt) folgendes:

<?php
if (strchr($_SERVER['HTTP_USER_AGENT'], "MSIE") ) {
header("Content-Type: image/png");
echo file_get_contents(str_replace('.svg', '.png', $_SERVER["DOCUMENT_ROOT"].$_SERVER["REQUEST_URI"]));
} else {
$datei = $_SERVER["DOCUMENT_ROOT"].$_SERVER["REQUEST_URI"];
$grafik = file_get_contents($datei);
header("Content-Type: image/svg+xml");
echo $grafik;
}
?>

… oder in anderen Worten: Wenn ein Internet Explorer z.B. die Datei „bild.svg” haben will, dann gib statt dessen die Datei „bild.png” aus. Alle anderen bekommen „bild.svg”.
(Ich werde das noch verfeinern, die neuen IEs können ja mit Vektoren)

Damit das auch klappt, habe ich alle SVGs noch einmal als PNG ins gleiche Verzeichnis gelegt. Voila.

Nachtrag: Wenn Ihr das einsetzt, sorgt bitte dafür, dass das Script nur auf ein bestimmtes Verzeichnis (also Euer Bilderverzeichnis) reagiert – sonst kann man im Extremfall so ziemliche jede Datei auf Eurem Server auslesen. Auch so etwas wie „./” aus dem Pfad heraus zu löschen ist eine gute Idee.

Nebenbei habe ich in dieser Datei auch noch ein paar header-Anweisungen, die ich jetzt hier der Übersichtlichkeit weggelassen habe – damit setze ich die „Last-modified”- und die „expires”-Werte und sorge (unter anderem damit) dafür, dass das jawl jetzt einen PageSpeed von 93/100 hat.

Das Bild im Hintergrund wird mit Backstretch angepasst, die Bilder werden mit der Fancybox vergrößert. Außerdem sorgt ScrollTo für die Scroll-Geschichten, ein ganz normales Accordion für die Infos unter den Artikeln und ein bisschen selbstgeschriebenes jQuery-Zeugs für die verschiedenen Bereiche im Kopf.
Die Kategorie-Icons setze ich inzwischen3 mit dem PlugIn Category Icons um

Die Share-Links binden keine fremden Scripte ein, sondern linken nur auf die jeweiligen Share-Seiten der Dienste. Für Euch bedeutet das, dass nicht automatisch Daten an Facebook, Twitter & Co geschickt werden; für WordPress-Bastler bedeutet das …

Irgendwo im Loop:
<?php
$sharetitle = get_the_title();
$sharelink = get_permalink();
$shareshortlink = wp_get_shortlink();
?>

Egal wo:
<a title="Bei facebook teilen" href="http://www.facebook.com/sharer.php?u=<?php echo $sharelink; ?>">Bei facebook teilen</a>
<a title="Bei google+ teilen" href="https://plusone.google.com/_/+1/confirm?hl=de&url=<?php echo $sharelink; ?>">Bei google+ teilen</a>
<a title="Bei twitter teilen" href="http://twitter.com/intent/tweet?text=Lese%20gerade:%20jawl.net%20-%20<?php echo str_replace(" ", "%20", $sharetitle); ?>%20-%20<?php echo str_replace("www.", "", $shareshortlink); ?>">Bei twitter teilen</a>

Vielleicht könnt Ihr das ja mal gebrauchen.

Fußnoten
1) In der Standardeinstellung handelsüblicher Browser ist die Schrift jetzt 16px groß. Kürzlich stieß ich in den Tiefen des Laufwerks „Archiv” auf meine ersten Websites – und erinnerte mich, wie wir Designer damals alles in 10px Größe angelegt haben. Times are a-changing. Zum Glück.

2) Ich habe versucht, mein Bild zu vektorisieren. Aber das möchten wir nicht.

3) „Inzwischen”, weil ich immer noch Anfragen auf einen Artikel von vor 5 Jahren bekomme, in dem ich mal was handgestricktes vorgestellt hatte.


Ähnliche Artikel lesen?

  • Mehr Artikel zum Thema »just jawl«
  • … und weitere Artikel, die mit diesen Schlagwörtern versehen sind:

Außerdem schrieb ich zum gleichen oder ähnlichen Themen auch noch …

Ich finde den Artikel super!

Das freut mich natürlich sehr.

Du kannst den Artikel weiter verbreiten
Du meinst, der Artikel könnte auch anderen gefallen? Dann findest Du etwas weiter oben auf dieser Seite, direkt rechts unten am Artikel ein paar Buttons. Damit kannst Du den Artikel per eMail, Twitter, facebook oder google+ weiter verteilen. Ich würde mich darüber freuen.

Mir ein Geschenk machen? Uiuiuiui.
Gefallen Dir meine Artikel immer wieder, schöder Mammon ist Dir aber zu doof? Dann mach mir doch eine Überraschung: Hier findet Du meine amazon-Wishlist mit ausgesuchten und garantiert Freude spendenden Präsenten zwischen fünf und zweitausenfünfhundert Euro – da ist bestimmt was passendes dabei.

Geld? Wow.
Ist Dir mein Artikel darüber hinaus sogar noch etwas wert, dann findest Du bei den Icons zum Verbreiten des Artikels einen flattr-Button. Jeder Euro, der darüber reinkommt geht direkt weiter an netzpolitik.org.

Wer? Was? Warum?

Christian Fischer ist Webworker und schreibt bereits seit 2001 dieses Blog. Es geht um dies und das, Musik, Filme, Konzerte, das Leben allgemein und alles, was mir sonst noch so schreibenswert vorkommt. Hier findest Du eine Übersicht über alle Themen.

19 Reaktionen

Auch kommentieren? Zum Formular

Am 25.01.2014 um 22:19 Uhr wusste Kiki:

Das sieht sehr schick aus und der Parallaxefekt ist schön. Gefällt mir! Die Schriftgröße ist auch gut, allerdings würde ich nicht unbedingt die Lightversion nehmen oder aber den Kontrast zum Hintergrund etwas erhöhen; bei mir ist das schon sehr „Augen zusammenkneifen“ induzierend (ganz schlimm dann die Fussnoten und in den Rubriken die Unterzeile „Alle Artikel zum Thema xyz anzeigen“ kann ich ohne Tricks nicht mehr lesen).


Am 25.01.2014 um 22:33 Uhr sprach Christian:

Echt? Ok, hier siehts selbst auf der Windows-Kiste vollkommen ok aus (und die kommt mit den light-Versionen traditionell schlechter klar). Hm. Meine Augen sind doch auch nicht mehr die besten, ich dachte, ich könnte die inzwischen als Maßstab nehmen.

Ich sprech Dich nochmal drauf an, wenn ich darf, ja?


Am 25.01.2014 um 23:28 Uhr schriebMella:

Kleiner Hinweis, weil es mir eben ins Auge fiel:
„Er gerne auch in Schulen… etc.“ da unten links…
Was machst Du denn da gerne? Gehen, randalieren,
kitzeln? ;)

Aber ansonsten: Saucool geworden! Echt!!! Klasse!!!

Gefällt mir ausserordentlich gut! :)


Am 26.01.2014 um 9:54 Uhr sagte Christian:

Genau, Mella: Ich randaliere gerne in Schule. Aber das sag ich natürlich da an der Stelle nicht so :)
Danke für den Hinweis!


Am 26.01.2014 um 10:17 Uhr ergänzte Luca:

Wenn ich einen so tollen Blog hätte, würde ich neuen Besuchern vermutlich immer die ?-Infobox anzeigen.

SVGs finde ich großartig.


Am 26.01.2014 um 11:10 Uhr schriebix:

wie ziehst du denn die twitter und facebook reaktionen unter dem artikel hier rein?


Am 26.01.2014 um 11:18 Uhr wusste Christian:

@ix:
Grundsätzlich mit dem PlugIn „social
Und dann frage ich verschiedene Comment-Types ab, WP unterscheidet mit dem PlugIn nach
$comments_by_type[‚comment‘],
$comments_by_type[‚pings‘],
$comments_by_type[‚trackback‘],
$comments_by_type[’social-facebook-like‘],
$comments_by_type[’social-twitter‘],
$comments_by_type[’social-twitter-rt‘]

… und noch einem (nämlich den facebook-Kommentaren), die ich aber nicht veröffentliche, da ich es unfair finde, wenn jemand bei facebook in einem geschlossenen Rahmen kommentiert und seine Kommentar ohne dass er es weiß auch hier veröffentlicht wird.


Dein Kommentar:

Du möchtest auch so ein hübsches Bild am Kommentar haben? Die Bilder gibts bei gravatar.com
Die Bedingungen für das Buchen eines kommerziellen Kommentars findest Du hier.


Auch anderswo wird darüber gesprochen …

pawelf

RT @jawl: Frisch gebloggt: Aus dem Maschinenraum: Hintergründe und technisches zum neuen Look
http://t.co/rz9ORntE63

Bei facebook gabs den „Daumen hoch” von: