Tvorba webstránok: Ultimátny návod na začiatok s tipmi navyše

Vlastná webstránka v 3 krokoch: čo sa v článku dozviete?

K vašej vysnívanej webstránke vedú len 3 kroky a my vás nimi budeme sprevádzať.

Po prečítaní tohto článku budete vedieť:

1. aký typ webu pre svoj projekt potrebujete, a budete si vedieť všetko dobre naplánovať
2. ako si vybrať vhodné zázemie a nástroje na tvorbu webu a spočítať celkové náklady
3. vytvoriť na svojom webe zaujímavý obsah, prípadne zohnať niekoho, kto to urobí za vás

Praktickým návodom na vytváranie webstránok, teda ako si ich prakticky „vyklikať“ vo web editore, sa budeme venovať neskôr.

Poďme na to!

Krok 1: Plánovanie webu

Predtým, ako sa pustíte do tvorby webstránky, si všetko starostlivo naplánujte. Najskôr sa rozhodnite, aký druh webu chcete vytvoriť.

Webstránky môžu mať mnoho podôb. Toto sú najbežnejšie typy:

1. Firemný web (s dopytovým formulárom)
2. E-shop
3. Portfólio
4. Blog
5. Členská sekcia (pre online kurzy)
6. Online noviny alebo magazín
7. Vzdelávací web
8. Porovnávač

Lekcia z biznisu: Stanovte si konkrétne ciele

Ak sa chystáte vstúpiť do online sveta, musíte si najprv definovať svoj cieľ. Nestačí si len povedať „chcem mať vlastnú webstránku“ alebo „chcem predávať online“. Skôr si položte otázku: „V čom a ako mi webstránka pomôže?“ 

Možno chcete zvýšiť povedomie o značke. No úplne najlepšou odpoveďou na túto otázku je napríklad zvýšenie predaja, objednávok alebo mesačnej návštevnosti v kamennom obchode. 

Pretože mať merateľné ciele vám pomôže lepšie pochopiť, ako veľmi vám webstránka pomáha.

Plán:

1. Stanovte si realistické ciele.
2. Dobre si ich definujte.
3. Vychádzajte pritom zo svojho celkového biznis plánu.
4. Uistite sa, že sa ciele dajú dobre merať.
5. Stanovte si pre ne jasný časový úsek.

Lekcia z marketingu: Definujte si svoje publikum

Na internete denne surfujú miliardy ľudí. Vás však samozrejme zaujíma len malá skupina, ktorá má potenciál stať sa vašimi návštevníkmi a zákazníkmi. 

Práve pre nich vytvárate web, a práve ich pozornosť musíte upútať.

Má byť váš web zábavný alebo seriózny? Má osloviť amatérov alebo profesionálov? 

Ak poznáte svoje publikum a prispôsobíte mu svoju komunikáciu, máte 100-krát väčšiu šancu podnietiť ho k akcii – a akciou môže byť nákup, registrácia, zdieľanie alebo čokoľvek iné.

Profil ideálneho zákazníka:

• Vek a pohlavie
• Lokalita
• Záujmy
• Osobnosť a názory
• Zamestnanie a príjmy

A potom môžete ísť do hĺbky. Zamyslite sa nad tým:

• O čom sníva?
• Čoho sa obáva?
• Co ho štve?

Čím užšia je cieľová skupina, tým lepšie výsledky dosiahnete. Nesnažte sa vytvoriť webstránku pre každého či web, ktorý „nikoho neurazí“. Výsledkom bude rozháraná, nezaujímavá stránka bez myšlienky.

Vyberte si doménu k registrácii

Výber domény neberte na ľahkú váhu. Vaša doména totiž bude reprezentovať vašu značku. 

Na Slovensku je podľa správcu našej národnej domény SK-NIC registovaných vyše 460 000 domén. (Svetovo sme na neuveriteľných 2 miliardách). 

Nájsť voľnú doménu preto môže predstavovať väčšiu komplikáciu, než sa na prvý pohľad zdá. 

