Web, který si postavíš sám — bez jediného řádku kódu

Založit si vlastní web dnes nevyžaduje znalost HTML, CSS ani žádného programovacího jazyka. Nástroje jako SYNTHLUCIDA WEBZENith fungují na principu jednoduchého formuláře: vlevo vyplníš texty, barvy a obsah, vpravo hned vidíš živý náhled, a na konci si stáhneš hotový funkční soubor, který stačí nahrát na hosting.

Co budeš k tvorbě webu potřebovat

Stačí prohlížeč a základní představa o tom, co chceš na webu sdělit — název, krátký popis nabídky nebo služby, pár fotek a kontaktní údaje. Samotnou grafiku, rozvržení i technické náležitosti (SEO tagy, PWA, sitemapu) za tebe vyřeší generátor.

Postup krok za krokem

• Vyplň základní info — název webu, titulek a meta popis pro vyhledávače.
• Nastav hero sekci s hlavním sdělením a přidej tlačítka s odkazy.
• Popiš služby nebo produkty pomocí karet a doplň časté otázky (FAQ).
• Volitelně přidej video nebo audio, pokud to k obsahu webu sedí.
• Zvol barvy a písmo, které sedí ke značce.
• Stáhni hotový web a nahraj ho na hosting nebo doménu.

Výsledkem je jednostránkový web (nebo web s více podstránkami), který je responzivní, rychlý a připravený k publikaci během pár minut — bez měsíčního poplatku za stavebnicový systém.

I jednoduchý prezentační web má šanci se umístit ve vyhledávačích, pokud splní pár základních pravidel. Google i další vyhledávače hodnotí hlavně to, jestli stránka rychle a jasně odpovídá na to, co uživatel hledal.

Title a meta popis

Titulek stránky (<title>) by měl obsahovat název webu i klíčové slovo, které vystihuje nabídku — třeba „Kadeřnictví Praha 5 — objednávky online". Meta popis pak funguje jako krátká reklama ve výsledcích vyhledávání a měl by lákat ke kliknutí, ideálně do 150–160 znaků.

Skutečné podstránky místo skrytých kotev

