Ébredés a több évig tartó álomból

Hosszú 6 év telt el 2011 óta, amikor utoljára történt változás a weboldal külalakjában, de most végre frissült a sablon.

Akkoriban még csúcstelefon volt a Galaxy S3 (elég nosztalgikus a cikk), az Android 4 Ice Cream Sandwich újnak számított, a képernyőfelbontás átlagosan 480*800 körül alakult, és többek között ebben az évben nyergeltem át HTC Desire-ről S2-re. Aktív okostelefon felhasználóként nagy öröm volt, hogy a korábbi, csak számítógép képernyőre optimalizált sötét sablon után egy elegáns, világos és a legfontosabb, hogy reszponzív felület állt szolgálatba. A CSS media query-k lenyűgöztek, hogy már hol tart a technika, és nagyon menő volt, hogy az ismerősök blogjai még alig tudták ezt. Az eltelt idő alatt azonban a mobiloptimalizció a mindennapok részévé vált, hiszen a telefonok felbontása már kb. alapértelmezetten full HD (1080*1920) vagy nagyobb, és minden, magára valamit is adó oldalnak kitűnően kell(ene) működnie és megjelennie minden platformon.

Pontosan ez az, amivel eddig nem tudtam foglalkozni, az élet lassan elment az oldal mellett. A dizájnból hiányoztak fontos mobil- és tablet töréspontok, nem vette figyelembe a nagy vagy extra-nagy felbontásokat, kezdett “cikivé” válni az elavultsága. Annál is inkább, mert a sok nem-frissítésből eredően már olyan is előfordult, hogy egy WordPress bővítmény ismert biztonsági hibáját kihasználva valami automata hack-elő program az én oldalamat is ISIS propagandává alakította, és pár órán át arab zenével fogadta a látogatókat 😀 Szerencsére egy korábbi biztonsági mentésből szinte azonnal vissza tudtam állítani mindent, és be tudtam foltozni a kihasznált hibát is, de utána ismét a feledés homályába merült az oldal.

Valamilyen szinten 22-es csapdája szituáció alakult ki: nem tettem ki posztokat, mert nem akartam (a szerintem) elavult oldalra látogatókat terelni, de a frissítésre sem volt időm, ezért egyre inkább kezdett elavulni. Persze akinek nem volt még weboldala, vagy nem követte a trendeket, valószínűleg fel sem tűnt semmi, mert amúgy csinos volt a dizájn, maximum csak azt érzékelte, hogy nincs friss poszt.

A 2015 végi két hetes szünet alatt végül is összeszedtem magam, egy csomót nézelődtem és kutattam WordPress sablonok után, mire megtaláltam A Sablont, ami most is az oldal felületét adja. Localhost-on (egy helyi másolat az oldalból, nem az éles példány) elkezdtem rászabni a meglévő tartalmakra, de annyira sikerült elveszni a részletekben, hogy végül kifutottam az időből, és az újrakezdődő munka mellett már nem folytattam. Ez egy ún. többcélú sablon, tetszőleges dizájnokat meg lehet benne valósítani, pusztán azzal sikerült napokat eltölteni, hogy a beállításokat átnézzem, kipróbáljam, mi-mire jó, mit okoz, stb. Emellett rengeteg hibát is felfedeztem, amit kijavítottam, és beküldtem a készítőknek, nem csak a sablon, de pár bővítmény esetében is. Továbbá szintén több napig tartott, mire kontextusfüggően lefordítottam az összes beépített feliratot mind a publikus oldalakon, mind az admin-ban. Jó érzés volt ezeket mindet visszaforgatni a közösségbe (opensource!), azonban a fejlesztés ugye elakadt.

Idén márciusban határoztam el újra, hogy nekiülök, és végre ledarálom a maradék feladatokat. Legalább 3 különböző listám volt a teendőkről, ezeket átnéztem, priorizáltam, töröltem ami időközben frissítésekkel megoldódott, majd elhelyeztem egy ún. mind map-en. Ez egy olyan diagram, ami információk, teendők, ötletek vizuális rendszerezésére szolgál, fel lehet benne építeni hierarchiát, függőségeket. A SimpleMind szerkesztője minden platformra elérhető, én az Android-os változat használata mellett tettem le a voksom, mert így ha ebédszünetben, útközben, lefekvés után, vagy bármikor eszembe jutott egy új gondolat, azonnal el tudtam helyezni a diagramon. Napról napra bővülve a végső állapot így nézett ki:

Kuszának tűnhet, de eddig pont azért nem volt sikeres a megújulás, mert nem volt elég szervezett. Most viszont megrendelőből átültem a projektmenedzseri székbe (már itthon is:D), és jól kiosztottam magamnak a pontosan körbehatárolható feladatokat. A fejlesztéssel nem is volt sok gond, a dizájn kérdéseknél viszont kicsit féltem, hogy ismét sokat elszöszölök. Jó ötletnek bizonyult, hogy a korábbi nagy átalakítási terveket leszűkítettem, hogy csak annyi készüljön el az ötletekből, hogy a korábbi oldal minden funkciója működjön lehetőleg minél kisebb energiabefektetéssel.