Registrujte si svoju doménu čo najskôr, pokojne aj dávno predtým, než sa pustíte do samotnej tvorby webu. 

Tu je návod, ako kúpiť doménu.

Múdri podnikatelia si ju kúpia hneď v ten deň, ako začnú podnikať, aby im ju už nikto nemohol vziať. Vzhľadom na to, že napríklad .SK doména vás vyjde len ná zopár eur ročne, sa im táto investícia oplatí.

Nech už si zvolíte akúkoľvek koncovku, vaše doménové meno by malo plniť tieto 3 úlohy:

1. Chrániť vašu značku
2. Reprezentovať to, kto ste a čo robíte
3. Získať pozornosť vášho publika

9 tipov pre perfektnú doménu:

1. Nech sa jednoducho píše
2. Stručnosť je dôležitá (názov domény by mal mať cca 15 znakov)
3. Vyhnite sa číslam a pomlčkám
4. Pridajte kľúčové slová (názov produktu, služby…)
5. Buďte originálni, nech si vás pamätajú
6. Spravte si prieskum medzi známymi
7. Použite vhodnú doménovú koncovku (.SK je overená istota)
8. Chráňte svoju značku a rozvíjajte sa (poistite si ju nákupom ďalších koncoviek a domén)
9. Konajte rýchlo, kým vám ju niekto vyfúkne

Podrobnejšie sa tejto téme venujeme v článku Ako vybrat názov domény.

Spoznajte konkurenciu

Keď už máte vybratú doménu, je čas začať tvoriť, však? Nie tak celkom. Skôr ako začnete vytvárať svoj web, pozrite si najprv stránky svojich konkurentov a nazbierajte čo najviac inšpirácie.

Všímajte si:

• Rozloženie stránky (titulkov, medzititulkov, jednotlivých blokov)
• Štruktúru obsahu (umiestnenie referencií, odkazov na produkty a pod.)
• Množstvo obsahu a textov (počet slov v odsekoch, dĺžky titulkov)
• Celkový počet stránok
• Využitie obrázkov, videí, animácií
• Použité fonty (typy a veľkosti písma) a farieb
• Navigáciu stránky (aké náročné je sa na webe zorientovať?)
• Optimalizáciu pre mobilné zariadenia

Vytvorte si dokument, skopírujte doň zaujímavé prvky, píšte si poznámky. 

A pamätajte si: dobrí umelci kopírujú, tí najlepší kradnú.

Checklist na plánovanie webu

Poďme si zopakovať úlohy pre 1. krok k vlastnému webu:

1. Stanovte si konkrétne obchodné ciele, ktoré chcete pomocou svojho webu dosiahnuť.
2. Definujte si svoje publikum a vytvorte profil ideálneho zákazníka.
3. Vymyslite perfektný názov a registrujte si doménu (alebo rovno domény).
4. Prebehnite si weby konkurencie a vytvorte si zoznam prvkov, ktoré chcete použiť aj na svojom webe.

Čas potrebný na plánovanie webu: 3–5 hodín.

Krok 2: Tvorba webstránok

Skôr ako sa dostaneme k samotnej tvorbe webstránky, musíme jej zariadiť domov. Tomu sa hovorí webhosting.

Len v skratke: webhosting (alebo len hosting) znamená prenájom miesta na serveri. Váš web je totiž len zbierkou údajov, ktoré je potrebné niekde uložiť.

Ako si vybrať poskytovateľa webhostingu

Kvalitný webhosting je základom úspešného webu. Svojho poskytovateľa webhostingu si preto vyberajte podľa:

