Blog Redesign

Dupa cum puteti vedea cu ochiul liber, blogu lu gavagai arata diferit. Dupa unele persoane, arata chiar mai rau. Dupa altele, cu mult mai bine. Dupa mine arata doar altfel, si cred ca asta e lucrul cel mai important. In cele ce urmeaza, am sa va explic de ce am simtit nevoia sa-l fac sa arate diferit si am sa fac o lista a modificarilor (php si css).

Necesitatea schimbarii

Schimbarea a fost necesara din cel putin doua motive.

Unu: Ne saturasem cu totii de vechiul look. Mie nici nu-mi mai venea sa scriu. Nici macar sa mai deschid un tab cu gavagai.ro in adressbar. E foarte trist ca sunt atat de superficial, dar, cu varsta, am ajuns sa ma resemnez.

Doi: Adecvarea designului la continut. Vechiul design era cam impersonal si nu reusea sa sugereze in nici un chip motivul pentru care cei cativa oameni care ma citesc isi pierd vremea si-si obosesc ochii si degetul de scroll pe gavagai.ro. Era un design care putea sa-nsemne orice.

Am inceput deci prin a asuma ca veniti aici pentru texte. Nu pentru poze, nu pentru ultimele stiri, pentru barfe sau pentru ca e la moda. Acesta fiind motivul (presupus, ca, sincer vorbind, nu stiu de ce veniti), se impunea sa fac un desen care sa vina in intampinarea acestui motiv. Deci sa ma joc de-a tipografia.

Schimbarile

Mai intai, asa cum ati observat de ceva vreme, un favicon nou si mai clean.

Header-ul. L-am facut ceva mai ingust, pentru a lasa mai mult loc pentru continut deasupra fold-ului (chestie care tine seama si de aglomerarea toolbar-urilor din Mozilla). Am pastrat tusa grunge din coltul din stanga sus. Si pentru ca prezenta ei este adecvata stilului, si pentru continut (o pata de cerneala), si pentru ca absenta ar fi sporit sentimentul de dezradacinare.

Imaginea din coltul dreapta-sus nu este un logo. E doar un desen menit sa le-aminteasca vizitatorilor ocazionali adresa blogului, care, dupa cum am stiut-o inca de cand am cumparat domeniul, nu este foarte evidenta.

Bara de navigare e de-a dreptul banala. Nu trebuie sa fie neaparat asa, dar n-am avut rabdare sa fac ceva in privinta unicitatii sale. Ea trebuie doar sa echilibreze pagina, ca sa n-avem senzatia ca ne scufundam. Paginile sunt listate prin html simplu si nu prin functia de list pages. Html-ul si css-ul sunt simplificate; n-am folosit tagurile traditionale ul-li-a, ci li-a, fiindu-mi lene sa fac un css decent si multumindu-ma sa bag spatii “albe” in html. Va trebui totusi sa fac ceva in privinta alinierii casetei de cautare, care urca nepermis de mult in versiunile mai vechi de IE. Internet Explorer-u-asta, daca nu stiati, e principalul factor care afecteaza rata de suicid in randul designerilor.

Si, pentru ca tot vorbesc de partea de sus, hai sa mentionez si ca am modificat scriptele din head, care generau prea multe call-uri php. Acolo unde a fost posibil, le-am inlocuit cu text, html si direct paths. Asta ca sa nu va supun rabdarea la incercare si procesoru la eforturi inutile. To do: ar trebui sa integrez css-ul de print in css-ul principal.

Prima pagina, daca aveti chef sa va uitati, arata mai aerisit. Are chiar si poze, gratie unui script care cheama din baza de date imaginile atasate posturilor. Cand nu sunt imagini atasate, scriptul cheama o poza cu o pata de cerneala, sugerand atributul de ciorna al teztului. Decizia e un pic contradictorie cu premisa ca veniti pentru texte; spun “un pic”, pentru ca presupusa voastra motivatie nu implica neaparat monotonia derularii continutului.

Am limitat numarul de texte de pe homepage pentru ca faceam risipa de timp de incarcare. Daca o sa-mi treaca prin cap sa public cate 10 texte pe zi, am sa caut o solutie diferita.

Posturile afisate pe prima pagina au dimensiuni relativ egale gratie unui mic script care customizeaza excerptul din core-ul wordpress. (Sa nu uit sa bag vreo doua spatii inainte de link-ul catre pagina textului.) Customizarea asta a excerptului nu era tocmai necesara, dar am pastat-o din niste porniri greu de explicat. Ea isi are senul intr-un alt tip de layout, care profita de spatii egale si un feel de magazine-style (care ar fi totusi foarte nepotrivit aici).

