wirres.net redesign

felix schwenzel

wir­res hat an­ge­fan­gen mit ei­nem ta­bel­len-ba­sier­ten lay­out. ganz schreck­li­che kon­struk­tio­nen wa­ren das da­mals, aber so hat man das halt da­mals ge­macht.

vor ein paar jah­ren habe ich das lay­out dann ohne ta­bel­len, mit CSS und HTML ge­baut.

jetzt fand ich es an der zeit, ein lay­out zu bau­en das zu­min­dest an­satz­wei­se auf HTML5 ba­siert. an­satz­wei­se des­halb, weil die kon­struk­ti­on, glau­be ich, nicht­mal im traum den va­li­da­tor-test be­steht. aber auch das ist ein dau­er­zu­stand, seit bei­na­he 10 jah­ren. aus­ser­dem war mir nach mehr weiss­raum und vor al­lem nach ei­nem re­ak­ti­ons­fä­hi­gen (re­spon­si­ve) lay­out, ein lay­out also, dass kei­ne se­pa­ra­te mo­bil-site be­nö­tigt um auf mo­bi­len ge­rä­ten ei­ni­ger­mas­sen aus­zu­se­hen, son­dern sich mit hil­fe von me­dia-queries an das aus­ga­be­ge­rät, bzw. die dar­stel­lungs­fä­hig­kei­ten an­passt (das ist un­ter an­de­rem hier ganz schön er­klärt). denn auch das nerv­te mich ein biss­chen, wie wir­res.net auf dem mo­bil­te­le­fon aus­sah. vor zwei jah­ren war ich kurz da­vor eine se­pa­ra­te mo­bi­le ver­si­on zu bau­en, die die brow­ser-ken­nung ana­ly­siert und ent­spre­chend zur desk­top- oder mo­bil­va­ri­an­te wei­ter­lei­tet. das hät­te aber für je­weils eine sei­te, ver­schie­de­ne URLs er­for­dert. das fand ich dann doch ir­gend­wie doof.

die ba­sis für mein re­de­sign war die HTML5 boi­ler­p­la­te. in die­sem grund­ge­rüst war die grund­struk­tur vor­ge­ge­ben und bi­blio­the­ken wie mo­der­nizr.js, re­spond.js (bei mir noch nicht 100%ig im­ple­men­tiert) oder die CSS-an­sät­ze für CSS-re­sets und me­dia-queries ent­hal­ten, auf die ich auf­bau­en konn­te. dank HTML5 ist die struk­tur der sei­te auch an­satz­wei­se se­man­tisch und et­was DIV-re­du­zier­ter als vor­her. aber auch das ist noch ver­bes­se­rungs­wür­dig. ein paar mi­cro­for­ma­te hat­te ich be­reits in der al­ten ver­si­on ein­ge­baut, ne­ben hcard und dem da­tums­ge­döns wie mi­cro­for­mats es emp­fiehlt, ist jetzt auch das hnews-mi­cro­for­mat, wie es von re­a­da­bili­ty emp­foh­len wird, ein­ge­baut. apro­pos da­tums­for­mat. bis­her habe ich das da­tum im­mer so co­diert, da­mit es such­ma­schi­nen auch er­ken­nen (bei goog­le klappt das ganz gut):

da ich das da­tum jetzt zwei­mal an­zei­ge, steht das jetzt wei­ter­hin un­ten mit <abbr> co­diert und oben in html (der time-aus­zeich­nung traue ich noch nicht so ganz):

nach dem boi­ler-pla­te-grund­ge­rüst hab ich mir die ia-sei­te ziem­lich ge­nau an­ge­se­hen und von dort ei­ni­ge CSS-styl­es ein­fach über­nom­men. an­fangs auch das ras­ter und die in sich zu­sam­men­fal­len­den spal­ten-kon­struk­tio­nen für we­ni­ger brei­te brow­ser-fens­ter.

von der boi­ler­p­la­te und dem ia-de­sign habe ich auch die schrift­grös­sen über­nom­men: 100% oder 1em. ob das so bleibt oder wel­che schrif­ten ich künf­tig ver­wen­de über­le­ge ich noch. das feed­back auf die 100%-schrift war ja auch nicht so dol­le. viel­leicht ist das al­les wirk­lich noch nen ta­cken zu gross.