1. Spoľahlivosti: akýkoľvek výpadok na strane poskytovateľa znamená, že vaša stránka je nefunkčná. Spoľahlivosť webhostingu môžete zistiť podľa času prevádzkyschopnosti alebo dostupnosti servera (vyjadrenej v percentách). Veľkým plusom je automatické zálohovanie.
2. Podpory: Venujte pozornosť recenziám, prečítajte si názory na Facebooku. Dôležité je, ako rýchlo dokážu reagovať na vaše požiadavky a či dostanete všetky potrebné informácie.
3. Diskového priestoru: To závisí od typu webu, ktorý tvoríte. Fotografické portfólio určite zaberie viac miesta ako bežná firemná webstránka.
4. Bezpečnosti: Malvér a vírusy môžu zničiť celý váš rozbehnutý web. Uistite sa, že váš hosting obsahuje antivírus, skenovanie malvéru, ochranu proti DDoS a SSL certifikát.
5. Škálovateľnosti: Každý podnikateľ chce rásť. Uistite sa, že váš webhosting dokáže rásť spolu s vami. Ponúka váš poskytovateľ aj serverové riešenia?

Ako si vybrať webhosting

Každý poskytovateľ webhostingu zvyčajne ponúka niekoľko webhostingových balíčkov. Pri výbere konkrétneho webhostingu: 

1. Zohľadnite očakávanú veľkosť stránky. Bežná webstránka zvyčajne zaberá do 5 GB priestoru (e-shopy alebo fotografické portfóliá môžu pokojne zabrať aj viac).
2. K veľkosti webu pridajte aj firemný e‑mail. Ak budete využívať firemný e‑mail na vlastnej doméne, počítajte s tým, že si vaša e‑mailová schránka odhryzne kúsok z kapacity webhostingu.
3. Zohľadnite predpokladanú návštevnosť. Pre bežné weby stačí zdieľaný webhosting, pri ktorom sa o výkon 1 serveru delí viac webov. Napríklad e‑shop však (a minimálne pred Vianocami) potrebuje celý výkon pre seba. Preto je lepšie si v takomto prípade zaobstarať vlastný virtuálny server.
4. Vyberte si redakčný systém (viď nasledujúca kapitola). Mnohí poskytovatelia napríklad optimalizujú svoj webhosting na WordPress.
5. Plánujte dopredu. Ak chcete napríklad expandovať na ďalšie trhy (alebo jednoducho maáte viac webov), zaobstarajte si multihosting. Môžete na ňom uložiť viacero domén (teda webov) naraz a ušetriť peniaze.

Ako vytvoriť webstránku

Teraz sa konečne dostávame k tomu, prečo ste sa pustili do čítania tohto článku: ukážeme vám, ako vytvoriť webstránku (alebo ako s tvorbou webu vôbec začať). 

Existuje viacero spôsobov, ako začať, ale pre účely tohto článku si ukážeme len 2 najobľúbenejšie:

• jednoduchý web editor
• pokročilejší redakčný systém (CMS) typu WordPress

Web editor pre (nielen) jednoduché weby

Ak sa považujete za netechnický typ a nechcete investovať príliš veľa času a prostriedkov do tvorby webu, potom je toto riešenie pre vás ideálne. 

Svoj web si môžete doslova poskladať z blokov ako stavebnicu.

Využite napríklad náš Webglobe WebEditor. 

• Vyberte si jednu zo 60 šablón, ktorá najviac ladí s vašimi potrebami, nahrajte do nej vlastný text a obrázky a v priebehu hodiny môžete mať svoj web online.
• WebEditor ho navyše automaticky prispôsobí aj pre mobilné telefóny.
• Navyše nemusíte riešiť kúpu webhostingu, pretože ho máte v cene (takže na celú predchádzajúcu kapitolu môžete s pokojným srdcom zabudnúť).
• Základná verzia WebEditoru je zadarmo, takže máte možnosť si všetko najprv vyskúšať.

Web editor je vhodný pre podnikateľov a firmy, ktoré chcú byť čo najrýchlejšie online a potrebujú jednoduchú, reprezentatívnu webstránku.

WordPress – najpoužívanejší redakčný systém na tvorbu webu na svete

Redakčný systém WordPress si už vyžaduje väčšiu technickú zdatnosť, hoci vedieť programovať v ňom, aspoň na začiatku, nepotrebujete. 

