Realizace kvalitního a úspěšného webu zahrnuje několik klíčových fází. Každá z těchto etap musí být provedena důkladně a odborně. Opomenutí či nepečlivost některých činností může vážně ohrozit celkový výsledek projektu. V následujícím textu je shrnut celkový postup pro vývoj úspěšného webu.
Vstupní analýza
Celý projekt realizace webu začíná jasnou definicí cílů webu a celkové vize projektu. K cílům webu se přiřadí cílové skupiny, vstupní stránky (tzv. landing pages) a požadované konverze (konverzní stránky). Pokud se tato část provede špatně, může se ohrozit celková úspěšnost stránek. Bez jasně definovaných cílů by nebylo jasné, čeho chceme pomocí webu dosáhnout.
Analýza klíčových slov pro SEO
Analýza klíčových slov vybere klíčová slova a fráze, která lidé často hledají, jsou relevantní k zaměření webu a pokud možno mají malou konkurenci. Zvolená keywords se přiřadí k jednotlivým vstupním stránkám, které byly definovány u cílů webu.
Návrh informační architektury webu
Vstupní stránky se stávají základem pro informační architekturu (IA). Pro každý cíl a každou skupinu souvisejících klíčových slov musí existovat samostatná stránka. Žádná stránka by se neměla optimalizovat pro vyhledávače na více než 5 klíčových slov. Optimální počet keywords pro jednu stránku je 3 až 5 klíčových slov.
Návrh informační architektury vkládá jednotlivé vstupní stránky do globální navigace webu a společně s dalšími stránkami vytváří mapu stránek celého webu. Každá stránka v informační architektuře má definován titulek, nadpis, URL, související položku menu a samozřejmě klíčová slova. Informační architektura v této fázi nemusí obsahovat finální podobu titulků a nadpisů stránek. O doplnění se postará copywriter při psaní textů pro jednotlivé stránky webu.
Návrh grafického designu
Pokud je rozmyšlena navigace, která zachycuje právě vytvořenou informační architekturu, můžeme se pustit do designu webu. V tuto chvíli je jasné, jakou podobu bude mít navigace, jak bude rozsáhlá, jestli bude lépe ji umístit horizontálně nebo vertikálně, zda se bude dynamicky rozbalovat při přejetí myši nad položkou navigace, nebo zda bude statická atd.
Webdesign není jen grafika
Webdesign není jen o návrhu grafické podoby webu v nějakém programu. Design má na starosti kreativní grafik. Webdesign jde mnohem dále. Je třeba správně rozložit informace na stránkách, aby byl pro uživatele přehledný a snadno nalezl všechny hledané informace. Cílem je navrhnout dobře použitelný web a zajistit, aby byl přístupný všem uživatelům.
Wireframe aneb drátěný model webu
Pro návrh budoucího rozložení webu, ze kterého může grafik vycházet, slouží tzv. wireframe - co je wireframe webu. Tento drátěný model se používá pro zjednodušený návrh, který definuje funkci a obsah stránek webu. Rozčleňuje webovou stránku na různé části a upřesňuje, kde bude navigace, hlavní obsah stránky, jednotlivé moduly atd. Dobře navržený wireframe přebírá grafik, který se pustí do svých kreativních grafických kouzel. Dodržuje však základní rozvržení informací zachycené pomocí wireframe.
Proč je vzhled webu důležitý?
Kvalitní grafický návrh vzhledu www stránek je stěžejním faktorem úspěchu internetového projektu, ať už je komerční či nikoliv. Design je to první, co uživatel při vstupu na web uvidí. Během několika sekund by měl web zaujmout a přesvědčit uživatele, že stojí za to na webu zůstat a nalezne zde to, co potřebuje. Určitě by vzhled a způsob realizace neměl komplikovat, stěžovat či dokonce znemožňovat přístup k hledaným informacím. Přínosný obsah je nejdůležitější částí webu. Proto je návrh a řešení vzhledu webu citlivou záležitostí a podle toho je třeba k této části přistupovat.
Použitelnost a přístupnost webu
Použitelný web se uživatelům dobře používá. Přístupný web je bezbariérový i pro uživatele se specifickými potřebami - neklade uživatelům žádné překážky při získávání informací. Dobrá použitelnost webu je podmínkou pro obchodní úspěšnost webu. Čím má web lepší použitelnost, tím větší je pravděpodobnost konverze. Pokud potřebujeme u webu zvýšit konverzní poměr, právě zlepšení použitelnosti celého webu či nákupního procesu může pomoci.
Použitelnost a přístupnost má v rukou nejen grafik
Při návrhu designu musí grafik respektovat důležitá pravidla přístupnosti a použitelnosti. Běžným nešvarem grafiků je použití nedostatečně kontrastní barvy písma vůči pozadí. Pro kontrolu lze použít nástroj pro testování kontrastu barev. Co se týče použitelnosti webu, běžná pravidla se promítnou již do wireframe. Grafik má pak snadnější práci, protože využívá doporučení konzultanta použitelnosti. Doporučuje se např. umístění loga doleva nahoru, vyhledávání doprava nahoru, globální navigace na stejném místě pro všechny stránky atd.
Webová šablona a sémantický web
Hotový grafický návrh se zpracovává do webové šablony. Běžný postup spočívá v použití vhodných jazyků XHTML pro vytvoření správně strukturovaného dokumentu a CSS pro definici vzhledu webové stránky. Jazyk CSS nastyluje dokument do vzhledu grafického návrhu. Umožňuje velmi efektivně formátovat dokumenty a oddělit popis vzhledu webu od jeho obsahu. Využití kaskádových stylů přináší možnost beztabulkového layoutu, který je ideální pro vytvoření správně strukturovaného dokumentu a tedy i sémantického webu.
Kdy lze web označit jako sémantický a jaká jsou jeho pravidla?
Sémantický web má své informace správně strukturovány a uloženy podle pravidel, která umožňují a usnadňují vyhledání a zpracování těchto informací. Jednotlivé části dokumentu musí být tedy "označkovány" tak, aby vždy bylo jasné, co daný úsek dokumentu znamená. Nejjednodušším otestováním je vypnutí kaskádových stylů. Dokument musí být dobře čitelný a strukturovaný i bez CSS. Druhým krokem je kontrola XHTML kódu - použití správných značek. Pomocí kaskád lze význam prvků vizuálně vylepšovat a upravovat - sémantika nikdy není překážkou pro design webu. V praktické tvorbě webu to znamená zejména:
- html značky definují sémantiku, CSS vzhled - nekombinovat
- všechny značky používat pro svůj standardizovaný význam
- zbytečnými a nesémantickými značkami by se mělo šetřit
- nadpisy označovat značkami <h1> až <h6>, nikoliv pouhým vizuálním formátováním
- odstavce se vytvářejí značkou <p>, nikoliv pomocí <div>, ani odřádkováním <br />
- pro zdůraznění textu slouží tagy <strong> nebo <em>, nikoliv hrátky s kaskádami
- někdy s hodí značky pro logické formátování jako např. <address> nebo <cite>
- navigace se definuje pomocí seznamu <ul>, případně speciální značkou <menu>
- tabulky slouží tabulkovým datům, nikoliv pro vizuální formátování
- formuláře mají svůj řád a příslušné značky <fieldset>, <legend>, <label>
Použití vhodného redakčního systému
Webová šablona se nasadí do redakčního systému, který generuje jednotlivé stránky webu dynamicky. Případně lze postavit web statickou formou, což může být pracnější a húře udržovatelné řešení. Pro větší projekty je nepostradatelný kvalitní redakční systém. Mezi nejpoužívanější open source redakční systémy patří např. Joomla!, WordPress či Drupal.
Copywriting aneb psaní obchodně úspěšných textů pro web
Stránky webu musí nést zajímavý a přínosný obsah pro uživatele. Musí se vytvořit kvalitní texty. O obchodně úspěšné texty se postará copywriting. Psaní textů pro web je velmi specifická záležitost a většinou se vyplatí svěřit tvorbu textů zkušenému copywriterovi. Výsledné texty by měly obsahovat ideální množství vhodně umístěných klíčových slov, na které je stránka optimalizována pro vyhledávače. V tuto chvíli již jsou upřesněny titulky a nadpisy stránek. Máme tedy realizovanou informační architekturu do podoby webových stránek.
Nasazení webu na kvalitní hosting
Po celkovém doladění podoby všech stránek a přípravě celého webu ke spuštění, dojde k nasazení na spolehlivý webový server. Kvalitní hosting je důležitý. Časté výpadky nebo pomalé odezvy by mohly způsobit problémy robotům vyhledávačů. A právě kvůli vyhledávačům není radno podceňovat význam spolehlivého webového serveru.
Linkbuilding - získávání zpětných odkazů
Začíná důležitá fáze optimalizace pro vyhledávače. Je třeba zapracovat na offpage faktorech. Pro úspěch ve vyhledávačích jsou dnes velmi důležité relevantní zpětné odkazy. Získávat zpětné odkazy s velkou váhou lze různými způsoby. Ideální je přirozené získávání odkazů, kdy se různé weby ze své vlastní vůle začnou odkazovat na některou stránku Vašeho webu. Lze mluvit o linkbaitingu, který je tímto směrem zaměřen a snaží se právě o přirozený vznik zpětných odkazů. V kombinaci s bezchybnými a dotaženými onpage faktory je linkbuilding cestou dokončení úspěšného webu.
Google Analytics pro analýzu návštěvnosti
Úspěch a SEO jsou dlouhodobé záležitosti, takže je dobré nasadit statistiky návštěvnosti, např. Google Analytics a průběžně budovat offpage faktory, ladit onpage faktory a tvořit na web aktuální obsah, který uvítají návštěvníci i vyhledávače. Určitě se vyplatí v GA nastavit definované cíle a jejich konverzi pravidelně sledovat. Výstupy s GA dokáží prozradit spoustu užitečných informací o úspěšnosti webu.
Úspěšný internetový marketing přináší zisk
Po nasazení a rozjetí webu lze pracovat s internetovým marketingem a podporovat ziskovost úspěšného webu. Ale každý projekt bývá specifický a vyžaduje individuální přístup. Pokud se povedlo naplnit definované cíle webu, zajistili jsme cílenou návštěvnost s dobrým konverzním poměrem (přeměna návštěvníků na zákazníky, kteří naplnili jeden z cílů webu), na web se občas někdo odkáže ze svých stránek, dosáhli jsme dobré návratnosti investice za realizaci webu, pak je projekt úspěšně zakončen. Realizovali jsme úspěšný web.
Náš zákazník, náš pán?
Pozor na přílišné zapojení zadavatele projektu do návrhu webu. Pokud firma podniká v oboru, který nemá nic společného s tvorbou webů, měla by ponechat veškeré odborné práce v rukou webových specialistů. Zadavatel může poskytnout zásadní informace, které pomohou vytvořit ziskový web. Pokud ale za každou cenu prosazuje své požadavky ohledně struktury navigace, designu a textů, může projekt vyústit v neúspěšný web.
Reference
Ukázky grafických návrhů různých projektů, na kterých jsem se podílel, můžete zhlédnout v sekci reference.