Šikovné webové nástroje, které je dobré znát, i když je třeba zatím nepotřebujete.

Jak žiju ve své profesionální bublině, tak mám pocit, že všichni všechny návody a tipy znají, a že je přeci nebudu nikomu nutit, jako bych je sama vynalezla. Stále se ale setkávám s lidmi, kteří si spravují své stránky sami, a kteří se jinak problematikou webů nezabývají. Takovým tohle basic know how přeci nemůžu tajit! Právě pro ně je následujících pět tipů na užitečné webové nástroje.

1. Pingdom a GTmetrix – rychlost načítání

Rychlost načítání, alfa a omega všeho, neustálý boj o milisekundy. Ideální načítací doba? Pod vteřinu. Doba, co se snese? Do tří vteřin. Všechno co je výš, je špatně. Takhle jsme se zrychlili. Jak jste na tom vy, můžete zjisti zde a zde.

První test je jednodušší a přehlednější. Zjistíte počet requestů a objem obsahu – hodně zdržují Google Fonts (ideální je mít font přímo na serveru), HTTPS přesměrování přes plugin, a velké obrázky. To jen tak v krátkosti, více se o tom dá najít na Googlu.

Druhý test je podrobnější a údajně přesnější. Základ je ale dělat vždy víc měření, třeba pět, a pak je zprůměrovat. Testy nikdy nejsou zcela přesné. V praxi se stránky načítají různě, v závislosti na rychlosti wifi nebo na dat, na lokalitě, na prohlížeči apod.

2. Shortpixel – velikost obrázků

Když je řeč o rychlosti, obrázky mají zásadní vliv a ač je to překvapivé, většina lidí to neví. Pravidlo je: čím menší, tím lepší. Potřebujete krásnou velkou úvodní fotku? Držte jí do 200 kB a s ostatními se kroťte. Nebo potřebujete malý portrét na profilu zaměstnance, který se nebude zvětšovat? 30 kB bohatě postačí. Je to o prioritách, někdy je wow efekt z objemné fotky cennější než několik milisekund, jinde naopak není třeba.

Ideální způsob jak zmenšovat: zmenšit obrázek procentuálně nebo na požadovaný počet pixelů, uložit ho pro web, a pak ještě protáhnout tímhle nástrojem. V něm si můžete pohodlně prohlédnout rozdíl před a po. 

3. CSS3 Generator – kaskádové styly

Kaskádové styly, to, co způsobuje, že prohlížeč zobrazí různé hover efekty, vlastnosti písma, takže můžete vidět Raleway místo Arialu, to, co upravuje velikosti elementů, barvy pozadí a podobně. Velká část těchto možností je ovládána přímo z redakčního systému, ale nezřídka defaultní možnosti nestačí a je třeba vytvořit si vlastní kód. Na to se může hodit právě tenhle nástroj.

4. Stack Overflow – komunita vývojářů

Web s komunitou vývojářů a kodérů, kde dost možná najdete řešení toho, co právě vás právě neposlouchá. Většinu věcí už někdy někdo řešil; chyby, specifičtější požadavky na efekty a podobně. Je to zkrátka fórum, které leckdy zachrání situaci.

5. CrossBrowserTesting – prohlížeče

Každý prohlížeč je jiný, každý vám může zobrazovat stránky různě. Tenhle nástroj vám to pomůže zmapovat. Prohlížeče se neustále vyvíjejí, aktualizují, takže správně by to člověk měl hlídat průběžně.  Ale když ne průběžně, tak aspoň jednou.