der spass am re­spon­si­ve-de­sign ist na­tür­lich, dass man nicht für ein lay­out, son­dern min­des­tens drei lay­outs ge­stal­ten muss. die sei­ten­leis­te mit den ar­ti­kel­bil­dern oder der „fact­box“ die im desk­top-lay­out links raus­ragt, hat im lay­out fürs te­le­fon oder ta­blet kei­nen platz mehr, muss also hübsch kol­la­bie­ren. so sieht das dann aus:

auch die drei­ecke für die auf­klapp-slider ha­ben auf mo­bi­len ge­rä­ten kei­nen platz, dort wer­den also per me­dia­query statt drei­ecken plus- und mi­nus­zei­chen an­ge­zeigt. auch die fa­vicons bei den links rü­cken auf dem desk­top (grös­ser als 1024px) nach links, bei klei­ne­ren lay­out nicht.

die na­vi­ga­ti­on hat mir ein biss­chen kopf­zer­bre­chen be­rei­tet. grund­sätz­lich woll­te ich das lay­out so mi­ni­ma­lis­tisch wie mög­lich ha­ben, fand aber eine haupt­na­vi­ga­ti­on aus­schliess­lich am fuss et­was zu mi­ni­ma­lis­tisch. für te­le­fo­ne bleibts da­bei, ein klick aufs logo springt an den fuss zur haupt­na­vi­ga­ti­on, von wo aus man auch wie­der hoch­sprin­gen kann. auf dem desk­top öff­net sich rechts ein slider, der die haupt­na­vi­ga­ti­on, aber auch die haupt­ka­te­go­rien und ein paar ein­stell­mög­lich­kei­ten an­zeigt. der nach­teil ist na­tür­lich, dass man zum na­vi­gie­ren im­mer min­des­tens zwei klicks braucht. der vor­teil ist, dass man in so ei­nem slider ne men­ge un­ter­brin­gen kann und den rest der sei­te schön mi­ni­ma­lis­tisch hal­ten kann.

einstellungen

die wer­bung konn­te man auf wir­res.net schon im­mer ab­stel­len. frü­her über ei­nen but­ton in der haupt­na­vi und die tas­te „w“ (wie wer­bung). das kann man jetzt im sei­ten-slider ma­chen. wenn man will. eben­so kann man auf den über­sichts­sei­ten eine kom­pak­t­an­sicht ak­ti­vie­ren, ent­we­der per but­ton oder mit der tas­te x. das geht auch schon seit ein paar jah­ren (weil ich es prak­tisch fand), war aber nir­gend­wo do­ku­men­tiert. das is­ses jetzt. frü­her war die dar­stel­lung al­ler­dings ein­fach so, dass der gan­ze ar­ti­kel per jquery aus­ge­blen­det wur­de, jetzt habe ich das statt wie an­fangs an­ge­dacht mit ei­nem jquery-plug­in der die tex­te kürzt, mit der höhe der ar­tic­le-aus­zeich­nung ge­macht, die ich per CSS ver­klei­ne­re, un­ten eine li­nie und in web­kit und mo­zil­la brow­sern noch ei­nen CSS-schat­ten ein­blen­de (CSS-code für den schat­ten im goog­le-rea­der ge­klaut). find ich ziem­lich toll, da so auch die bil­der an­ge­teasert wer­den. wei­te­re ein­stel­lun­gen über die ich der­zeit noch nach­den­ke sind ein op­tio­na­ler in­sta­pa­per-but­ton hin­ter je­dem täg­li­chen link („read la­ter“) und eine op­ti­on die schrift­art auf se­ri­fen oder so um­zu­stel­len. das funk­tio­niert na­tür­lich al­les mit kek­sen, der brow­ser merkt sich die ein­stel­lung also (für zwei wo­chen — könnt ich ei­gent­lich auch län­ger spei­chern?).

faltmenues und social buttons

das so­cial-but­ton-ge­döns nervt ei­gent­lich ziem­lich, aus ge­nau drei grün­den. die face­book-, +1- oder flattr-but­tons sind alle irre häss­lich, er­hö­hen die la­de­zei­ten und er­lau­ben den be­trei­bern die be­su­cher zu tra­cken. des­halb habe ich für face­book, goog­le und flattr schon län­ger als hei­se eine zwei-klick-lö­sung ein­ge­baut. das heisst die but­tons wer­den nicht nur aus­ge­blen­det, son­dern sind bei zu­ge­klapp­ten me­nüs auch nicht ge­la­den. erst wenn man den but­ton ex­pli­zit auf­ruft, wird der ja­va­script-code der je­wei­li­gen be­trei­ber nach­ge­la­den und der but­ton ge­zeich­net. das ist jetzt et­was leich­ter zu er­ken­nen als vor­her, aber ei­gent­lich ein al­ter hut.