Väčšinu vecí zvládnete vďaka pluginom – rozširujúcich modulov (napríklad na tvorbu e‑shopu slúži plugin Woocommerce).

WordPressu sme sa viac venovali v článku Čo je WordPress, CMS (a ako si ho nainštalovať na 1 klik).

Tu len spomenieme, že WordPress dnes používá 43 % všetkých webov na internete. Existuje k nemu nekonečné množstvo videonávodov a online kurzov.

Niekedy je dobré začať hneď s nástrojom, ktorý umožní vášmu webu rásť. Každý programátor a UX dizajnér dokáže pracovať so systémom WordPress, takže keď sa rozhodnete posunúť svoj web na ďalší level, nebude to taký problém.

Aby sme dosiahli maximálnu rýchlosť pre váš budúci web, rozhodli sme sa všetky naše webhostingové balíčky naplno optimalizovať pre WordPress. Ten si na ne zvládnete nainštalovať na 1 klik. 

WordPress je dokonalé riešenie, ak chcete mať väčšiu slobodu pri dizajne a nastavovaní svojich stránok a ak máte čas a chuť učiť sa používať nové nástroje. Oceníte možnosť rozšíriť ho o tisíce doplnkov pre online predaj, marketing, analytiku, bezpečnosť atď.

10 tipov pre tvorbu webu

1. Vyberte si jednoduchý a čistý design.
2. Zvoľte také farby, ktoré ladia s vaším logom.
3. Používajte kvalitné obrázky s vysokým rozlíšením.
4. Zvoľte font, ktorý sa jednoducho číta.
5. Píšte krátke, ale jasné a jednoducho pochopiteľné texty.
6. Snažte sa o čo najjednoduchšiu štruktúru, menu a navigáciu na webe.
7. Uistite sa, že je váš web responzívny (prispôsobí sa mobilom).
8. Pridajte odkazy na svoje sociálne siete.
9. Nezabudnite na stránku s kontaktami.
10. Riaďte sa dátami a upravujte podľa nich.

Checklist na tvorbu webstránok

1. Zvoľte si web editor alebo WordPress.
2. Zaobstarajte si webhosting.
3. Navrhnite si celkový štýl webu (farby, font písma atď.).

Koľko stojí vytvorenie webstránky?

Ak sa vydáte cestou DIY („urob si sám“), okrem vášho drahocenného času vás bude tvorba webstránky stáť len toľko, koľko zaplatíte za:

• doména
• webhosting
• redakčný systém

V prípade, že si na tvorbu webu zvolíte WordPress a doménu a webhosting si zabezpečíte vo Webglobe, môžete mať web už od cca 35 eur ročne. 

Pokiaľ sa rozhodnete vyskúšať náš WebEditor, bude vaším jediným počiatočným nákladom registácia domény. 

Nákladom na tvorbu webu se bližšie venujeme v článku o Tvorbe webu: koľko vlastne stojí webstránka? 

V ďalšom článku vám ponúkame aj návod na to, ako si vytvoriť bezplatný web (upozorňujeme, že weby zadarmo sú vhodné tak akurát pre hobby blogy).

Krok 3: Vytvorte kvalitný obsah

Tvorba webstránky samozrejme znamená aj tvorbu jej obsahu.

Či už chcete, aby sa návštevníci prihlásili na odber noviniek, nakúpili alebo urobili čokoľvek medzi tým, kľúčom k úspechu je vždy kvalitný text, ktorý ich k tomu podnieti.

Dobre zvolené slová a obrázky dokážu naozaj veľa.

Váš príbeh rozhoduje o tom, či si vás návštevníci obľúbia

O úspechu vášho biznisu nerozhoduje ani tak cena vašich produktov alebo úžasný, profesionálny web.

Dôležitejšie ako racionálne argumenty alebo vzhľad je to, ako veľmi sa s vami (a vaším produktom) dokážu zákazníci stotožniť. Inými slovami, či ste im sympatickí a či je im blízka vaša „filozofia“.

