Tvorba webových stránek pro začátečníky v 6 krocích

Představte si truhláře Petra, který chce mít web do týdne a po třech večerech má rozdělanou šablonu a žádnou poptávku. Chyba nebyla v technice, ale v pořadí práce. První web se dá postavit v šesti krocích, které na sebe navazují a nevyžadují programování. Petrův příklad ukazuje, kde se čas ztrácí nejčastěji a co lze bezpečně odložit. U každého kroku najdete konkrétní rozhodnutí, ne obecné rady. Při práci po večerech počítejte spíš s dvěma až třemi týdny než s jedním víkendem.

Krok 1: Rozhodněte, co má web po návštěvníkovi chtít

Petr si nejdřív napsal jednu větu: web má přivést poptávky na kuchyně na míru. Bez takové věty se z webu stane výkladní skříň všeho, co truhlář umí. Cíl určuje, co uvidí návštěvník na úvodní stránce a které stránky vůbec potřebujete. Většina malých firem vystačí s úvodem, nabídkou, ukázkami prací a kontaktem.

Zjistěte také, kdo bude web číst. Petr počítá s manželi, kteří rekonstruují byt a hledají řemeslníka z okolí. Takový čtenář chce vidět fotky hotových zakázek, postup spolupráce a telefon. Technické vlastnosti dřeva ho zajímají méně.

Do poznámek si zapište tři až pět stránek a ke každé jednu větu, co na ní má být. Tomu se říká struktura webu a ušetří vám dlouhé přemýšlení u výběru šablony. Pokud některou stránku neumíte popsat jednou větou, zatím ji nepotřebujete. Web můžete rozšířit kdykoli později.

Krok 2: Doména a hosting, dvě věci, které se špatně mění

Doména je adresa webu, hosting je místo, kde web běží. Petr zvolil krátkou doménu s názvem dílny a českou koncovkou, protože se dobře diktuje do telefonu. Vyhněte se pomlčkám a číslicím, které lidé při předávání adresy pletou. Doménu registrujete u registrátora a ve správném případě jste uvedeni jako její držitel.

Hosting vybírejte podle jednoduchosti, ne podle nejdelšího seznamu funkcí. Pro malý firemní web stačí základní tarif s přehledným ovládacím panelem a pravidelnými zálohami. Zeptejte se, kdo se stará o bezpečnostní aktualizace a zda je součástí certifikát HTTPS. Bez šifrovaného spojení prohlížeče web označí jako nezabezpečený.

Doménu i hosting veďte na vlastní účet a přihlašovací údaje si uložte do správce hesel. Častá chyba začátečníků je nechat vše na známém, který web „zařídil“, a po letech ztratit přístup. Prodlužování domény si nastavte automaticky nebo si dejte připomínku do kalendáře. Propadlá doména zmizí i s e-maily, takže přijdete o poptávky.

Krok 3: Systém a šablona podle toho, co umíte

Začátečník má tři hlavní cesty: webový editor typu „přetáhni a pusť“, redakční systém, nebo zakázkový web od programátora. Petr zvolil redakční systém, protože po spuštění chce sám přidávat fotky nových zakázek. Editor je nejrychlejší na start, ale pozdější stěhování bývá obtížné. Zakázkový web se vyplatí, až když máte nezvyklé požadavky.

Šablonu vybírejte podle struktury, kterou jste si zapsali, ne podle titulní fotky. Dobrá šablona se hezky zobrazí na telefonu, rychle se načítá a dá se upravit bez zásahu do kódu. Projděte její ukázku na mobilu a zkontrolujte, zda je text čitelný. Každý přidaný doplněk web zpomaluje a zvyšuje riziko chyb po aktualizaci.

Barvy a písmo omezte na dvě až tři barvy a jedno až dvě písma. Petr zvolil světlé pozadí, tmavý text a odstín dřeva pro tlačítka. Jednotný vzhled působí důvěryhodněji než efekty. Logo stačí jednoduché, třeba název dílny sázený písmem.

Krok 4: Texty a fotky vznikají dřív než design

Texty vás zdrží víc než technika, proto je pište brzy. U každé stránky popište, co nabízíte, pro koho a jak začít spolupráci. Petr u kuchyní vysvětlil tři věci: jak probíhá zaměření, kdy dostane výkres a jak dlouho trvá výroba. Konkrétní popis zaujme víc než věta o kvalitní práci.

Fotky jsou u řemesla polovina obsahu. Fotografujte za denního světla, z několika úhlů a bez nepořádku v pozadí. Před nahráním je zmenšete, protože snímek z telefonu o několika megabajtech web zbytečně zpomalí. Soubory pojmenujte smysluplně a ke každé fotce doplňte krátký popisek.

Dávejte pozor na cizí materiály. Obrázky z internetu mají majitele a jejich použití bez svolení může skončit požadavkem na odškodnění. Fotky interiérů zákazníků zveřejněte jen s jejich souhlasem. Raději pár vlastních záběrů než galerie převzatých.

Krok 5: Kontakt, mobil a vyhledávače

Kontakt má být vidět bez hledání: telefon, e-mail, adresa a pracovní doba v záhlaví nebo patičce. Telefonní číslo udělejte tak, aby se na mobilu dalo vytočit jedním dotykem. Petr přidal krátký formulář se třemi poli, protože každé pole navíc odradí část lidí. Po odeslání se zobrazí potvrzení, že zpráva dorazila.

Základ pro vyhledávače je výstižný titulek stránky a krátký popis, ve kterých je řečeno, co a kde nabízíte. Každá stránka má mít vlastní titulek, jinak si ho vyhledávač domýšlí podle textu. Firmu přidejte také do mapových služeb, aby vás našli lidé z okolí. Údaje v nich musí odpovídat webu.

Zkontrolujte web na telefonu i tabletu a vyzkoušejte, zda se na tlačítka dá trefit palcem. Velká část návštěv přichází z mobilu, i když podíl se podle oboru liší. Rychlost načtení zkuste na pomalejším připojení. Pokud se stránka načítá dlouho, začněte u velikosti obrázků.

Krok 6: Spuštění, právní minimum a údržba

Před zveřejněním projděte web jako cizí člověk: klikněte na každý odkaz, odešlete formulář a zkontrolujte překlepy. Poproste o to i někoho, kdo vaši práci nezná. Petr při takové zkoušce objevil chybné telefonní číslo v patičce. Před spuštěním ho opravil za minutu, po spuštění by ho stálo poptávky.

Právní minimum závisí na tom, co web dělá. Pokud sbíráte osobní údaje přes formulář nebo používáte analytické a reklamní cookies, musíte o tom návštěvníky informovat a u nepovinných cookies získat souhlas. Na web patří také identifikace provozovatele, tedy jméno nebo firma, adresa a identifikační číslo. Konkrétní povinnosti se liší podle formy podnikání, proto je ověřte u úřadu nebo poradce.

Po spuštění práce nekončí. Pravidelně aktualizujte systém a doplňky, zálohujte a čas od času přidejte novou zakázku. Petr si dal do kalendáře hodinu měsíčně na kontrolu a novou fotogalerii. Živý web si zapamatují zákazníci i vyhledávače lépe než nehybný.

Zdroje

• CZ.NIC
• Úřad pro ochranu osobních údajů
• Dokumentace zvoleného redakčního systému