Jak na tvorbu webu

Sepsala jsem zkušenosti jak z pohledu klientky – markeťačky, která stála u zrodu a rozvoje webu, tak z pohledu sebe – vývojářky a projektové manažerky, co sbírá požadavky a zpracovává je nebo předává dál kolegům.

V závěru článku naleznete přibližný harmonogram, který vám poslouží jako vodítko. Dozvíte se, jaké si položit otázky, na co si dát pozor a co rozhodnout před samotnou tvorbou webu, jaký můžete zvolit CMS systém i jak pracovat s obrázky a URL.

1. Než se pustíte do tvorby

Tvorba webu, který bude splňovat účel a zaujme zákazníky, začíná mnohem dříve než vznikem samotných stránek. Ze startu je dobré vědět, jaký obsah na něm chcete mít, čím zaujmete cílovku (např. vaše zákazníky) a kdo ta cílová skupina vůbec je. Tento proces by měl zahrnovat následující části:

1.2. stanovení cílů a strategie

Definujte si hlavní účel webové stránky. Čeho chcete dosáhnout? Chcete představit produkty nebo služby, získávat kontakty, prodávat online nebo zvýšit povědomí o značce? Zvolte si, jak budete tyto cíle měřit. To vše by mělo být součástí marketingové strategie.

Kromě toho vytvořte obsahový plán a nastavte si, jaké nástroje pro sledování výkonu použijete. (Například: Google Analytics, Hotjar, SEMrush, a pokud používáte sociální sítě, tak např. jejich měřící pixely).

Při plánování obsahové strategie se zaměřte na přidanou hodnotu. Definujte, co činí váš obsah, produkty nebo služby jedinečnými a proč by měly být pro cílovou skupinu zajímavé. Klaďte si otázky jako „Co mohou návštěvníci získat?“, „Jak může obsah řešit jejich potřeby a problémy?“ Přemýšlejte o tom, jak se lišíte od konkurence.

1.2 analýza cílového publika a výzkum

Zamyslete se, co cílová skupina očekává od webové stránky a jak můžete tyto očekávání naplnit nebo předčit. Vytvořte webový prostor, který není pouze vizuálně atraktivní a technicky funkční, ale také poskytuje něco navíc a přesvědčí setrvat na stránce.

Identifikujte cílovou skupinu, kterou chcete oslovovat.

• Výzkum vám pomůže porozumět ideálním zákazníkům.
• Zaměřte se na demografii, chování na internetu, zájmy, profese a očekávání cílové skupiny.

Přemýšlejte o tom, co lidi trápí a s čím jim můžete pomoct.

• Analyzujte, jak můžete reagovat na problémy a potřeby identifikované cílové skupiny.
• Vytvořte persony (fiktivní postavy zákazníků) a strategii odpovídající potřebám a očekáváním.

Sledujte vývoj trhu a aktualizujte své poznatky pravidelně.

• Udržujte relevantnost a efektivitu webové stránky pravidelným sledováním trendů.
• Nenechte se od výzkumu odradit; jsme zde, abychom vám s ním pomohli.

1.3 analýza konkurence

Místo na jednotlivé prvky webu vaší konkurence se zaměřte na celek. Smyslem není být stejný jako konkurence, ale spíše sám nastavovat trendy. Když se odlišíte, zákazníci si vás všimnou. Nekopírujte, jen se inspirujte.

Promyslete silné a slabé stránky konkurenčních webů a taky se zamyslete, jak můžete využít tuto informaci k tomu, abyste vytvořili unikátní a lákavý web. Přemýšlejte o tom, co můžete udělat lépe nebo odlišně a jak tyto prvky mohou posílit váš vlastní online prostor.

1.4 registrace domény

Vyberte vhodné doménové jméno, které odráží vaši značku a je snadno zapamatovatelné.

S ohledem na fázi vašeho projektu nebo značky můžete zvážit registraci podobných variant domény. Název může ale souviset i s ochrannou známkou, a proto je vhodné provést rešerši a zjistit, zda je váš vybraný název unikátní.

