Bloghegesztés 2. rész – Layout

2013. november 9. - kategória: blog webdev

A cikk első részében a WordPress-től eltávolodásról, és a visszatérésről írtam, ezúttal a felfrissített layoutról írok pár gondolatot.

Az előző layout kvázi ugyanígy nézett ki, annyi különbséggel, hogy a szélességeket anno az eredeti témában beállított értékeken hagytam, és a lábléc kihasználatlan volt. Most viszont egy kicsit továbbgondoltam a kérdést. Első körben még a reszponzív oldal is felmerült bennem, de rájöttem, hogy baromira nincs rá szükségem. Egyrészt kevés vagyok hozzá kódolás oldalról, másrészt az új méret reszponzivitás nélkül is teljes élményt nyújt iPaden, fekvő módban (álló módban ki a rák használja egyátalán a tabletjét?).

A blog tehát egy 960 px széles bodyban terül el: 700-as kontent, 30 px szünet, 200-as oldalsáv, kétoldalt pedig 15 px margó. Ez a méret pont jó az 1024×768-as felbontásra, ami a 2013-as felmérések szerint még mindig az egyik legnépszerűbb. Az iPad mini is ezzel operál, és valójában a retina iPad is erre van optimalizálva, csak dupla pixelsűrűséggel.

Aki okostelefonon nézi az oldalt, annak sincs túl nagy gondja az olvasással. iPhoneon például 1.) a sidebar mérete csökken, míg a kontent egész jól olvasható marad, 2.) jól célzott dupla pattintással gyönyörűen ki lehet nagyítani teljes kijelző szélességre a kontentet, vagy az oldalsávot. Na, emiatt nem kínlódok még 5 napig a reszponzív kódhegesztéssel. Lassabb is tőle az oldal, dizájn szempontjából nem látom sok értelmét, plusz én is csak őszülök. Jó, ha az olvasóim 1%-a nézi telefonról az oldalt, aki pedig ennél nagyobb eszközt használ, nem lesz problémája a tartalom böngészésével.

Olvashatósági szempontból a jobb oldalsávos elrendezést találom megfelelőnek. Az emberi szem genetikai okokból F alakban pásztázza a kijelzőt, így az oldal megnyitásakor a bal oldalán fut végig először, majd nézi a jobb oldala felé az bekezdéseket. Ezért fontos, hogy minden lényeges infó az oldal, illetve az első két bekezdés bal szélén helyezkedjen el.

Határozottan meg akartam tartani a distraction-free dizájnt, ezért továbrra sem erőltettem a fejlécet, és a háttérképet. Nagy fejléckép használata esetén minden alkalommal lejjebb kell görgetni az oldalt, ha két bekezdésnél hosszabbak a bejegyzések, így viszont kényelmesen el lehet olvasni 3-4 bekezdésnyi szöveget, görgetés nélkül. Persze, jól néz ki, ha valami hiperfantasztikus fejléce van az embernek, én viszont akkor sem gondolnék többre magamnak egy flat, egyszínű fejlécnél, ha ütnének.

A distraction-free dizájnhoz hozzá tartozik, hogy a kevésbé fontos, mégis említésre méltó infók a láblécbe kerültek, az oldalsávra csak linkek, a keresés, a kategóriák, és a hónapok szerinti archívum került. Az archívumot és a kategóriákat tervezem áttenni egy dedikált oldalra, mert pár hónap múlva már elég hosszú lista kerekedik az oldalsávon, így kezd zavaróvá válni. Egyelőre marad, pár hónap, és bejegyzés múlva több értelmét látom, mint most.

Kommentálni nem lehet, mert nincs sok kedvem néhány értelmes hozzászóló mellett köcsög trollokkal küzdeni, így a layout felépítésénél ilyesmire nem is kellett gondolnom. Nem úgy, mint a színekre, és a tipográfiára, amiről a sorozat következő részében fogok írni.