Nezáleží až tak na tom, ako dobre viete písať. Dôležitý je váš príbeh. Nebojte sa odhaliť niečo zo svojej minulosti, zo svojho súkromného života, z tajomstiev svojho produktu, aby bolo jasné, že za vaším webom stojí človek z mäsa a kostí.

• Povedzte niečo o začiatkoch svojho projektu.
• Nebojte sa hovoriť o chybách a slepých uličkách.
• Pridajte fotky alebo videá vás a vášho tímu v akcii.
• Vysvetlite, ako vznikajú vaše výrobky.
• Ukážte, ako vaše výrobky skutočne pomáhajú.

5 najdôležitejších stránok vášho webu z hľadiska obsahu

• Domovská stránka (home page) je to prvé, čo vaši návštevníci uvidia. Nezačínajte preto rovno prezentáciou produktov. Najskôr si vás musia obľúbiť. Skúste najskôr v hlavnom titulku a jednom súvetí zhrnúť, čo (pre nich) vy a váš produkt robíte.
• Stránka O nás je najlepšie miesto pre váš príbeh. Rozprávajte príbeh o tom, ako sa to všetko začalo, a umožnite návštevníkom nahliadnuť pod pokrievku vašej značky.
• Produktová stránka vám zarába peniaze. Nezabúdajte, že obrázky, rovnako ako zvyšok obsahu, majú byť podnetné. To znamená, že okrem samotného produktu zobrazujú aj spokojných ľudí, ktorým váš produkt pomohol (spomeňte si na akýkoľvek billboard Coca Coly).
• Referencie dokážu raketovo naštartovať váš predaj. 90 % zákazníkov sa pri nákupe rozhoduje podľa recenzií. Nebojte sa vypýtať si ich od svojich zákazníkov a nebojte sa nimi ani pochváliť. Hlavne si ich nevymýšľajte. Také čosi je už dokonca aj zakázané zákonom.
• Kontakty by mali obsahovať aspoň váš e‑mail. Vo WordPresse si môžete jednoducho pridať aj kontaktný formulár. Uveďte tu takisto svoje údaje o podnikaní (IČO atď.).

Obsah webu si ideálne vytvorte sami

Sami najlepšie poznáte seba, svoju firmu, svoj príbeh a hlavne svoj produkt. Nemusíte byť Shakespeare, aby ste napísali úžasný text. 

Oveľa dôležitejšia ako spisovateľský kumšt je úprimnosť – tú zákazníci veľmi dobre vycítia. Vaša tvár, meno a značka inšpirujú viac ako dokonalá slovenčina.

Tvorba obsahu nemusí byť taká drina. Tu je niekoľko tipov, ktoré vám pomôžu vykročiť správnou nohou:

• Publikum: vždy naň popri písaní berte ohľad. A dajte si pozor, aby váš text nielen dobre vysvetlil, čo robíte a ponúkate, ale aj to, v čom ste lepší než konkurencia.
• Tone of voice: Prispôsobte spôsob svojho vyjadrovania publiku (napr. spisovný/nespisovný jazyk, slang, humor atď.). Zakaždým však buďte úprimný.
• Vzhľad stránky: štruktúrovanie obsahu je veľmi dôležité. Píšte jednoduché, krátke vety. Používajte veľa nadpisov. Vyhnite sa dlhým textom. Medzi odsekmi nechávajte dostatočné medzery a text prelínajte obrázkami. Text musí byť zrozumiteľný a ľahko čitateľný.
• Skúšajte: nebojte sa meniť obsah, testujte rôzne štýly. Na A/B testovanie obsahu priamo na webe môžete využiť nástroje, ako je napríklad Google Optimize. O správaní návštevníkov stránky vám veľa prezradia heatmapy v Hotjar.

Copywriteri: písanie textov na zákazku

Na písanie textov si kedykoľvek môžete prizvať copywritera. Dobrý copywriter si však bude účtovať minimálne 20 € za hodinu (alebo 50 € za normostranu textu). 