eben­so die an­zahl der re­ak­tio­nen die ich von ei­nem un­ter­pro­gramm per json bei goog­le, face­book, de­li­cious, twing­ly, echo, twit­ter und flattr ab­fra­ge und zwi­schen­spei­che­re (15 mi­nu­ten). so kann ich un­ter und über je­dem bei­trag dy­na­misch die an­zahl der re­ak­tio­nen an­zei­gen, ohne dass eine http-an­fra­ge vom be­nut­zer an den je­wei­li­gen but­ton-be­trei­ber geht. die queries und den code da­für kann ich bei in­ter­es­se ger­ne hier ver­öf­fent­li­chen.

die bla­se ne­ben der an­zahl der re­ak­tio­nen habe ich bei spree­blick ge­klaut, die gros­se bla­se mit den ein­zel­nen zah­len, macht der jquery-plug­in tip­ped. ohne ja­va­script sieht man die zahl der re­ak­tio­nen na­tür­lich nicht. wo­bei die no­script-ver­si­on der sei­te und die print­ver­si­on noch bau­stel­len sind.

CSS3 pseudo-klassen

irre was man mit CSS-sel­ec­to­ren so al­les se­lek­tie­ren kann. oder an­ders ge­sagt: dar­über habe ich in den letz­ten wo­chen so ei­ni­ges ge­lernt. man kann mit CSS zum bei­spiel alle bil­der se­lek­tie­ren, die das alt-at­tri­but „*“ ha­ben:

der se­lek­tor mit der url des bil­des oder links ist ja be­reits ein klas­si­ker:

oder wenn man ei­nen an­ker in der url hat, kann man die DIV oder die HTML aus­zeich­nung mit der glei­chen ID wie der an­ker se­lek­tie­ren und bei­spiels­wei­se den hin­ter­grund än­dern (mach ich bei­spiels­wei­se bei den per­ma­links für links (bei­spiel)):

kei­ne pseu­do­klas­se, aber auch sehr hilf­reich fol­gen­der CSS-code:

da­mit wer­den bei­spiels­wei­se bei iOS ein­ga­be-fel­der die 100% breit sein sol­len auch wirk­lich 100% breit an­ge­zeigt. ohne den code oben sind be­stimm­te fel­der trotz der 100%-brei­ten-de­kla­ra­ti­on brei­ter. trieb mich fast in den wahn­sinn und soll­te ei­gent­lich in alle CSS-re­set vor­la­gen mit auf­ge­nom­men wer­den.

kei­ne se­lek­to­ren, aber die CSS-tran­si­ti­ons für ef­fek­te sind auch ganz toll und spa­ren ne men­ge jquery. das mo­ko­no-logo oben rechts hab ich vor­her bei­spiels­wei­se bei ei­nem ho­ver per jquery lang­sam ein und aus­ge­blen­det. das geht jetzt per CSS. muss man nur wis­sen.

jquery

ich be­schrei­be jquery im­mer so: das ist so ein­fach, dass selbst ein honk wie ich es ver­steht. ne­ben al­ler­lei selbst zu­sam­men­ge­hack­ten code, be­nut­ze ich neu­er­dings fol­gen­de plug­ins:

schon län­ger fol­gen­de:

auf mei­ner todo-lis­te ste­hen noch ganz vie­le klei­nig­kei­ten und bei­spiels­wei­se ein HTML5-vi­deo­play­er, der­zeit be­nut­ze ich ei­nen flash-plug­in ohne HTML5-fall­back von 1975.

tech­nisch be­geis­tert mich das neue lay­out ziem­lich doll. ich habe viel ge­lernt und habe noch viel zu ler­nen, was HTML5, se­man­tik, schlan­ken auf­ge­räum­ten code und so an­geht. sehr schön ge­macht, vor al­lem im hin­blick auf den code hat je­ri­ko sein re­spon­si­ve-de­sign üb­ri­gens. ein sehr schö­nes re­ak­ti­ons­fä­hi­ges lay­out, sau­ber ge­codet. un­über­trof­fen na­tür­lich ia. oder die­se 10. oder das word­press re­act the­me. al­les ziem­lich toll. und viel ar­beit.

auch wenn das neue lay­out (noch) nicht al­len ge­fällt und sich si­cher noch än­dern wird, mir ge­fällt die hap­tik der sei­te jetzt wie­der. fühlt sich ein­fach bes­ser an. und das war ja auch der sinn der ak­ti­on.