wirres.net redesign

felix schwenzel, 02.02.2012, in wirres.net

wirres hat angefangen mit einem tabellen-basierten layout. ganz schreckliche konstruktionen waren das damals, aber so hat man das halt damals gemacht.

vor ein paar jahren habe ich das layout dann ohne tabellen, mit CSS und HTML gebaut.

jetzt fand ich es an der zeit, ein layout zu bauen das zumindest ansatzweise auf HTML5 basiert. ansatzweise deshalb, weil die konstruktion, glaube ich, nichtmal im traum den validator-test besteht. aber auch das ist ein dauerzustand, seit beinahe 10 jahren. ausserdem war mir nach mehr weissraum und vor allem nach einem reaktionsfähigen (responsive) layout, ein layout also, dass keine separate mobil-site benötigt um auf mobilen geräten einigermassen auszusehen, sondern sich mit hilfe von media-queries an das ausgabegerät, bzw. die darstellungsfähigkeiten anpasst (das ist unter anderem hier ganz schön erklärt). denn auch das nervte mich ein bisschen, wie wirres.net auf dem mobiltelefon aussah. vor zwei jahren war ich kurz davor eine separate mobile version zu bauen, die die browser-kennung analysiert und entsprechend zur desktop- oder mobilvariante weiterleitet. das hätte aber für jeweils eine seite, verschiedene URLs erfordert. das fand ich dann doch irgendwie doof.

die basis für mein redesign war die HTML5 boilerplate. in diesem grundgerüst war die grundstruktur vorgegeben und bibliotheken wie modernizr.js, respond.js (bei mir noch nicht 100%ig implementiert) oder die CSS-ansätze für CSS-resets und media-queries enthalten, auf die ich aufbauen konnte. dank HTML5 ist die struktur der seite auch ansatzweise semantisch und etwas DIV-reduzierter als vorher. aber auch das ist noch verbesserungswürdig. ein paar microformate hatte ich bereits in der alten version eingebaut, neben hcard und dem datumsgedöns wie microformats es empfiehlt, ist jetzt auch das hnews-microformat, wie es von readability empfohlen wird, eingebaut. apropos datumsformat. bisher habe ich das datum immer so codiert, damit es suchmaschinen auch erkennen (bei google klappt das ganz gut):

<abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZ:ZZ">DD.MM.YYYY</abbr>

da ich das datum jetzt zweimal anzeige, steht das jetzt weiterhin unten mit <abbr> codiert und oben in html (der time-auszeichnung traue ich noch nicht so ganz):

<time class="published" datetime="YYYY-MM-DDThh:mm:ss+ZZ:ZZ" pubdate>DD.MM.YYYY</time>

nach dem boiler-plate-grundgerüst hab ich mir die ia-seite ziemlich genau angesehen und von dort einige CSS-styles einfach übernommen. anfangs auch das raster und die in sich zusammenfallenden spalten-konstruktionen für weniger breite browser-fenster.

von der boilerplate und dem ia-design habe ich auch die schriftgrössen übernommen: 100% oder 1em. ob das so bleibt oder welche schriften ich künftig verwende überlege ich noch. das feedback auf die 100%-schrift war ja auch nicht so dolle. vielleicht ist das alles wirklich noch nen tacken zu gross.

der spass am responsive-design ist natürlich, dass man nicht für ein layout, sondern mindestens drei layouts gestalten muss. die seitenleiste mit den artikelbildern oder der „factbox“ die im desktop-layout links rausragt, hat im layout fürs telefon oder tablet keinen platz mehr, muss also hübsch kollabieren. so sieht das dann aus:

* * *

auch die dreiecke für die aufklapp-slider haben auf mobilen geräten keinen platz, dort werden also per mediaquery statt dreiecken plus- und minuszeichen angezeigt. auch die favicons bei den links rücken auf dem desktop (grösser als 1024px) nach links, bei kleineren layout nicht.

die navigation hat mir ein bisschen kopfzerbrechen bereitet. grundsätzlich wollte ich das layout so minimalistisch wie möglich haben, fand aber eine hauptnavigation ausschliesslich am fuss etwas zu minimalistisch. für telefone bleibts dabei, ein klick aufs logo springt an den fuss zur hauptnavigation, von wo aus man auch wieder hochspringen kann. auf dem desktop öffnet sich rechts ein slider, der die hauptnavigation, aber auch die hauptkategorien und ein paar einstellmöglichkeiten anzeigt. der nachteil ist natürlich, dass man zum navigieren immer mindestens zwei klicks braucht. der vorteil ist, dass man in so einem slider ne menge unterbringen kann und den rest der seite schön minimalistisch halten kann.

einstellungen