Volnou doménu si můžete ověřit třeba u nás zde. S výběrem názvu domény vám rádi pomůžeme.

1.5 obsahová strategie

Obsahová strategie zahrnuje plánování, vytváření a správu obsahu na webových stránkách se záměrem dosáhnout konkrétních cílů. Řeší, co a jak dávat na web, jak to rozesílat a jak udržovat obsah na stránkách aktuální. Zajistěte, že obsah odpovídá potřebám zákazníků a podporuje dosažení našich obchodních nebo marketingových cílů.

Pokud jde o obsah na webu, je důležité brát v úvahu, že designer navrhuje web na základě wireframů, do kterých lze zadávat jak ostré texty, tak i placeholdery. Při použití placeholdrů může nastat situace, kdy design není dostatečně přizpůsoben reálným textům, což může ovlivnit celkový vizuální dojem. Zvažte proto, zda ve wireframech zadáte konkrétní texty nebo placeholdery, aby design odpovídal očekávanému vzhledu i při vložení skutečných obsahů.

Na příkladech vám ukážu, jak obsahová strategie může vypadat:

• Cíle a zaměření obsahu: Vaším cílem je zvyšování povědomí o značce. Obsah proto zaměřte na edukaci a angažování cílové skupiny prostřednictvím informačních článků a vizuálně atraktivního obsahu.
• Identifikace cílového publika: Cílovou skupinou jsou mladí profesionálové hledající odborné rady. Obsah by se měl zaměřit na trendy v jejich odvětví a nabídnout užitečné návody a tipy pro kariérní růst.
• Typy obsahu a formáty: Kombinací krátkých informativních článků, infografik a instruktážních videí oslovíte širokou škálu uživatelů a poskytnete různé způsoby konzumace obsahu.
• Klíčová témata a klíčová slova: Klíčová témata pro e‑commerce web zahrnují recenze produktů, návody na použití a trendy v odvětví, s klíčovými slovy zaměřenými na konkrétní produkty.
• Kanály distribuce: Pro aktivní zapojení s cílovou skupinou můžete využívat sociální média, zatímco pro detailnější obsah vytvářejte newslettery nebo blogové příspěvky na webu.
• Měření a analýza úspěchu: KPIs mohou zahrnovat sledování nárůstu návštěvnosti, angažovanosti na sociálních sítích a konverzí. Na základě analýzy můžete upravit obsah pro dosažení lepších výsledků.

1.6 design a vizuální identita

Web stavte na vizuálním stylu vaší značky. To zahrnuje barvy, typografii a logo. Stránka musí být přívětivá pro návštěvníky, proto se zamyslete i nad uživatelským rozhraním (UI) a uživatelskou zkušeností (UX). S obojím vám poradí zkušený UX designér, který přesně ví, jak mají být jednotlivé prvky na webu rozložené tak, aby měli zákazníci příjemný zážitek.

Ukázka části vizuální identity

Ukázka wireframů webu

1.7 Měření výkonu

Jaké nástroje pro měření výkonu použít, máte už promyšlené v rámci nastavení cílů a strategie, teď je na řadě je na web vložit a správně nastavit. Nastavení můžete provést sami nebo vám poradí zkušení markeťáci či datoví analytici.

1.8 právní záležitosti

Zajistěte, že webová stránka splňuje všechny právní požadavky, včetně ochrany osobních údajů a autorských práv (více o tom psal v článku kolega Adam).

1.9 rozpočet a plánování

Stanovte si rozpočet pro vytvoření a provoz webové stránky. Zvažte, jaké zdroje budou potřeba. Jaké kroky zpracujete sami a s čím budete potřebovat pomoci? Jaké služby nebo poskytovatele využijete? Bude se jednat o jednorázové náklady nebo například měsíční?

1.10 SEO

Zaměřte se na SEO strategii. Proveďte výzkum klíčových slov důležitých pro vaši oblast a optimalizace pro vyhledávače.

