Podzimní redesign

Fri, 6 Nov 2020 18:44:05 +1100

Hotovo. Nový design je dokončený a úspěšně spuštěný. Když jsem zhruba před měsícem pochopil, že další lockdown je nevyhnutelný, pustil jsem se do prací na vlastním webu. Cíl redesignu byl jediný: ať je všechno větší.

Když se totiž zakloním na židli, mám oči zhruba metr dvacet od monitorů a už to prostě nepřečtu. A pohodlné čtení vlastních textů bylo potřeba vyřešit. Nemluvě o tom, že poslední malá změna grafiky (hlavička) web posunula spíš do minulosti, než směrem k aktuálním trendům.

Teď si zpětně říkám, jestli to není velké až moc, že na stránku se těch informací příliš nevleze. Ale uvidíme. CSS jsem si nachystal tak, abych mohl změnit pár chytrých proměnných a celý web se smrsknul. Také jsem si nachystal alternativní header, takže je možné, že grafiku v blízké budoucnosti ještě malinko změním. Vlastně se jedná o mobilní verzi headeru, akorát zobrazenou už od začátku.

Dalším cílem bylo smazání zbytečných nesmyslů napříč šablonami. Když se podívám na některý ze starších designů, je mi trochu smutno ze všech těch hrozných meta dat, které jsem tam za každou cenu musel nacpat... Všimněte si, kolik bordelu pod článkem je:

Zbytečnosti jsem s každým dalším designem trochu promazal a poslední změna nebyla výjimkou. Zůstaly jen nezbytně nutné informace, a to je datum, kategorie a tagy. A počet komentů zobrazuji jen v případě, že je vyšší jak nula. Podobné změny proběhly i v detailu, kde zařvaly hlavně ty sociální sdílítka. Míru jejich prokliků jsem si už delší dobu logoval a hodnoty mluvily jasně: je to k ničemu.

Úklid kódu samozřejmě proběhl také, ale ten není potřeba probírat příliš detailně. Hlavně jsem smazal všechny ty zbytečné atributy u odkazů, jako rel="bookmark" a podobné. Je to k ničemu - a i kdyby nebylo, tak mě to nezajímá.

Styl diskuse jsem zatím neměnil, ten byl předělávaný poměrně nedávno.

Další krok ke kompletní ajaxové obsluze

Tvrzení z předchozího článku, že všecičko už je ajaxem, bylo asi trochu přehnané. Ale já pokročil dál a v tuto chvíli zůstává už jen posledních pár vlaštovek. Například logika kompletní diskuse, viditelná například v knize návštěv. Ta by potřebovala předělat úplně, a tak jsem tam nechtěl násilím lepit nějakou obsluhu.

Klikací logo je cílený hard refresh: tam ho potřebuji a chci.

Moderní stránkování: není

Tlačítko "Načíst další" vedle odkazů na stránku 1 až N mám nachystané a funkční, ale rozhodl jsem se ho nakonec vynechat. Dokonce mám v systému i možnost zobrazení článků například od dvacátého po šedesátý, ale veškerá tato cool funkcionalita umřela na JavaScriptu. Důvod je prostý: prohlížeč neumí udržet pozici scrollu při procházení historie. Tedy v případě, že cílová stránka je delší, než vstupní. Přes history.pushState se mi pozice scrollu uložit nepovedla, a tak mě napadlo ještě ukládání pozice do cookiny unikátně pro každou URL. A v tu chvíli jsem si řekl ne, tohle prostě ne.

Pravý sloupec

Sidebar je další sekce, kterou s každou další úpravou promazávám. Jako první jsem odpálil text "O mně". Netřeba. Další zrušený blok jsou archívy podle měsíce a roku. Seriózně, proč tohle vlastně na každém blogu je? Vím, proč jsem to chtěl já: přece abych hned viděl, jak často neplním svůj plán tří článků měsíčně :) V tuto chvíli se archívy zobrazí jen tehdy, když jsem lognutý v administraci. Takže uživatele neobtěžují a já vidím, co potřebuji.

On jenom ten SQL dotaz je za trest. Trvá pomalu stejně dlouho, jako celý zbytek webu a vytáhne pár odkazů, na které stejně klikám jenom já. Takže až vymyslím, kam si toto filtrování přidám do administrace, archívy poletí nadobro.

Pro zajímavost:

SELECT
	DISTINCT DATE_FORMAT(p.`timestamp`, '%Y-%m') AS `date`,
	COUNT(p2.id) AS post_count
FROM `%prefix%_posts` p
	LEFT JOIN `%prefix%_posts_categories` c ON c.id = p.category_id AND c.active = '1'
	LEFT JOIN `%prefix%_posts` p2 ON DATE_FORMAT(p2.`timestamp`, '%Y-%m') = DATE_FORMAT(p.`timestamp`, '%Y-%m') AND p2.active = '1'
	INNER JOIN `%prefix%_posts_categories` c2 ON c2.id = p2.category_id AND c2.active = '1'
WHERE p.`active` = '1'
GROUP BY p.id
ORDER BY p.`timestamp` ASC

Je to fakt zlo. Ale abych se vrátil k designu, na ukázce vidíte, že i zobrazení zdrojáku je v novém kabátě. Písmo je "Source Code Pro" a najdete ho na Google Fonts. Nabízí i řezy 500 a 600, takže ty přehnaně tlusté boldy nemusíte řešit.

Typografie

Tím jsem nakousnul fonty, a tak můžeme přejít k nim. Jak jsem uváděl hned na začátku, cílem bylo komplexní zvětšení webu. Font Mukta, který jsem měl na webu před tím, byl ještě o pixel menší, než jiná písma ve stejné velikosti. Takže původní Mukta 15 odpovídala zhruba Arialu 14.

Písmo jsem vybíral opravdu dlouho. Nakonec mě to přestalo bavit a vsadil jsem na jistotou, kterou je obyčejné Roboto. Marcellus, jakožto nadpisový font, vypadal i ve větších rozměrech pořád hezky, takže nebyl důvod ho měnit.

Původní návrh počítal s devatenáctkou písmem, ale po prvních úpravách jsem ho shodil na 17 pixelů. Podle mě tak akorát. Výška řádku je nyní 1.65.

To by bylo tak asi vše, co jsem chtěl k redesignu napsat, a teď už se jen uvidí. Uvidí, jestli se grafika líbí klientovi, kterým jsem si v tuto chvíli sám.

Na závěr si ještě připomeneme, jak to tu vypadalo před tím: