• 3 percnyi olvasnivaló • Geri 🎻

Blog redesign part 2: olvashatóság

Az előző verzió talán legidegesítőbb jellemzője a pocsék olvashatóság volt. Teljes kijelző szélességet kitöltő sorok, megkülönböztethetetlen címsorok. Ennek most vége.

Vallomás

Bevallom, már két ünnep között orvosolni akartam ezt a problémát. Az viszont világossá vált számomra, hogy anélkül nem tudok mit csinálni, hogy előtte ne tanulnék egy kicsit a PostCSS-ről és a Tailwind CSS-ről.

Az van, hogy a Ghost (a CMS amit használok) a {{content}} helpert egyben cseréli ki az adott post tartalmára (kivéve cím és kivonat). Emiatt nem tudtam a Tailwind classokat egyszerűen a HTML elemekhez rendelni. Mivel a Tailwind CSS első sora a Normalized CSS-sel kezdődik, ami nulláz minden alap böngésző formázást (ezzel egy közös alapot adva), minden H2 címsor, idézet és bekezdés ugyanúgy nézett ki és még margin sem volt közöttük. Konkrétan olyan csúnya volt, hogy mikor megírtam a 2020-as visszatekintő cikket, a barátnőmön kívül nem mertem megosztani senkivel.

Ma 2021 január 9, szombat van. Ezt a napot arra szántam, hogy kezdjek valamit ezzel a problémával.

PostCSS és Tailwind

Azt vettem észre, hogy legjobban fejlesztői témában videókból tudok tanulni. Annó Laravel témában zabáltam Jeffrey Way Laracasts videióit is. Szerencsére most megtaláltam Adam Wathan, a Tailwind CSS keretrendszer egyik alkotójának YouTube videóját amiben pont azt mutatja be, milyen egyszerű elkezdeni a barátkozást a PostCSS-Tailwind párossal.

Na most ha valamit megtanultam a PHP-Pistike múltamból az az, hogy a fejlesztői környezetek beüzemelése és karbantartása nem triviális. Az utolsó karakterig úgy csináltam mindent ahogy a videóban Adam, mégis error hegyeket kaptam a terminálban az npm run build parancsra. Órákat túrtam a Google-t, remélve más is belefutott már ebbe, de megoldást nem találtam. Végül véletlen az oldotta meg a problémát, hogy a Tailwind oldalán feltűnt, hogy a videóban látottól eltérő a tartalma a postcss.config.js-nek. Kicseréltem, működik.

Lényeg: ahelyett, hogy CDN-ről húznám be az előre buildelt CSS-t, most már magam tudom fordítani a saját igényemre szabva.

Eszközölt változtatások

Az egész blog redesign sorozat elején azt ígértem, SEO szempontból dokumentálom majd a történéseket. Ez a post még nem erről szól, sorry. A következők azok számára lehet érdekes, akik éppen ismerkednek a Tailwind CSS-sel, vagy kacérkodnak a saját oldal csinosításán.

Oldalszélesség

Ahelyett, hogy minden szöveg és kép olyan széles lenne, amilyet a kijelző megenged, most a <body> max-w-screen-md-vel 768px szélességre van korlátozva. Ez azt gondolom egy kényelmes szélességet ad. Van, hogy a képek miatt keskenynek hat, de véleményem szerint ennél szélesebb sorokat már kényelmetlen lenne olvasni.

Hogy ne legyen minden tartalom baloldalra csúszva, mx-auto-val középre van igazítva az oldal. px-4 ad 1rem-nyi padding-ot két oldalra, ez főleg mobilon nézet miatt fontos, hogy ne érjenek a képek és a betűk a kijelző széléhez.

Menü

Főleg két oldal volt a fejemben, amire úgy emlékeztem, hogy tetszett a menüje. Az egyik a Things 3 bemutató oldala, a másik Stefan Zweifel fejletsző oldala. Mind a kettő nagyon egyszerű, semmi csicsa, átlátható, könnyen kezelhető akár mobilon is. Fontos szempont volt nekem, hogy mivel kevés aloldalam van, nem akartam hamburger menüs, valamilyen JS által aktivált megoldást. Elhiszem, hogy van ahol a sok menüpont miatt ezt nem lehet kikerülni, de emlékeztetnem kell magamat, hogy a cél a Lighthouse szerinti 100 pont. Ott kell "spórolni" az erőforrásokkal, ahol csak lehet. Sokat nem tudok egyébként a menü kialakításához hozzáfűzni, lemásoltam az emlitett oldalakét. Annyi a különbség, hogy az menüm elemeinek jelenleg nincs hover és active állapota, ezt majd a jövő zenéje lesz.

Címsorok

A Ghost-ban H1, H2 és H3 címsorokat tudok a szerkesztőből kezelni. A H1 az adott oldal címe. SEO szempontból minden oldalnak kell, hogy legyen címe, ugyanitt értelem szerűen minden oldalnak csak egy lehet. Ami a megjelenést illeti itt három mérettel játszottam. Mobilon text-4xl méretű a H1, majd 768px felett md:text-5xl és 1024 pixel böngésző ablak szélesség felett lg:text-6xl nagyok a betűk. Szeretem ha hangsúlyosak a címek, na.

H2 címsorok a H1 legkisebb méretétől is egyel kisebbek, text-3xl méretűek. A sor így folytatódik. H3 text-2xl és a hétköznapi <p> bekeztések pedig text-xl méretűek. A cél az volt, hogy valamiféle hierarchia legyen közöttük.

Bekezdések

Szeretem, ha kényelmesen olvasható a szöveg, így itt is megnöveltem kicsit a betűméretet (ahogy az előző bekezdésben is írtam text-xl), illetve kapott 1rem-nyi margint felülre, hogy a bekezdések távolabb kerüljenek egymástól, úgymond szellősebbek legyenek.

Ami még hátra van

Hosszú még a lista. Egyrészről még semmit nem tekintek késznek. Azt gondolom, ez is egy evoolúciós folyamat, simán lehet, hogy hetek hónapok múlva már nem ezek lesznek a beállítások. Tudjátok, vannak azok az oldalak amiket olyan kényelmes olvasni. Szépek a betűk, kellemes a kontraszt, kényelmes a sorok ritmusa. Ez a cél itt is.

Messze a legnagyobb falat a képek kiszolgálása és megjelenítése lesz. Egyszerűen 2020-ban nem úgy működik, hogy van egy trükk amitől optimalizáltak lesznek a képek és kész. Nem, 10 trükköt kell egyszerre alkalmazni amiket fejből még nem tudok. Utána kell kicsit járni.

Nincs még az oldalnak <footer>-e. 🤷🏻‍♂️

Egyszóval van még min dolgozni és a technikai SEO jellegű csiszolások még csak ezután jönnek. Tervezek még egy külön postot a képeknek, majd az azutáni már pure SEO joy lesz. Köszi ha ezt mind elolvastad.

👋