Co jsem dnes udělal pro svůj web #3

Sun, 30 Oct 2016 20:23:23 +1100

Upřímně, "dnes" toho moc nebylo. Třetí díl seriálu byl naplánován zhruba měsíc od druhého, ovšem článek se mi spolu s dalšími trochu opozdil. I přes to bych rád v načaté práci pokračoval a sepsal soubor úprav, kterými si můj blog v rámci svého vývoje prochází.

V jednom z letošních článků jsem vám představil PHP třídu na detekci zařízení. K té se na chvíli vrátím, abych vám mohl popsat některé konkrétní příklady, které využijete v každodenním životě. Drobné ladění kódu také proběhlo, převážně pro telefon a tablet. I když jsem posledních pár měsíců nové články nepřidával, o stránky jsem se snažil starat alespoň minimálně.

1. PHP třída na detekci zařízení: praxe

Pokud jste již v oboru zkušení, jistě vás napadne spousta příkladů. Já bych ale rád pohovořil o drobných úpravách, které jsou aplikovatelné i pro tak triviální web, jako je ten můj. Začneme obrázky. Co jsem nahradil maličké náhledy za obrázky na 100% šířky, byla potřeba řešit i rychlost jejich načítání. Na telefonu je chci ponechat, protože jsou pěkné, ale stejně tak chci dosáhnout nějaké rozumné rychlosti zobrazení. A tak podle zařízení vygeneruji jinou velikost miniatury, což pro normální počítač se zúženým oknem prohlížeče řešit nemusím.

Druhým bodem byla celková délka obsahu. Homepage i kategorie jsou při počtu deseti záznamů na stránku zbytečné dlouhé, takže na telefonu můžu stránkovat po nižším počtu. Tím se samozřejmě celé renderování stránky nepatrně zrychlí. A čím složitější databázová struktura, tím víc ušetřených milisekund. Nabízí se samozřejmě otázka, jestli by nebylo vhodné změnit celou logiku a přidat dopisování bloků ajaxem. Toto řešení ale nechci úmyslně - nejsem Facebook.

Třetí stěžejní bod jsou JavaScriptové události. Například YouTube videa, o kterých jsem také napsal několik článků, mohu nahrazovat za náhledový obrázek pouze na dotykových zařízeních, nikoli na klasickém počítači. Tohle ale není ten případ :-) Stačí se ale podívat na fixní menu při scrollu: něco takového na tabletu či telefonu v žádném případě nechci. Identifikátor zařízení mám vytištěný přímo na body, a tak mohu v JavaScriptu snadno zjistit, jaký typ přístroje návštěvník zrovna používá.

Vidíte, není to nic složitého. Stačí pár jednoduchých úprav a web je hned mnohem přístupnější.

2. Stylové úpravy

Tady pořád nějak zápasím s tou animací menu. Už ji měním asi po třetí a stále si nejsem jistý, jak se mi to líbí nejvíc. Stejně tak se změnila animace úvodních obrázků. Poslední trendy doporučují zvýrazňovat aktivní prvky, v případě obrázků nějakým tím zoomem. Často se využívá efekt zvětšení, který ale ze zkušenosti nedoporučuji. Dochází k deformaci a drobnému kousání například ve Firefoxu. Pokud ale využijeme efekt opačný, drobně máznutý obrázek se doostří a výsledný efekt je mnohem sympatičtější.

Důležité hlavně je, aby se web líbil vám samotným. Rozhodně nedoporučuji stránky zahltit efekty, jen aby tam "něco" bylo.

3. Úprava antispamu

Spamy na vlastním webu jsou trochu ostuda, zvlášť když jsem na dané téma psal tutoriál. Bohužel, v poslední době jich bohužel pár bylo. No žádná tragédie, dohromady to bylo asi 10 spamů za necelý měsíc. Jenže na mé poměry je to víc, než jsem ochotný akceptovat.

Nedávno jsem totiž částečně odstranil jednu úroveň antispamu. To pole s kontrolní otázkou sice stále fyzicky existuje, ale se zpožděním se samo vyplní a skryje, aby měli čtenáři větší pohodlí při psaní komentářů. Na roboty by to mělo stačit, ale na lidský spam už tolik ne. A já mám podezření, že tohle opravdu píšou reální lidé. V tuto chvíli jsem akorát přidal pár dalších kontrol, které nejsou okem pozorovatelné. A jestli se mé obavy naplní, kontrolní otázku vrátím a jen mě to utvrdí v dávno zjištěném poznatku.

N ejlepší antispam je samotná čeština.

4. Modul poznámky

Pro koncové čtenáře nic, s čím by přišli do styku. Pro správce stránek ovšem nutná utilita. Dostanete nápad, co upravit, ale zrovna není čas. Přistane k vám odkaz na článek, který chcete nastudovat, ale zrovna musíte odejít. A tak lepší, než si tyto nápady psát na papír, posílat mailem, či zakládat hromady nepublikovaných článků, je vytvořit si jednoduchý modul. Nějaké místo, kam si můžete v klidu značit své myšlenky.

5. Návod na optimalizaci přímo od Googlu

Nástroj PageSpeed Insights od Googlu jsem ještě donedávna neznal. Odkaz se ke mně dostal od jednoho z těch klientů, co se snaží vypadat strašně zasvěceně: vyžadují nesmyslné optimalizace, i když vůbec nechápou souvislosti, proč jsou některé věci řešeny tak či onak.

Tím jsem dostal prostor ke zběžnému studiu a získání nových zkušeností, čemuž jsem se mohl nadále věnovat i ve volném čase. Tentokrát musím říct, že jsem klientovi trochu křivdil; výjimečně to dávalo smysl. Vlastní rozbor nástroje by vydal na několik článků, takže bych to dnes odbyl pouhým odkazem. Primárně se jedná o soubor rad, jak stránky zrychlit na telefonu, jak návštěvníkům zpříjemnit zážitek z vlastních stránek.

Google PageSpeed Insights

Jenom by mě zajímalo, jak mám nastavit platnost cache pro soubory, které nejsou na mém serveru... Googlu očividně vadí, že má špatné hodnoty u vlastních souborů :-)

6. Nová témata článků

Ještě před odmlkou jsem si poznamenal několik myšlenek, které bych rád rozvedl. Rubriku k tomu určenou jsem nazval "Střípky z internetů". Podklady pro druhý díl jsem nasbíral, ale článek už nedokončil. A tak se zkusím polepšit a všechny resty dohnat. Že dojde na starší informace, asi nevadí, stejně ta témata dřív nebo později někdo zase otevře.