Toto všechno může být pro jednoho člověka náročné. Nemusíte to dělat sami. Můžete si vybrat jednotlivce, kteří vám poskytnou rady ohledně různých částí projektu, nebo zvážit spolupráci s agenturou, která pokryje všechny vaše potřeby. Můžete také zvážit kombinaci těchto přístupů. Při vytváření webové stránky můžete rovněž zvážit možnost najmout technický dozor, podobně jako je to běžné při stavbě domů.

 

Co si pohlídat, aby váš web mezi ostatními nezapadl?
SEO, rychlost načítání webu a responzivní design

 

2. WordPress, nebo Drupal?

V otázce, jaké technologie při tvorbě webu vybrat, zvažte, co se vám nejen líbí, ale je také vhodné i vzhledem k vašim požadavkům na funkce, které od webu očekáváte.

Na výběr máte hned z několika možností, ze kterých zmiňuji ty z mého pohledu nejrelevantnější:

2.1 CMS (systém pro správu obsahu, redakční či publikační systém)

Systém umožňující snadnou správu obsahu webových stránek. Mezi nejznámější patří WordPress nebo Drupal. Ale můžete si vybrat i některé z headless CMS, jako je například Strapi nebo Ghost. U headless CMS nejste závislí na konkrétní technologii nebo frameworku. Což znamená větší svobodu.

Výhody: Snadná správa obsahu bez nutnosti znalosti programování, rozšířená komunita a pluginy.
Nevýhody: Někdy vyšší nároky na hosting, pravidelná aktualizace a zranitelnost vůči bezpečnostním hrozbám (pokud není udržován).

Vývojáři pro různé stránky nebo prvky na webu používají termín šablona. Ve webdesignu šablona často odkazuje na předlohu nebo vzor definující vzhled a strukturu webové stránky. Mohou obsahovat grafiku, barvy, typografii a rozložení, které lze použít k vytvoření konkrétních stránek na webu. Díky tomu je můžete upravovat a přizpůsobovat dle potřeb konkrétního webu.

2.2 statické webové stránky

Můžete zvolit jednoduché stránky, převážně tvořené pevným obsahem nevyžadujícím časté aktualizace. Jsou rychlé, bezpečné a efektivní pro menší projekty.

Výhody: Snadná správa, rychlá odezva, bezpečnost.
Nevýhody: Omezená interaktivita, obtížnější aktualizace obsahu (pokud nechcete pracovat s kódem, tak by vám veškerý obsah na stránkách musel měnit vývojář.)

2.3 Webové platformy pro e‑commerce:

Příkladem specializovaných platforem pro online prodej jsou Shopify, WooCommerce (pro WordPress) nebo Magento.

Výhody: Zaměření na e‑commerce funkce, integrované platební brány, správa inventáře.
Nevýhody: Některé mohou mít měsíční poplatky nebo provize.

2.4 Website Builder:

Website Buldery jsou jednoduché nástroje pro tvorbu webových stránek, které často používají šablony a nevyžadují pokročilé technické dovednosti. Příklady zahrnují Wix, Squarespace nebo Weebly.

Výhody: Snadná a rychlá tvorba, obvykle bez potřeby kódování.
Nevýhody: Menší kontrola nad kódem a funkcionalitou, některé mohou mít měsíční poplatky.

2.5 Progressive Web App (PWA):

Moderní aplikace kombinují webové a mobilní rozhraní, umožňující offline používání a lepší výkon. Mohou být postaveny s nástroji jako React nebo Angular.

Výhody: Rychlé načítání, offline funkcionalita, podobná uživatelská zkušenost jako u mobilních aplikací.
Nevýhody: Složitější vytvoření, mohou vyžadovat moderní prohlížeče.

3. Obrázky

U webového vývoje rozlišujeme a používáme dva typy velikostí obrázků:

• rozměry – šířku a výšku obrázku
• datová velikost – kolik má obrázek kB nebo MB