Pokud web řeší víc témat (třeba „O nás", „Ceník", „Kontakt"), je pro SEO lepší mít je jako samostatné .html stránky s vlastní adresou, titulkem a popisem, než je schovávat jako kotvy na jedné dlouhé stránce. Vyhledávač pak dokáže každou podstránku zařadit zvlášť podle jejího konkrétního tématu.

Rychlost, mobilní verze a strukturovaná data

Web by se měl dobře zobrazovat na mobilu, načítat se rychle a neobsahovat zbytečně těžké soubory. Sekce s častými otázkami (FAQ) navíc může vygenerovat strukturovaná data, díky kterým se otázky mohou zobrazit přímo ve výsledcích vyhledávání jako rozbalovací seznam.

Sitemap.xml a robots.txt

Soubor sitemap.xml řekne vyhledávačům, jaké všechny adresy má web k dispozici, a robots.txt určuje, co se má nebo nemá procházet. Oba soubory patří mezi drobnosti, které se snadno zapomenou, ale výrazně pomáhají rychlejšímu a úplnějšímu zaindexování webu.

PWA (Progressive Web App) je web, který se chová trochu jako mobilní aplikace — návštěvník si ho může „nainstalovat" na plochu telefonu nebo počítače, spouštět ho jako ikonu a některý obsah může fungovat i offline.

K čemu je to dobré

Pro menší firmy a osobní prezentace to znamená, že se zákazník k webu snadno vrátí — místo hledání v prohlížeči klikne rovnou na ikonu na ploše, podobně jako u běžné aplikace. To zvyšuje šanci, že se návštěvník vrátí i podruhé.

Co je k tomu potřeba

Technicky jde hlavně o dva soubory — manifest.json (popisuje název appky, ikony a barvy) a service worker (sw.js), který zajišťuje cachování a offline chování. Obě věci se dají vygenerovat automaticky, k doplnění zbývají jen samotné obrázky ikon ve správných rozměrech.

PWA není nutností pro každý web, ale u projektů, kde se návštěvníci vrací pravidelně (rezervační systémy, jednoduché nástroje, osobní portfolio), dokáže znatelně zlepšit uživatelský zážitek bez nutnosti stavět skutečnou mobilní aplikaci.

Hero sekce je první věc, kterou návštěvník na webu uvidí, a rozhoduje o tom, jestli zůstane, nebo hned odejde. Má na to obvykle jen pár vteřin, takže nadpis a podnadpis musí okamžitě odpovědět na otázku „co tu vlastně je a proč by mě to mělo zajímat".

Nadpis — jasně, ne chytře

Funguje lépe konkrétní sdělení než snaha o vtipnou hlášku, kterou nikdo hned nepochopí. Místo „Měníme svět" je účinnější „Účetnictví pro malé firmy bez papírování" — návštěvník hned ví, o co jde.

Podnadpis doplňuje, neopakuje

Podnadpis by měl přidat konkrétní detail nebo výhodu, ne opakovat nadpis jinými slovy — třeba komu je služba určená, jak rychle se dá začít používat, nebo jaký problém řeší.

Tlačítko s jasnou akcí

CTA tlačítko by mělo popisovat konkrétní krok („Objednat konzultaci", „Stáhnout ceník") místo obecného „Více informací" — návštěvník pak přesně ví, co kliknutí udělá.

Barevná paleta a typografie rozhodují o tom, jestli web působí profesionálně, nebo amatérsky — a přitom je nastavení obvykle otázka pár minut.

Kontrast především

Text musí být dobře čitelný na pozadí — světlý text na světlém pozadí nebo tmavý na tmavém je nejčastější chyba. Pokud si nejsi jistý, zvol raději výraznější kontrast, než aby si návštěvník musel text „luštit".

Méně barev, víc konzistence

Jedna hlavní (akcentní) barva pro tlačítka a odkazy a jedna až dvě barvy pozadí obvykle stačí. Web s příliš mnoha pestrými barvami působí neuspořádaně a rozptyluje od obsahu.

Písmo podle charakteru webu

Geometrická, výraznější písma se hodí pro moderní technologické nebo kreativní projekty, zatímco klasická bezpatková písma působí důvěryhodněji u služeb, financí nebo zdravotnictví. Důležité je hlavně to, aby bylo písmo dobře čitelné i na mobilu.

Obrázky bývají nejtěžší částí webu a mají největší vliv na rychlost načítání — a rychlost je jedna z věcí, kterou hodnotí jak návštěvníci, tak vyhledávače.

Formát a velikost

Pro fotografie se hodí formát JPEG nebo modernější WebP, pro loga a ikony s průhledností PNG nebo SVG. Než obrázek nahraješ, stačí ho zmenšit na skutečnou zobrazovanou velikost (fotku na hero sekci obvykle není potřeba mít širší než 2000 px) — zbytečně velké soubory web jen zpomalují.

Alternativní text (alt)

Alternativní text popisuje, co je na obrázku vidět, pro případ, že se nenačte, a zároveň pomáhá nevidomým návštěvníkům používajícím čtečku obrazovky i vyhledávačům pochopit obsah obrázku. Stačí krátký, věcný popis — „Tým kavárny při přípravě kávy", ne jen „obrázek1".

Kdy použít URL a kdy nahrát soubor

Nahraný soubor se uloží přímo do exportovaného HTML, takže web funguje i bez dalšího hostování obrázků — hodí se pro menší weby. U rozsáhlejšího webu s hodně obrázky je praktičtější hostovat obrázky zvlášť a vkládat jen jejich URL, aby výsledný HTML soubor zůstal menší.

Menší prezentační web si často vystačí s jednou stránkou rozdělenou na sekce (hero, funkce, FAQ), ale u některých témat se vyplatí udělat samostatnou vlastní stránku.

Sekce na hlavní stránce stačí, když

Jde o krátký obsah, který návštěvník typicky prochází v rámci jedné návštěvy — třeba přehled služeb, časté otázky nebo krátké „o nás".

Samostatná stránka se hodí, když

• Obsah je rozsáhlejší (ceník, detailní popis služby, delší článek).
• Chceš, aby se dala sdílet nebo najít ve vyhledávači sama o sobě, s vlastním titulkem a popisem.
• Návštěvníci na ni budou chtít odkazovat samostatně (třeba z e-mailu nebo sociálních sítí).

Výhoda samostatných stránek je i v SEO — každá má vlastní adresu, titulek a meta popis, takže ji vyhledávač může zařadit podle jejího konkrétního tématu, místo aby soutěžila s obsahem celé hlavní stránky.

Většina návštěvníků dnes přijde na web přes mobilní telefon, takže by se měl nejdřív zkontrolovat právě na malé obrazovce, ne až po dokončení na počítači.

Text a tlačítka na dosah palce

Tlačítka a odkazy by měly být dost velké a s dostatečnými odestupy, aby se daly pohodlně stisknout prstem, a text by měl být čitelný bez nutnosti přibližovat obsah.

Krátké řádky, jasná hierarchie

Na úzké obrazovce se dlouhé odstavce a široké tabulky špatně čtou. Pomáhá kratší text rozdělený na odstavce a nadpisy, které návštěvníkovi umožní rychle zjistit, o čem sekce je.

Vyzkoušej to na skutečném telefonu

Náhled v prohlížeči na počítači nikdy plně nenahradí reálný mobil — stojí za to web otevřít přímo na telefonu a projít si ho stejně, jako by to udělal návštěvník.

Dobrá FAQ sekce ušetří čas jak návštěvníkovi, tak provozovateli webu — místo aby se stejné dotazy opakovaly v e-mailech, najde na ně odpověď návštěvník rovnou na stránce.

Vybírej skutečné otázky, ne vymyšlené

Nejlepší zdroj otázek jsou ty, které lidé opravdu pokládají — přes e-mail, telefon nebo sociální sítě. Vymyšlené otázky, které nikdo neřeší, sekci jen zbytečně natahují.

Odpověď rovnou, bez omáčky

Odpověď by měla přijít v první větě a případné podrobnosti až za ní — návštěvník, který otázku rozklikne, chce hlavně rychlou odpověď, ne odstavec, než se k ní dostane.

Řeš i obavy, ne jen fakta

Vedle praktických otázek (cena, dodací lhůta, kontakt) se vyplatí zahrnout i otázky, které řeší pochybnosti — třeba co se stane, když služba nebude vyhovovat, nebo jak funguje reklamace.

Pomalu se načítající web ztrácí návštěvníky ještě dřív, než si stihnou přečíst první větu — a s tím počítají i vyhledávače, které rychlost zohledňují při řazení výsledků.

Největší brzdou bývají obrázky

Neoptimalizované fotky ve vysokém rozlišení jsou nejčastější příčinou pomalého webu. Stačí je před nahráním zmenšit na skutečně potřebnou velikost a použít modernější formát jako WebP.

Méně je někdy víc

Každý další skript, font nebo widget web trochu zpomalí. Vyplatí se ponechat jen to, co má na stránce skutečný účel, a zbytečné doplňky raději vynechat.

Otestuj to, neodhaduj

Subjektivní pocit „mně to přijde rychlé" nemusí odpovídat realitě na pomalejším připojení nebo starším telefonu — vyplatí se web čas od času vyzkoušet i mimo ideální podmínky.

V sekci „Video / Audio" v editoru vlevo si můžeš na hlavní stránku volitelně přidat přehrávatelné video a/nebo audio — objeví se hned za sekcí Funkce, ještě před FAQ. Obě pole jsou nepovinná a dají se použít i nezávisle na sobě.

Video — odkaz, nebo vlastní soubor

Nejjednodušší je vložit odkaz na YouTube nebo Vimeo — stačí běžná adresa videa (např. z adresního řádku prohlížeče), generátor si ji sám převede na vložené (embed) video. Pokud chceš vlastní video soubor, můžeš ho buď nahrát přímo ze zařízení, nebo zadat URL — pokud vyplníš oboje, přednost má URL.

Audio

Audio funguje podobně — nahraný soubor, nebo URL (URL má opět přednost, pokud je vyplněná). Zobrazí se jako přehrávač se standardními ovládacími prvky.

Kdy nahrát soubor a kdy použít URL

Nahraný soubor se uloží přímo do exportovaného HTML — funguje to i bez dalšího hostování, ale u videa to výrazně zvětší výsledný soubor. Pro delší video nebo audio je proto praktičtější mít ho nahrané někde jinde (třeba na YouTube, nebo na vlastním úložišti) a sem vložit jen odkaz.

Popisky nad přehrávačem

K videu i audiu si můžeš volitelně přidat krátký popisek (nadpis), který se zobrazí nad přehrávačem — hodí se, když video/audio potřebuje krátký kontext, proč tam je.