Liniile care separa textele au devenit argintii. Griul inchis de data trecuta (#333) era prea strident si deranjant, sugerand lipsa de legatura de doctrina si substanta dintre texte. Or textele, impreuna, chiar daca sunt entitati discrete, tes o singura poveste (ramane de stabilit care este aia).

Link-urile de navigare din partea de jos a paginii sunt la fel de banale ca si pana acum.

Footer-ul a ramas in principiu la fel, numai ca am simtit nevoia sa-l separ de restul paginii. I-am adaugat link-uri catre categorii (sa verific daca sunt toate si sa schimb alinierea textului). Da, si sa nu uit sa schimb culoarea link-urilor.

Sidebarul isi pastreaza forma si dimensiunile generale. A trebuit totusi sa modific dimensiunile celor doua coloane inguste, din motiv de proasta aliniere in Internet Explorer. Am mutat ad-ul ceva mai sus; nu pentru a creste rata de click, ci din motive de echilibru. Am renuntat cu totul la wiget-uri si am  inlocuit afisarea clasica a comentariilor recente cu una care sa puna accentul pe ceea ce se spune, nu pe locul in care se spune; am banuiala ca e mai important. Scriptul folosit in sensul asta imita comportamentul vechiului plugin “recent comments” (care nu mai poate fi folosit in versiunile mai noi de wordpress). Elementelor listelor sunt separate de linii; cred ca-i o solutie provizorie, la care am recurs din pricina hidoseniei initiale a listelor din coloanele inguste.

Sidebarul paginilor individuale ale textelor este diferit, gratie unui tag conditional si unui script care serveste o lista de texte din aceeasi categorie (tinand seama de caracterul haotic blogului, chestia asta e cam inutila).

Paginile individuale ale textelor au ramas, in mare, neschimbate (ma refer la layout). In coltul din dreapta-jos am adaugat o mica semnatura, cu menirea sa sugereze ca postul de mai sus e un soi de scrisoare.

Elementele tipografice

Asta este nivelul la care schimbarea a fost cea mai radicala. Am renuntat la vechiul font, Verdana, in favoarea Georgiei, comandata de Micrososoft tot pentru web. Sincer, ma cam saturasem de gavagai cu aroma sans serifs. Ca doar textele cu care ne trecem vietile arata altfel. Georgia se gaseste in toate versiunile de Windows si MacOS. N-am verificat daca exista un font corespondent in Linux.

Titlul blogului si headingurile din sidebar arata in felul asta gratie unui plugin (fancytype) integrat in framework-ul css Blueprint (cu toate multumirile care se impun). Titlurile textelor sunt scrise cu familiarul Times New Roman.

Paragrafele au capatat un mic indent si o capitala diferita. Este posibil sa fie de prost-gust, dar nu mi-a venit alta idee atunci cand am cautat sa rup monotonia blocului textual. Capitala personalizata nu poate fi vazuta in Internet Explorer (6).

Headline-urile chiar ca sunt de prost gust, sau macar de neam prost. Fontul este de 20 de pixeli, iar inaltimea randului de 21. Sunt constient ca arata ciudat, dar nu stiam cum as putea sa sugerez mai bine amestecul de cuvinte care mi se-nvartejeste-n cap. In Chrome – si deci si in Safari , capitala headline-urilor e cel putin stranie, dar asta se datoreaza tratamentului pseudo-elementelor css. Hai ne vedem in css 3 :)

Pai cam astea ar fi modificarile.

Ganduri si intrebari

Tema Everest

In prima instanta, ma gandisem la un layout mult mai spectaculos, construit pe grid-ul din Blueprint si cu multiple loops. A iesit o tema draguta, care se cheama Everest. Cel mai mare defect al ei e insa neadecvarea la continut. Daca o sa am vreodata rabdarea sa o fac s-arate bine in mai multe browsere si sa-i scriu un css decent, am s-o distribui. Pana atunci, ne multumim cu un print screen (click pe poza pentru dimensiune mare).

Avantajul oferit de Everest e ca scade cu mult timpul de incarcare al paginii (se afiseaza intr-un framework si a renuntat la a mai chema sidebar-ul – care-i o coloana, ca-n css 3).

In cele din urma, am zis sa nu va propun o schimbare chiar asa de radicala si de neadecvata.

Acuma, ca v-am povestit, cum vi se pare? Si cum se vede la voi in browser? Ma rog, intreb cam degeaba, ca nu cred c-a avut cineva rabdare s-ajunga pan-aici.  Hai va iubesc.

— scris de gavagai