Ať už jste si vybrali jakékoliv CMS, pravidla k přidávání obrázků jsou vždy podobná. Jednou ze základní vlastnosti, aby váš web nezapadl, je jeho rychlost. Ta s obrázky úzce souvisí. Čím je obrázek datově menší, tím lépe. Nesmí to však být na úkor kvality.

Rychlost webu může mít vliv i na umístění ve vyhledávání na Googlu. Čím rychlejší, tím výše se ve vyhledávání zobrazíte.

Dnes už se dá spousta věcí automatizovat (včetně minifikace obrázků), ale pro jistotu si to ověřte u dodavatele a domluvte se, jak bude minifikace probíhat. Já pro manuální kompresi obrázků bez ztrát používám nejčastěji TinyPNG.

Pro optimální zobrazení na různých zařízeních a obrazovkách doporučuji vytvořit více rozměrových variant každého obrázku. V tom vám nejlépe poradí vývojář, který může pomoci nastavit optimální velikosti pro vaše potřeby.

3.1 Nejpoužívanější formáty obrázků:

• JPG/JPEG
  • jeden z nejběžnějších formátů s komprimovanými ztrátovými daty.
  • efektivní pro fotografie a obrazy s mnoha barevnými tóny, komprese může vést ke ztrátě některých detailů, ale zpravidla s minimálním rozdílem pro lidské oko
• PNG
  • formát, který podporuje kompresi bez ztráty a zachovává vysokou kvalitu
  • často používán pro obrázky s průhledností (alfa kanál) a pro obrázky s jednoduchými tvary, ikonami a logy

Ukázka použitelnosti v jednotlivých prohlížečích a jejich verzích

• WebP
  • velmi efektivní komprese, může vytvářet obrázky s vysokou kvalitou při nižší velikosti souboru
  • podporuje kompresi s i bez ztráty dat, což umožňuje vývojářům vybrat nejlepší kompromis mezi kvalitou a velikostí souboru
  • podporovaný ve většině moderních prohlížečů (Google Chrome, Firefox, Opera a další)
  • starší verze prohlížečů ale nemusí tento formát podporovat

Ukázka použitelnosti v jednotlivých prohlížečích a jejich verzích

• AVIF
  • schopný komprimovat obrázky s velmi malou velikostí souboru a zachovat přitom vysokou kvalitu
  • efektivní pro webové stránky, kde je důležité dosáhnout rychlého načítání stránek
  • omezená podpora v některých starších verzích prohlížečů (např. Opera Mini)

Ukázka použitelnosti v jednotlivých prohlížečích a jejich verzích

• SVG
  • vektorový formát založený na matematických rovnicích
  • umožňuje změnu velikosti bez ztráty kvality
  • ideální pro ikony, loga a grafy.

3.2 Jak obrázky pojmenovat?

Pojmenovávání obrázků se zdá jako maličkost, ale při větším množství může dojít inspirace. Vhodné pojmenování vám pomůže nejen při organizaci obsahu, ale také pro SEO a přístupnost. Zlepší také uživatelskou zkušenost tím, že poskytne uživatelům a vyhledávacím robotům jasný obraz obsahu obrázku.

Pokud se obrázek nezobrazí, jeho název může být viditelný. Proto by měly být názvy informativní a smysluplné.

• Bez diakritiky, speciálních znaků a mezer: Většina CMS sice tyhle nešvary sama napraví, je ale lepší obrázky pojmenovat správně rovnou u sebe, a mít tak nad jmény kontrolu. Místo „Západ slunce nad firmou.jpg“ je lepší „zapad-slunce-nad-firmou.jpg“.
• Velká a malá písmena: V názvech souborů zpravidla nezáleží na velkých a malých písmenech, pro udržení konzistence je ale lepší držet se jednotného stylu.
• Popisná jména: Jasně identifikujte, co obrázek zobrazuje. Místo „obrazek1.jpg“ volte „cerveny-balon-na-plazi.jpg“. Zlepší vám to SEO celého webu.
• Pomlčky a podtržítka: Pro oddělení slov v názvu obrázku použijte pomlčky (–) nebo podtržítka (_). Místo „cervenybalonnaplazi.jpg“ napište „cerveny-balon-na-plazi.jpg“. Vyhledávače lépe rozumějí názvům s oddělenými slovy.
• Konzistence: Pokud používáte více obrázků na téma nebo kategorie, zachovejte konzistenci v pojmenování. Všechny obrázky pláže mohou začínat slovem „plaz-“, např. „plaz-surfista.jpg“ a „plaz-slunecni-zapad.jpg“.

