Měsíc únor se nesl ve znamení prací na vlastním webu. Drobností, které bylo potřeba udělat, jsem měl na seznamu vcelku dost. Od malých systémových úprav až po rozsáhlé stylování a optimalizaci pro telefony: právě to byl největší soubor změn, které bylo potřeba provést. A tak jsem zpět s druhým dílem seriálu "Co jsem dnes udělal pro svůj web". 

Vím, sliboval jsem jeho pokračování na Mikroblogu, jenže skrz tyto práce už nějak nezbyl čas na psaní článků... A dnes se opět pokusím o trochu větší rozbor, než jen bodový soupis změn. S odkazem na aktuální trendy vás zkusím přimět k zamyšlení, zdali stejné osvěžení nepotřebují i vaše stránky.

1. Nové texty

Obecné texy je potřeba jednou začas přepsat. Krátký odstavec o mně vyprávěl už asi 7 let starý příběh, a tak bylo na čase ho trochu změnit. "Mladým nadšencem", jak jsem o sobě tvrdil, už dávno nejsem. Tím jsem odstartoval i změny anotačních textů kategorií, aby trochu lépe vystihly jejich obsah. Původní nápad, aby dohromady vytvořily souvislý text, se mi příliš nepovedl, ale možná v budoucnu vymyslím něco trefnějšího. Došlo i k pravidelné změně titulku: výčet klíčových slov je nuda, to už tam spíš nechám něco rádoby vtipného. Nějak jsem se také snažil vymyslet lepší citát do patičky, ale nakonec jsem jen vyměnil sloku ze své oblíbené skladby... A jak je tomu na vašich stránkách, nemáte tam také někde texty dávno zapadané prachem? Nepotřebují osvěžit?

2. Grafika a CSS

Nic velkého, jenom kosmetické úpravy. Malé bannery vpravo sedí na výšku s bannerem centrálním, obecně jsem také upravil různá odsazení, ať ty bloky všechny lícují trochu lépe. Logo je konečně obrázkové. Asi nejdůležitější úprava je změna písma. Jak mám všechny nadpisy kapitálkami, tak v předchozím fontu, PT Sansu, to pořád nějak nebylo ono... PT Sans jsem vyměnil za Roboto, kde to vypadá snad o trochu lépe. Alespoň v mých očích.

3. Zobrazení na telefonu

Tak tady bylo práce asi nejvíc. Aby mohl člověk docílit rozumného výsledku na telefonech, musí znát aktuální trendy. Musí projít spousty webů a prozkoumat, jak danou problematiku řeší jiní. Inspirace je spousta, stačí si jenom vyhradit trošku času.

3.1. Čím méně, tím více

Na malém displeji opravdu není místo pro zbytečnosti, takže jsem začal redukcí obsahu. Anotace článků jsou zkrácené právě na jeden odstavec, stránkování je omezeno jen na předchozí a následující odkaz. Ty obrázky možná zabírají trochu víc místa, než by měly, ale protože je to novinka, nechci je teď zase skrývat. Navíc také na telefonu stránkuji po menším počtu položek: ajaxové stránkování se mi úplně programovat nechce, tak jsem alespoň zmenšil délku dokumentu o pár obrazovek.

3.2. Záložková patička

Za účelem zeštíhlení obsahu jsem také poschovával spoustu bloků z pravého sloupce. Některé není nutné zobrazovat, ostatní jsem skryl pod záložky. Právě záložky jsou v dnešní době oblíbený způsob, jak řešit rozsáhlé patičky. A protože na telefonu je pravý sloupec vlastně už také patička, zvolil jsem právě tento postup.

3.3. Menu

Ikona hamburgeru už je takový standardizovaný piktogram pro centrální navigaci, tam se toho moc vymyslet nedá. Co se ale změnilo, byl způsob jejího otevírání. Zatímco ještě před nějakou dobou ikonka rozbalila menu vždy dolů, nyní je v módě vyjíždění ze strany. Pokud si s tím chceme pohrát ještě trochu víc, je možné nasimulovat i efekt odsunutí celého webu z obrazovky (přesně jako u některých mobilních aplikací), ale klasická horizontální animace také postačí.

3.4. Detail článku, formulář

I zde došlo k jisté úspoře místa a zlepšení funkcionality. Obrázek už znovu neopakuji, protože do detailu člověk nejde za obrázkem, ale za textem. Komentáře bylo také potřeba scuknout, nejvíc ale formulář: právě ten zabíral zbytečně moc místa. Bohužel, inputy musí být veliké, ale labely už tolik ne: stačí je zobrazit přes input a na focus / blur je pak skrývat či odkrývat. Jednoduché a efektivní.

3.5 Detail článku, YouTube

Další bod, který jsem měl na seznamu žádaných změn, byly články obsahující YouTube videa. Načítání deseti iframů na stránce je naprosto zbytečné přetěžování výkonu, tím spíš, když si je každý telefon umí obsloužit sám. Stačí vykreslit dojem videa vlastními styly, po kliku pak video otevřít v novém okně. Nativní aplikace se s tím pak popere sama.

Bonusová otázka za závěr: Dají se vaše stránky ovládat na telefonu pouze jednou rukou? Situování všech navigačních prvků doprava má totiž své výhody. Majorita uživatelů jsou praváci a tímto jim umožníte držet telefon v jedné ruce a ovládat je pouze palcem. Navigační ikonka, stejně tak link "číst celý článek" můžeme umístit doprava, stránkování jakbysmet. V tomto trochu nechápu redakční systém Wordpress, který pořád cpe link na starší články doleva... Čteme přeci zleva doprava. Knížku otáčíme stejně. Odkaz na další stránku tedy patří vždy doprava, milý Wordpresse.

4. Tag cloud

Homepage pozbyla duplicitních tagů: uvádět jak "CSS" tak "CSS 3" je trochu zbytečné, a tak namísto ručního odmazávání tagů od jejich článků jsem prostě přidal atribut, který jejich zobrazení potlačí. Docela šikovná featurka. Čím méně jsou ty tagy automatické, tím lepší účel plní.

Závěr

Co tedy z článku plyne? Nabídnout na telefonu zjednodušenou verzi stránek není žádná ostuda. Myslete ale na to, aby na webu zůstalo vše důležité. Neměly by ale zmizet prokliky na podstránky, které odjinud linkované nejsou. Držte se trendů, ale ne na úkor použitelnosti či zbytečné práce. Myslete i na texty.