Nem alakítottam át a menüt, a kapcsolat oldal is némileg vérszegény maradt, de legalább minden elérhető és működik, mint korábban, csak minden sokkal szebb és modernebb. Nagyon sok ötletem van még, amit a következő időszakban folyamatosan beépítek vagy átalakítok majd, de most csak azt nézzük meg, hogy mi az, ami újdonság.

Az oldal teljes felszíne: Nyilván. Maradt a korábbi fehér alap, nagyon szerettem korábban is nem csak olvashatósága miatt (a sötét alapon világos betűktől összefolyik a szemem), de letisztult és elegáns megjelenést is ad. A térközök mindenhol nagyobbak, szellősebb a felület, és mindez dinamikusan változik, ha különböző felbontásokon nézzük. A mobilos menü külön is láv!

Logó: Alapvetően nem designer vagyok, ezért mindig sok-sok munka árán sikerül csak eljutni az “elég jó, legyen ez” szintig. Még tavaly rajzoltam meg ezt a változatot, a favicon-ban már a korábbi oldalon is megjelent, de itt végre elnyerte méltó helyét. Feltétel volt, hogy vektorgrafikusan és monokróm is működjön. A végleges változatot SVG-ben kódoltam le kézzel, minél kisebb fájlméretre törekedve, jó kis tanulás volt ez is. Egy i-betű és egy ! (felkiáltójel), vagyis i! (i faktoriális) → immánuel factor → immánuel fodor. Ha béna, bocs, küldj jobbat 😀

Lájkolás: Korábban volt facebook lájk és Google Plus gomb is, kiszedtem, felesleges, és lassítja az oldal betöltését is. Helyette lett megosztás minden bejegyzés alján, szekszi komment űrlap, és egy szívecske, ami kattintható, és számolja, hogy hányan kattintották meg. Próbáld ki majd te is!