A nezabudnite: nikto nepozná váš produkt tak dobre ako vy. Vysvetľovanie copywriterovi, čo a ako predávate, môže nakoniec priniesť viac problémov ako úžitku.

Ako na webe používať obrázky

Je smutnou pravdou, že ľudia texty na weboch nečítajú. Obsah skôr skenujú. Ich oči sa pohybujú a zastavujú sa len na výrazných vizuálnych prvkoch. 

V priebehu 5–10 sekúnd sa rozhodnú, či váš web stojí za bližšiu pozornosť.

Preto sú okrem dobre formulovaných titulkov a výrazných tlačidiel dôležité predovšetkým obrázky. 

Ak chcete na svojom webe udržať čo najviac návštevníkov, dodržiavajte tieto pravidlá:

• Používejte radšej vlastné obrázky. Fotobanky ako Shutterstock, Unsplash alebo Pixabay sú lacné a pohodlné zdroje kvalitných obrázkov. Studie a články však dokazujú, že ľudia generické fotky na weboch ignorujú.
• Ak chcete vyvolať silnejšiu reakciu, použite fotky ľudí, ktorí sa smejú a pozerajú priamo do objektívu. Aj keď sme si zvykli nakupovať väčšinu vecí cez internet, ľudský kontakt je pre nás mimoriadne dôležitý – ako dokazuje aj tento A/B test obrázkov.
• Používajte kvalitné fotografie. Vyhnite sa rozmazaným, zle osvetleným záberom. Na zlepšenie kvality fotografií použite bezplatné alternatívy Photoshopu, napríklad Pixlr alebo Photopea.
• Optimalizujte veľkosť. Veľké a kvalitné obrázky zaberajú veľa miesta na hostingu a môžu celý web spomaľovať. A pomalé weby zákazníci a Google neznášajú. Preto ich všetky pred odoslaním komprimujte pomocou TinyPNG.
• Umiestnite obrázky na exponovaných miestach, najmä v hornej časti a na produktových stránkach.

Fotografie smejúcich sa ľudí pomáhajú návštevníkom identifikovať sa s vašou značkou a vytvárajú tzv. social proof – dôkaz, že vaše produkty sú obľúbené.

Lekcia z marketingu 2: používajte AIDA model

AIDA je skratka 4 slov opisujúcich celú cestu vášho zákazníka:

• Awareness (povedomie) – prvýkrát o vás budú počuť
• Interest (záujem) – začnú sa o vašu značku a produkty viac zaujímať
• Desire (túžba) – záujem sa zmení na potrebu kúpiť si váš produkt
• Action (akcia) – hľadá spôsob, ako u vás nakúpiť

Túto cestu by ste mali nasledovať aj vo svojom marketingu, čiže by ste na ňu mali myslieť vždy, keď tvoríte akýkoľvek obsah. Pretože váš obsah je to, čo na internete predáva za vás – čo zákazníka na tejto ceste vedie.

Aplikujte model AIDA na svoju celkovú stratégiu – snažte sa osloviť zákazníkov vo všetkých fázach. Každému z nich totiž musíte pripraviť trochu inú reklamu.

Myslite naň aj vtedy, keď pripravujete napríklad štruktúru svojej domovskej stránky:

• Awareness = úvodný obrázok (hero image) s hlavným titulkom a popisom, ktorý jasne a stručne vystihuje, kto ste a čo robíte (inými slovami, s čím návštevníkom dokážete pomôcť).
• Interest = váš príbeh a predstavenie produktu s benefitmi, které prináša zákazníkom.
• Desire = argumenty, v čom ste lepší než konkurencia + social proof, teda referencia od spokojných zákazníkov
• Action = tlačidlo alebo objednávkový formulár, teda jasná ponuka podporená napríklad zľavovým kupónom, dopravou zadarmo

Checklist pro tvorbu obsahu

1. Pripravte si štruktúru svojho webu.
2. Rozhodnite sa, či si obsah napíšete sami alebo si zaplatíte copywritera.
3. Vytvorte parádny obsah, ktorý bude predávať.