Některé chyby se opakují stále dokola. Přitom na jejich zlepšení stačí vcelku malé úsilí a váš web bude kvést jako jarní louka. Následující řádky jsou bohatějším souhrnem mé lekce ze skupiny Rebelek. Informace jsem aktualizovala, rozčlenila a obohatila o autenticitu webu a o vzhled ve vyhledávačích a na sociálních sítích.
Většina bodů je především pro uživatele WordPressu a MioWebu. Majitelé ostatních platforem zde ale také mohou najít inspiraci pro zlepšení svého webu.
Témata
- Autenticita – je váš web opravdu váš?
- Čitelnost – protože jak jinak se lidé dozví, co jim chcete říct
- Zabezpečení – abyste vy ani vaše peněženka neplakali
- Rychlost a optimalizace – když přicházíte o konverze kvůli dlouhému načítání stránky
- Přístupnost – všichni trpíme nějakým handicapem
- Vyhledávače a sociální sítě – aby to tam nějak vypadalo
Ještě než začnete, je potřeba si uvědomit, že ne každý bod je pro vás důležitý. Koncentrujte svou energii tam, kde vy sami zrovna potřebujete.
Tip: Jen to zabezpečení nepodceňujte.
1. Autenticita webu
Lidé si na váš web udělají názor dřív, než řeknete švec. Vlastně dřív, než vůbec řeknete Š. A když říkám, že si udělají názor na váš web, myslím tím i na vás samotné. Takže na jeho vzhled, formátování a čitelnost dbejte stejně, jako dbáte na ten svůj vlastní.
Kromě toho si nemohu nevšimnout, že to má kladný vliv na vaše online sebevědomí a kvalitu vašeho podnikání.
Váš web by měl odrážet vaši osobnost a cílovou skupinu
Někdy k tomu, aby web odrážel vaši cílovku stačí, že odráží vaši osobnost. Proto překonejte nutkání podlehnout nejmodernějšímu trendu, jen proto, že to bylo ve videu „Top dvacet trendů ve webdesignu 2020“. Jděte do toho, co cítíte, že je vaše. Tady mám jedno přirovnání s domem – zrekonstruované neuklizené a nevkusné bydlení nikdy nevyhraje nad starším, přehledným a uklizeným bytem.
Žádný cirkus, prosím
Takže se vyhněte nutkání dělat z webu cirkus. Zvýraznění každého druhého prvku způsobí, že to důležité zapadne. Protože ráda vysvětluji webová témata na domech a bytech, nepoužiji pro příklad nic jiného než byt: Najděte křeslo.
Odpovídající fotografie
Autenticitě pomohou i profesionální fotografie a vynechání fotek z fotobank. Na toto téma jsem napsala článek Fotky a ilustrace na vlastní web. Profi fotografie zároveň způsobí, že i vy vypadáte jako profesionálové, plus se sami budete cítit skvěle.
Vaše barvy
Spíš než logo si zapamatujete barevnost. Která banka používá jablečně zelenou barvu? A která červeno-černou? Barvám proto věnujte zvláštní pozornost a snažte se je používat, byť třeba jen decentně. Osobně doporučuji mít jednu primární, jednu doplňkovou a jednu kontrastní barvu. Počet a variace ale závisí na mnoha faktorech, takže pokud sami nevíte, nechte si poradit. Přinejmenším se ale snažte o jejich sjednocení napříč celou vaší komunikací.
2. Čitelnost textu
Udělejte text „skenovatelný“
Vytvořte pro vaše návštěvníky záchytné body a usnadněte jim hledání informací. Můžete použít nadpisy, tučný text, odrážky. Jen je dobré to nepřehánět, protože pak docílíte opačného efektu. Často si lidé všímají i odkazů – ty mějte v textu ideálně podtržené.
Jakmile lidské oko zachytí něco, co zhruba hledá, začte se. Inspirovat se můžete už v tomto článku. K pochopení toho, co je na webu třeba, vám stačí si projít nadpisy. Až ve chvíli, kdy potřebujete znát detaily si přečtete i odstavec textu pod ním.
Volte bloky s kratšími řádky a čleňte text
Doporučuje se mít řádky kolem 8-10 slov. Zvlášť u víceřádkového textu. Lidé dlouhé řádky čtou sice rychleji, ale s menší pravděpodobností. Jen řádky nezkracujte tím, že za každé osmé slovo dáte enter, to nevypadá dobře na mobilech. Pokud máte nějaký blokový editor, využijte toho, a vložte texty do sloupce.
Použijte čitelné písmo a dostatečný barevný kontrast
Velikost písma na webu by neměla být menší než 16 pixelů. Dostatečný kontrast napomáhá tomu, že text bude někdo číst. Nezapomínejte, že podmínky ke čtení webu nejsou vždy ideální. Nekvalitní displeje, různé barevné profily, polední slunce oslňující mobilní telefon, ale třeba i horší zrak. To vše může návštěvníky frustrovat.
Zkontrolujte si funkčnost odkazů
Nic nerozmrzí víc, než když člověk konečně najde, co hledal a odkaz nefunguje. Použijte třeba Broken link checker.
3. Zabezpečení
Je to pár dní, co přišla zpráva o napadení webů všech uživatelů, kteří měli nainstalovaný plugin Demo importer od ThemeGrill. Většině lidí to rovnou smazalo a přeinstalovalo celý web.
- Uživatelé, kteří Demo importer odinstalovali v momentě, kdy ho přestali používat, byli z problému venku. Není plugin, není vir.
- Ten, kdo neměl zálohu, hodně zaplakal.
- Nedá se tomu vždy předejít. Bohužel.
Z toho vyplývají následující body:
Zálohujte
Existuje několik možností: záloha na hostingu, pluginy (doporučuji UpDraft) a nebo služby třetích stran (manageWP). Zálohujte tak často, jak to vyžaduje situace. Pokud publikujete několik článků denně, zálohujte několikrát denně. Děláte na webu velké změny? Vytvořte si zálohu před i po změnách. A také před každou aktualizací – je vždy snazší obnovit zálohu, než hledat a opravovat problém.
Aktualizujte
Když vyřešíte problém ještě před jeho vznikem, ani se o něm nedozvíte. Za to v případě, když web vlivem aktualizace spadne, máte hned práci navíc. Před aktualizací proto vždy udělejte zálohu a můžete zůstat klidní. Čím méně máte pluginů a šablon, tím méně se toho může pokazit. Aktualizace a zálohy můžete nechat na někom, kdo se zabývá správou webu a nebo se v tom nechte zaškolit vy sami.
Mažte nepoužívané pluginy a šablony
Deaktivace nestačí. Nepoužívané pluginy vám navíc zatěžují databázi a zpomalují systém. Pryč s nimi. Pokud budete chtít řešit váš web s odborníkem, mějte pro něj ideálně připravený seznam pluginů, na co který plugin máte apod.
Vybírejte pečlivě pluginy a šablony
Neinstalujte každý plugin (a šablonu), který se vám zachce. A když už je máte, nastavte je. Většina z nich to potřebuje.
- Nejprve si přečtěte recenze,
- koukněte, jak je starý/á,
- kolik let nebyl/a aktualizován/a
- a jestli podpora funguje a reaguje na dotazy.
Jistě existují výjimky, jako třeba český plugin zalomení. Něco tak jednoduchého se napíše jednou a není tam žádné riziko, tedy ani nutnost aktualizací.
Nepodceňujte bezpečnostní pluginy
Ráda používám Wordfence – neodhalí vše, ale na spoustu problémů mě včas upozornil. Blokuje divné pokusy o přihlášení a upozorní vás na slabé heslo nebo ukradenou kombinaci jména a hesla, kterou používáte i na jiných webech.
HTTPS
Neznám jediný důvod, proč ho nemít. Za to znám několik důvodů proč ano: Weby bez https Chrome označuje jako potenciální hrozbu a jsou pomalejší. Za ušetřených 12 Kč měsíčně to nestojí. Přepnutí webu doporučuji nechat na profesionálovi.
Hesla a účty
Sama přesně nevím, jak konkrétně útočníci zkouší prolomit hesla, ale bývá to jeden z nejčastějších nedostatků. A potíže způsobí také zhrzený administrátor webu nebo zaměstnanec. Proto ideálně vytvářejte každému svůj účet, ať nepřijdete o přístup. Veškerá hesla se dají změnit také skrze databázi webu, tak pozor. Údaje k ní má nejen ten, komu je pošlete. Stačí přístup k FTP webu.
4. Rychlost a optimalizace
Rychlost načítání webu změříte pomocí Pingdom. Zajímavý je hlavně čas načtení a doba do první interaktivity. Pokud se vám web načte do 3 s, je to ještě relativně dobré. Radost je mít čas nižší než 1,2 s. Zvláštní pozornost věnujte také mobilům, například pomocí nástroje Page speed insights.
Google upřednostňuje rychlé weby
Pokud máte většinu návštěv z mobilů, podpořte své návštěvníky a usnadněte jim prohlížení. Dnes je také oblíbený trend AMP webu: to je verze webu pro mobil, který má zpravidla jen bílé pozadí a černý text. Nehodí se ale pro každého a ztrácí se tam rozdílnost a vaše autenticita.
Méně obrázků je více
Fotografie jsou často jednou z největších brzd na vašem webu. Mohu doporučit pár možností:
- Nejsnazší je nahrát obrázek v rozměru, ve kterém ho budete potřebovat. Poradím vám, že obrázek přes celou šířku webu v dnešní době bohatě stačí v šířce do 2048 px. Pokud máte obrázky v textu, pak vám bude stačit polovina. WordPress obrázky zmenšuje sám, zkuste při vkládání obrázku do textu vybrat i velikost v pravém sloupci dole.
- Na kompresi obrázků (i těch již nahraných) lze použít WP Smush. V něm můžete aktivovat i lazy loading, který popisuji níže.
- Další možností je formát .webp, který teprve nyní začínají podporovat (téměř) všechny prohlížeče a umí i průhlednosti jako formát png. Obrázek v .jpg o velikosti 1 MB má ve formátu .webp pouhých 82 KB. Na nasazení .webp doporučuji najít někoho zkušeného.
Lazy loading – zpožděné načítání obrázků
Tato funkce pomůže zrychlit váš web tím, že odloží načítání obrázků až do chvíle, kdy k nim dorolujete.
Pluginy po druhé
Pluginy mají zásadní vliv na rychlost webu, a to nejen ještě před jeho odesláním návštěvníkovi, ale i pro vás samotné v administraci. Některé i po odinstalování nechávají na webu a v databázích balast, takže je lepší dvakrát měřit a jednou řezat. Jeden můj klient neodolal a instaloval si na Vánoce padající sníh. Web mu to zpomalovalo o dobrou jednu sekundu. Také jsem teď optimalizovala web, který měl zhruba 35 pluginů. Potřebných bylo pouze 10. Pouhým smazáním nepotřebných pluginů jsme zrychlili web o 4 s.
Písmo
Pokud si můžete vybírat písma přímo na webu ze stovek písem, které nabízí vaše šablona, zůstaňte u jednoho (a pak třeba dvou jeho tlouštěk). Opět tím zrychlíte načítání a navíc nemůžete udělat chybu v nevhodně zvolené kombinaci více druhů písem.
Cache
Pokud chcete výrazně zrychlit váš web pro návštěvníky, nechte si nastavit cache. Toto je také jeden z bodů, který doporučuji nechat na profíkovi. Cache funguje tak, že se na serveru vytvoří statická kopie vaší stránky, která se návštěvníkovi odesílá. Výsledkem je to, že web se už nemusí generovat. Čas od času je ale potřeba cache promazat, zvláště po změnách nebo aktualizaci stránek.
5. Přístupnost
Díky přístupnosti je možné rozšířit možnosti nás všech. Nejde totiž jen o neslyšící a nevidomé, které si představíme asi jako první. Lidi s autismem, ADHD nebo Aspergerovým syndromem může pro změnu rušit příliš animací nebo videa na pozadí. Těm, kterým se třesou ruce mohou zase dělat problémy malá tlačítka a odkazy na mobilní verzi stránek. Jde také o všechny, kteří trpí dyslexií, jakoukoliv vadou zraku a nebo si prostě jen prohlíží váš web venku na sluníčku či starém monitoru.
Trvalým handicapem trpí podle World Health Organization cca 15 % populace. Tím dočasným trpíme všichni. – Z blogu Ondřeje Ilinčeva
Popisky k obrázkům (alternativní text)
Pokud má obrázek dekorativní účel, popis obrázku vyplňovat nemusíte. Pokud obrázek obsahuje text, opište jej do alternativního textu a jinak popište, co je na obrázku. Screen reader pak přečte obsah uživateli. Většinou lze popisek vyplnit při vkládání obrázku do článku nebo stránky.
Popisky k odkazům
Platí to samé, co pro obrázky. Ideálně popište, co se nachází na stránce pod daným odkazem.
Čitelné písmo, jeho kontrast a formátovaný text
Používejte vhodné, dostatečně velké, tmavé písmo na světlém pozadí a čleňte jej do kratších bloků. Pomůžete tím v orientaci mnoha lidem, kteří mají problémy se čtením nebo soustředěním. Správné použití nadpisů určité úrovně opět pomáhá v orientaci nevidomým lidem.
Povinnost pro některé typy webů
Je to tak. Přístupnost je/bude povinná pro některé organizace. Týká se to např. veřejného sektoru, ale třeba i školek a škol. Myslím si, že pokud více pracujete s lidmi, kteří mají nějaký handicap, ocení to.
Titulky do videí
Máte-li možnost, přidejte do videa titulky. Ty jsou nejen pro neslyšící, ale pro všechny, kteří koukají pod lavicí, „na tajňáka” v práci nebo v MHD a nemají zrovna sluchátka.
6. Vyhledávače a sociální sítě
Protože většina mých klientů a také členek katalogu provozuje svůj byznys hlavně prostřednictvím Facebooku, přidala jsem i tuto část, ve které můžete zjistit, jak váš web vypadá při sdílení a také ve vyhledávačích, kde na vás lidé mohou narazit.
Jak zjistit, jak vypadá web na sociálních sítích?
Na následujících odkazech vložte url stránky, podstránky článku a uvidíte, jak web při sdílení vypadá.
Jak vypadá web na Googlu?
Jedna z nejsnazších variant je do vyhledávacího řádku napsat site:mujweb.cz Pak zjistíte, že to vypadá třeba jako má nová stránka Obchodu, u které jsem zapomněla vše správně nastavit.
Velmi zajímavý je i tento nástroj: To the web – search engine simulator
Jak tyto dvě věci nastavit?
Pro WordPress jsou nejvíce nápomocné pluginy Yoast SEO nebo Rank Math. Používám je na základě zkušeností a doporučení SEO specialistů. Oba fungují podobně. Rank Math je vzhledově trochu modernější a mě osobně přijde v určitých částech přehlednější. Popisky a náhledy pro jednotlivé stránky a příspěvky pak upravujete na konci editace stránky/příspěvku a nebo v pravém sloupci (pokud používáte nejnovější editor – Gutenberg).
Žádný web není dokonalý
Pro všechny z vás, kteří se teď zděsili, co vše musí na webu vyřešit, je tento vzkaz: Žádný web není dokonalý, vždy je co vylepšovat a často se dělají plány na zlepšení na měsíce i roky dopředu. Proto nevěšte hlavu, že momentálně nemůžete vyřešit vše, co byste si přáli. Stanovte si priority a zaměřte se na ně. Klidně si udělejte plán, rozdělte práci na fáze, tak jako publikujete příspěvky na facebookové stránce nebo články na blogu. Dejte si za úkol udělat každý týden jednu změnu k lepšímu.
Autorka: Bára Vlášková
Profil