HTTPS: Már tavaly beállítottam, hogy biztonságos kapcsolaton keresztül legyen elérhető az oldal (jót tesz a Google keresési találatoknak is), de nem tettem alapértelmezetté. Egyrészt a https-re migrálás során mélyebben bele kellett volna nyúlni az adatbázisba és a forráskódba, amire nem volt időm, így tele volt mixed content warning-okkal a böngésző konzol (https kapcsolat alatt megjelenő http tartalom, pl. képek), másrészt akkor már nem a régi oldalt hegesztem tovább, hanem az újat. A korábbi, SSL tanúsítványt saját magam igénylős, kézzel beállítós, lejárati idő figyelős, manuálisan megújítós megoldást idő közben leváltotta a tárhelyszolgáltató Let’s Encrypt támogatásának bevezetése, így már oda sem kell figyelni, magától megújul a tanúsítvány. Ha már van biztonságos kapcsolat, legyen mindig az, így a HSTS-t is engedélyeztem, és a Chrome hsts előtöltési listájába is bekerült az oldal (ha bárki életében először beírja az immanuel60.hu címet a böngészőbe, az már alapértelmezetten https-en csatlakozik hozzá, nincs megelőző http→https átirányítás). Mivel az oldal fejlesztői példánya localhost-on van, ezért ott is be kellett állítani a https támogatást, ez nem is volt annyira egyszerű, mint elsőre hangzik. A fő gond, hogy a Chrome tiltja a helyi, fejlesztői célra generált https tanúsítványok használatát egyéni domain mellett (csak a https://localhost engedélyezett, az is csak trükkel, immanuel60.local vagy .dev vagy bármi más nem), így végül az lett a megoldás, hogy az éles oldal tanúsítványait telepítettem a saját gépemre, és localhost-on is immanuel60.hu az oldal elérése. Az éles és a helyi oldal közötti váltásra pedig írtam egy olyan batch szkriptet, ami a Windows hosts fájlját tudja szerkeszteni, így egy kattintás, és a lokális oldalt érem el ugyanazon a címen, még egy kattintás, és már a távoli szerverről tölt be az oldal. Hack, de legalább stabilan működik. A migráció végén jelent meg a Stack Overflow blogbejegyzése, amiben részletesen megtárgyalják, hogy nekik miként sikerült éveket eltölteni az átállással, szuper volt úgy olvasni, hogy már mindent értettem az előzetes saját tapasztalatok alapján 😀

CDN: Elég sok a kép mint tartalom az oldalakon, ezért ha tudod, hogy a böngészők maximum 6 párhuzamos kapcsolatot tartanak fenn egy domain-nel, akkor könnyen belátható, hogy 6+ hivatkozott fájl esetén a 6-on felüli többi fájlnak várnia kell, ameddig nem lesz szabad kapcsolati hely elérhető. A CDN (content delivery network) ezt meg tudja gyorsítani, hiszen egy vagy több külön domain-t biztosít a hivatkozott építőkockák (pl. képek) elérésére, és földrajzilag is elosztja ezeket, mindig a felhasználóhoz legközelebbi szerverről szolgálja ki (pl. egy svédet nem ázsiai szerverről, hanem mondjuk írről). Nem akartam még egy fizetős szolgáltatást behúzni az oldal alá, mert sosem térül meg, ezért a “szegény ember CDN-jének” használata mellett döntöttem, ez pedig a domain sharding. (Ebben a cikkben olvashatsz a kettő közötti különbségről bővebben.) Pár éve megvan már a fodor.it domain, amit elsősorban rövidítő URL-nek használok (pl. a https://fodor.it/2rqtQ2z rövid link átirányít egy másik, sokkal hosszabb linkre, és statisztikákat is mutat nekem, hogy mikor, hányan, milyen forrásból kattintottak rá), ezért ezen a domain-en létrehoztam pár aldomaint, és most már ezeken keresztül jelennek meg a képek az oldalon. Lehet hátránya, ha túl kevés kép van az oldalon, és így külön kapcsolatot kell felépíteni a másik domain-en keresztül, vagy pl. bizonyos weboldal sebesség elemző eszközök nem ismerik fel, mint CDN, így rosszabb pontot adnak erre a szempontra, de általában megtérül a befektetés a felhasználónál, villámgyorsan betöltenek a sok képes posztok is.

HTML/CSS/JS optimalizálás: Külön történet, hogy mennyire szétteszteltem az oldalt betöltési sebesség szempontból, és igyekeztem annyira kicsire faragni, amennyire egy számtalan modulból álló WordPress oldalt csak lehet. Sajnos az oldal egy olcsó angliai shared hosting szerveren fut, ami miatt az első kapcsolódás általában 1.4-1.8mp körül alakul, ezen csak némi anyagi befektetéssel lehetne javítani. Emiatt a Google Pagespeed sok pontot levon, valamint pár olyan módosítást is kér, amit a használt sablon miatt nem tudok implementálni, így 53/69 (mobil/desktop) a maximum, amit ki tudtam belőle facsarni. A Pingdom viszont 92-95 pont körül ad minden alkalommal, a GTMetrix is 85-90 körül, úgyhogy ezzel már elégedett vagyok. Sokszor egyébként azt vettem észre, hogy olyan módosítások, amik javítanának egy szemponton, gyakran elrontanak egy vagy több másikat is (pl. progresszív képek esetén nagyobb a fájlméret, inline-olt css esetén rosszabb a tartalom arány, stb.), így ez a mostani együttállás még a legjobb ár/érték arányban. Ha én fejleszteném a sablont, valószínűleg sokkal több lehetőségem lenne a megfelelő javításokra (pl. critical path css generálás), de tudni kell elengedni.

Google Tag Manager: A Google Analytics-et most már GTM-en keresztül használom, zseniális eszköz, csak ajánlani tudom. Anélkül lehet a méréseken változtatni, hogy bármiért bele kellene nyúlni az oldal kódjába, és mindenféle okos recepteket össze lehet állítani.

Mindezek megvalósítása csak idén (mert csak idén mértem:D) összesen több, mint 109 óra munkát vett igénybe, és 282 commit-ot eredményezett a verziózott forráskódban, ami elsőre hihetetlenül hangzik, de még másodjára is. Különösen annak fényében, hogy minderre munka mellett tudtam időt szakítani, este vagy hétvégén.

Úgy tűnik, valóban csak elhatározás kérdése az egész. Nehéz volt elkezdeni, és látni, hogy mennyi minden van még hátra, de sokkal könnyebb volt úgy, hogy az előre legyártott feladatoknak köszönhetően napról napra látszott a haladás, és nem csak egy nagy köd volt még hátra a teendőkből.

Mielőtt az előző sablont lecseréltem, készítettem pár képernyőfotót emlékbe vagy ha esetleg valaki új látogatóként jár erre, és nem látta anno, hogy ilyen is volt az oldal. Ha 100%-os nagyításban néznéd meg, akkor a lightbox helyett nyisd meg a képeket új lapon.

Köszönöm, hogy elolvastad, remélem elnyeri tetszésed az új oldal! 🙂

Ne feledd, hogy a közeljövőben még itt-ott alakulni fog, de addig is, ha van ehhez kapcsolódóan ötleted, vagy ha találsz bármit, ami szerinted nem stimmel a megjelenítésben vagy a működésben, írd meg itt a bejegyzés alatt egy hozzászólásban, vagy küldhetsz akár képernyőfotót is emailben a debug kukac fodor.it címre.

Update 2017.07.06: Az Egyetem menü és a Kapcsolat oldal is megújult, nézd meg az új dizájnt. Hogy’ tetszik?