die werbung konnte man auf wirres.net schon immer abstellen. früher über einen button in der hauptnavi und die taste „w“ (wie werbung). das kann man jetzt im seiten-slider machen. wenn man will. ebenso kann man auf den übersichtsseiten eine kompaktansicht aktivieren, entweder per button oder mit der taste x. das geht auch schon seit ein paar jahren (weil ich es praktisch fand), war aber nirgendwo dokumentiert. das isses jetzt. früher war die darstellung allerdings einfach so, dass der ganze artikel per jquery ausgeblendet wurde, jetzt habe ich das statt wie anfangs angedacht mit einem jquery-plugin der die texte kürzt, mit der höhe der article-auszeichnung gemacht, die ich per CSS verkleinere, unten eine linie und in webkit und mozilla browsern noch einen CSS-schatten einblende (CSS-code für den schatten im google-reader geklaut). find ich ziemlich toll, da so auch die bilder angeteasert werden. weitere einstellungen über die ich derzeit noch nachdenke sind ein optionaler instapaper-button hinter jedem täglichen link („read later“) und eine option die schriftart auf serifen oder so umzustellen. das funktioniert natürlich alles mit keksen, der browser merkt sich die einstellung also (für zwei wochen — könnt ich eigentlich auch länger speichern?).

faltmenues und social buttons

das social-button-gedöns nervt eigentlich ziemlich, aus genau drei gründen. die facebook-, +1- oder flattr-buttons sind alle irre hässlich, erhöhen die ladezeiten und erlauben den betreibern die besucher zu tracken. deshalb habe ich für facebook, google und flattr schon länger als heise eine zwei-klick-lösung eingebaut. das heisst die buttons werden nicht nur ausgeblendet, sondern sind bei zugeklappten menüs auch nicht geladen. erst wenn man den button explizit aufruft, wird der javascript-code der jeweiligen betreiber nachgeladen und der button gezeichnet. das ist jetzt etwas leichter zu erkennen als vorher, aber eigentlich ein alter hut.

ebenso die anzahl der reaktionen die ich von einem unterprogramm per json bei google, facebook, delicious, twingly, echo, twitter und flattr abfrage und zwischenspeichere (15 minuten). so kann ich unter und über jedem beitrag dynamisch die anzahl der reaktionen anzeigen, ohne dass eine http-anfrage vom benutzer an den jeweiligen button-betreiber geht. die queries und den code dafür kann ich bei interesse gerne hier veröffentlichen.

die blase neben der anzahl der reaktionen habe ich bei spreeblick geklaut, die grosse blase mit den einzelnen zahlen, macht der jquery-plugin tipped. ohne javascript sieht man die zahl der reaktionen natürlich nicht. wobei die noscript-version der seite und die printversion noch baustellen sind.

CSS3 pseudo-klassen

irre was man mit CSS-selectoren so alles selektieren kann. oder anders gesagt: darüber habe ich in den letzten wochen so einiges gelernt. man kann mit CSS zum beispiel alle bilder selektieren, die das alt-attribut „*“ haben:
img[alt ="*"]

der selektor mit der url des bildes oder links ist ja bereits ein klassiker:
img[src ^="https://root.wirres.net/videothumbs/"]

oder wenn man einen anker in der url hat, kann man die DIV oder die HTML auszeichnung mit der gleichen ID wie der anker selektieren und beispielsweise den hintergrund ändern (mach ich beispielsweise bei den permalinks für links (beispiel)):
div.linkitem:target {background-color:#f5fbfb;}

keine pseudoklasse, aber auch sehr hilfreich folgender CSS-code:
input, textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

damit werden beispielsweise bei iOS eingabe-felder die 100% breit sein sollen auch wirklich 100% breit angezeigt. ohne den code oben sind bestimmte felder trotz der 100%-breiten-deklaration breiter. trieb mich fast in den wahnsinn und sollte eigentlich in alle CSS-reset vorlagen mit aufgenommen werden.

keine selektoren, aber die CSS-transitions für effekte sind auch ganz toll und sparen ne menge jquery. das mokono-logo oben rechts hab ich vorher beispielsweise bei einem hover per jquery langsam ein und ausgeblendet. das geht jetzt per CSS. muss man nur wissen.
#mokonologo {opacity: .15;} #mokonologo:hover {opacity: 1;} #mokonologo { -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

jquery

ich beschreibe jquery immer so: das ist so einfach, dass selbst ein honk wie ich es versteht. neben allerlei selbst zusammengehackten code, benutze ich neuerdings folgende plugins:

schon länger folgende:

auf meiner todo-liste stehen noch ganz viele kleinigkeiten und beispielsweise ein HTML5-videoplayer, derzeit benutze ich einen flash-plugin ohne HTML5-fallback von 1975.

technisch begeistert mich das neue layout ziemlich doll. ich habe viel gelernt und habe noch viel zu lernen, was HTML5, semantik, schlanken aufgeräumten code und so angeht. sehr schön gemacht, vor allem im hinblick auf den code hat jeriko sein responsive-design übrigens. ein sehr schönes reaktionsfähiges layout, sauber gecodet. unübertroffen natürlich ia. oder diese 10. oder das wordpress react theme. alles ziemlich toll. und viel arbeit.

auch wenn das neue layout (noch) nicht allen gefällt und sich sicher noch ändern wird, mir gefällt die haptik der seite jetzt wieder. fühlt sich einfach besser an. und das war ja auch der sinn der aktion.