3.3 Alt atributy

Při vytváření obsahu pro webové stránky nezapomínejte na správné označování obrázků pomocí alt atributů. Alt atributy jsou textové popisky přiřazené obrázkům na webových stránkách. Hrají klíčovou roli při zajištění přístupnosti a optimalizace pro vyhledávače.

Správně popsané obrázky přinášejí výhody pro všechny návštěvníky vašeho webu. Níže uvádím několik tipů, jak správně zapisovat alt atributy a proč je to důležité.

• Přístupnost pro uživatele se speciálními potřebami: alt atributy poskytují textový popis obrázku, což je klíčové pro uživatele se speciálními potřebami, kteří používají čtečky obrazovek. Správně napsané alt atributy umožňují těmto uživatelům plně vnímat obsah stránky.
• Popisujte obsah obrázku: alt atribut by měl poskytovat stručný, ale výstižný popis obsahu obrázku. Vyhněte se generickým popiskům a buďte konkrétní. Zaměřte se na klíčová slova související s obsahem stránky.
• Vyvarujte se frází „Obrázek“ nebo „Fotografie“: místo těchto jednoslovných pojmenování zkuste popsat, co na obrázku skutečně vidíte. Například: „Skupina lidí na pláži bavící se a hrající plážový volejbal.“

Příklad správně zapsaného Alt Atributu

4. URL

4.1 Struktura

URL by měly být krátké, smysluplné a snadno čitelné. Používejte slova oddělená pomlčkou nebo podtržítkem, která popisují obsah stránky. Zahrňte klíčová slova týkající se obsahu přímo do URL. Pomůže to vyhledávacím robotům porozumět obsahu a zvýší se relevance stránky pro vyhledávání.

4.2 Indexace

Vyhledávací roboti většinu webových stránek indexují, aby byly viditelné ve výsledcích vyhledávání. To zahrnuje stránky s obsahem, který chcete zpřístupnit veřejnosti. Pokud máte stránky, které nechcete indexovat (např. testovací nebo s citlivými informacemi), použijte soubor robots.txt.

4.3 Sitemapy

Sitemapy jsou soubory obsahující seznam URL na webu. Slouží k usnadnění indexace vyhledávacími roboty. Vytvořte sitemap a přidejte ji do souboru robots.txt a do Google Search Console (nebo jiných nástrojů pro webmastery).

Pro běžné open source redakční systémy existují pluginy, které soubor sitemap.xml vytvoří.

Přestože by URL měla být krátká a výstižná, maximální povolený počet znaků pro URL adresu je 2048. To odpovídá přibližně 410 slovům při průměrné délce českých slov.

Tvorba webových stránek představuje průnik mnoha různých odborných oblastí, kde marketing, design, vývoj a správa obsahu spolupracují na dosažení optimálního digitálního prostředí. Úspěch závisí na efektivní komunikaci a koordinaci mezi jednotlivými odvětvími.

V igloo spojujeme pod jednou střechou marketing, vývoj i hosting, proto je u nás komunikace mezi odděleními samozřejmost.

Při psaní tohoto článku jsem se s vámi snažila sdílet nejen fakta, ale i nadšení pro tvorbu na internetu. Věřím, že článek může být průvodcem nejen pro začínající specialisty. S pečlivým plánováním, sledováním trendů a pružným přístupem můžete vytvořit stránky, které nejen odpovídají dnešním standardům, ale také tvoří nové trendy na internetu. Takže se do toho pusťte s láskou k detailům a kreativitě!