Prezentace firmy pomocí webové stránky - web Nakódujem to! J Ing. Michal Stoklasa, Ph.D. Ing. Daniel Kvíčala E-marketing •1 Webová stránka – definice, funkce, typy. •2 Co znamená funkční web – UX, SERP, copy, trend, CMS. •3 Tvorba webové stránky - Obsah přednášky csvukrs •https://www.mytimi.cz/tvorba-webu-ad-a-do-z/ Zpracovat příští rok csvukrs •Oxford Dictionary: „Web site is a set of related web pages located under a single domain name, typically produced by a single person or organization“. „Web page is a hypertext document on the World Wide Web“. •Patria: „Česká terminologie dle Nejvyššího soudu rozlišuje pojem „internetové stránky“ („web site“), který rozumí souhrn jednotlivých webových stránek sjednocených pod určitou doménou a dohromady tvořících určitou webovou prezentaci, a pojem „internetová stránka“ („web page“) je naopak jednotlivá webová stránka, která se zobrazí v okně internetového prohlížeče, pokud je do adresního řádku zadána konkrétní adresa. 1 Webová stránka OD: https://languages.oup.com/google-dictionary-en/ Patria: https://www.patria.cz/pravo/4089625/pojmy-internetova-stranka-a-internetove-stranky-jaky-je-rozdil. html •Styčný nástroj marketingové komunikace na internetu. •Funkce webu: –poskytování informací zákazníkům a prezentace produktů, –sběr dat o zákaznících - pomocí sledovacích kódů (Google Analytics, FB), –prodej výrobků a služeb, –cíl online marketingových kampaní - sociální sítě, PPC reklamy, –z části nahrazuje kamennou prodejnu. • • Webová stránka – k čemu je? csvukrs •eCommerce - e-shop - přímý prodej produktů. •Firemní / Business - prezentace firmy, možnost kontaktování, leady. •Blog - sdílení textového a vizuálního obsahu, vzdělávání, “nurturing”. •Portfolio - prezentace umělců a jejich děl. •Osobní - sebeprezentace, může fungovat jako CV. •Členství / předplatné - placený přístup k obsahu - magazíny, vzdělání, atd. •Neziskové - charity a obecně prospěšné organizace. •Informační - servery poskytující informace - např. Wikipedia. •Fóra - pro lidi se společnými zájmy, komunity - pro diskusi / sdílení. • Typy a funkce webů csvukrs •Funguje - možno navštívit, prohlédnout produkty, procházet stránky. •Prodává - možnost realizovat nákup - platební brána, doprava, napojení na sklad. •Sbírá data - měří chování návštěvníků - doba, počet stránek, nákupy, tržby, atd. •Jde upravovat - můžeme v krátkém čase měnit jeho obsah bez omezení funkcí. •Jde najít - web se nachází ve výsledcích vyhledávání (SERP - Search Engine Result Page - výsledky vyhledávání při zadání daného klíčového slova). • 2 Co znamená funkční web? csvukrs SERP Na pravém snímku jsou pod produktovými reklamami (obrázky produktů) reklamy - označení AD nad nadpisem reklamy. Vlevo jsou organické výsledky vyhledávání. •Uživatelsky přívětivý design. •Není to až tak o kráse, spíše u funkčnosti. •Přehlednost webu - zákazník snadno najde, co hledá (např. Menu nebo košík). •Snadná orientace - vždy vím, jak se dostat na další stránku. •Motivace pokračovat v prohlížení - odkazy na více informací nebo akce. •Design - viz aktuální trendy. •Interaktivní - vybízí k akci, reaguje na chování zákazníka. • User eXperience (UX) csvukrs •Jasný popis, kdo jste a co děláte - stručně, výstižně, ideálně na HP. •Kontaktní stránka / možnost kontaktovat - více možností (tel., mail, adresa). •Brand identity - web musí obsahovat prvky značky (barvy, tvary, logo, claim). •Jasné CTA (Call to Action) - “Více informací”, “Koupit”, “Další stránka”, atd. - každá stránka musí toto obsahovat, jinak bráníme v postupu ke konverzi (nákup, lead). •Kódy a měření - Google Analytics, Google Ads, Facebook pixel, Sklik - sledování chování, sběr dat, remarketing. • 5 klíčových bodů csvukrs •Web - popisky produktů, text „o nás“, popis příběhu značky, kontakty. •Metadata - v pozadí webu, určuje strukturu textu a webu - titulek webové stránky, nadpisy (3. základní úrovně) - např. Pomáhá Googlu rozklíčovat web. •Mimo web - PR články, emailing, obsah na sociální sítě, placené reklamy související s obsahem webu a značkou. • •Zásadní pro optimalizaci pro vyhledávače (SEO) - aby vás lidé našli pomocí Google / Seznam. • Copywriting csvukrs •Zdůraznění prázdného prostoru (minimalismus, responsivita) •volný prostor vytváří vzdušný design •na různých zařízeních se díky volnému prostoru zachovají prvky •díky volnému prostoru vynikne klíčové sdělení - lepší pozornost •podporuje orientaci a přehlednost • •Oversized bannery (prvky) na homepage •vyzdvihnout stěžejní prvek sdělení - hlavní produkt, claim, benefity, USP, atd. •podpoří důraz daného sdělení Aktuální trendy csvukrs •Výrazná typografie •tučné a velké písmo •Jednoduchá kolážová grafika •spojení prvků •jednoduché linky •Vertikální storytelling • •Příklad za všechny • Aktuální trendy csvukrs •Redakční systém je internetová aplikace, která jednoduchým způsobem umožňuje vytvářet a upravovat webové stránky. • •Technologický název je CMS systém (content management system) nebo také publikační systém. • •Vlastní redakční systém nebo všeobecně rozšířený systém –značný rozdíl v ceně a variabilitě • • Redakční systém csvukrs •Vlastní řešení: –Časově náročné - až několik let –Velmi nákladné - až desítky milionů –Náročné na znalosti nebo schopnost zadat práci dodavateli –Potřeba údržby a aktualizace –Téměř absolutní variabilita obsahu a použitých prvků nebo technologií •Šablonové řešení = přesný opak: –Web můžeme spustit za několik hodin –Teoreticky nulové finanční náklady –V případě funkčního řešení je ale nezbytné investovat čas i peníze, ale podstatně méně než u vlastního řešení –Wordpress, Joomla, Prestashop, Woocommerce Redakční systém csvukrs •Horní menu - logo = proklik na hlavní stránky, názvy kategorií webu, vpravo odkaz na kontakt •Obrázky jsou z části Galerie - vidíte zvýraznění kategorie v horním menu • • Co vidí zákazník csvukrs Co vidí webař? csvukrs •Redakční systém - systém pro správu webu •V levém menu jsou kategorie redakčního systému, kde se nastavují jednotlivé prvky, přidávají další stránky, atd. •Zvýrazněná část - obrázky z předchozího slidu - image = obrázek, spacer = mezera pod obrázkem •Vše musí být správně vloženo a nastaveno, aby se zobrazovalo v žádoucím rozložení •Odstranění jednoho samostatného prvku (např. Spacer u jednoho obrázku) může rozhodit celou stránku • Co vidí webař? csvukrs Co vidí marketér / analytik? csvukrs •Mezioborová disciplína –Psychologie –Vizuální komunikace –Interakční design –Branding –Copywriting –Gamifikace –Programování –Grafika –Výzkum • • 3 Tvorba webové stránky The Illusion of Multitasking Boosts Performance – Association for Psychological Science – APS csvukrs •Psychologie - co chce zákazník vidět, jak ho zaujmout, jak stimulovat rozhodování a chování obecně. •Vizuální komunikace - způsob zobrazení informací a prvků. •Interakční design - jak přimět člověka klikat na tlačítka, postupovat webem. •Branding - vzhled webu v kontextu s identitou značky - barvy, tvary, tón. • Tvorba webové stránky – mezioborová disciplína csvukrs •Copywriting - textace webu. •Gamifikace - “prodej hrou”. •Programování - nastavení webu, aby vše fungovalo jak má. •Grafika – vizuál. •Výzkum - sběr dat pro rozhodování o vzhledu, funkcích a celkovém návrhu webu. • • Tvorba webové stránky – mezioborová disciplína csvukrs •Objevování - Pochopení klienta (Kdo je? Co dělá? Proč by někdo měl chtít jeho službu? Kdo jsou jeho zákazníci? Jaká má očekávání vzhledem k webu? Jak web zapadá do celkové komunikace společnosti? Na jakém trhu působí?). •Uživatelský výzkum - Pochopení návštěvníků webu (Analýza konkurenčních webů a jejich USP, analýza klíčových slov, segmenty, persony, hloubkové rozhovory, …). •Návrh webu - Návrh informační architektury, mapa webu, skicování, wireframy , grafický návrh, vytvoření. •Evaluace - Uživatelské testování, eye tracking , checklisty, A/B testování, expertní zpětná. Fáze návrhu webu (Řezáč) Zdroj: Řezáč – Web ostrý jak břitva •Čeká nás mnoho výzkumu, plánování, návrhů, to vše v mnoha iteracích (opakováních). •Definujeme účel webu, cíl webu (prodej, povědomí, akvizice zákazníků, komunikace, obsah, leady, servis apod.) a cílovou skupinu. •Sestavíme seznam funkcí a obsahu, které chceme na webu zahrnout. •Vymyslíme název domény (adresy webu), zkontrolujeme její dostupnost a zaregistrujeme. •Vybereme hosting a zaregistrujeme. •Vybereme si CMS. •Začínáme návrh webu – výzkum, z toho pak tvorba wireframu. Takže jak začneme? Zdroj: Řezáč – Web ostrý jak břitva •Doména určuje jednoznačnou pozici webových stránek v internetovém prostředí. Je to v podstatě adresa. Pravidla pro tvorbu: krátká, výstižná, dobře zapamatovatelná, snadno napsatelná, etická. •Odkazuje na hosting, kde je uložen váš web. •Nákup domény – vybírám si koncovku, ceny podle atraktivity, nákupy v jednotkách: rok. Spekulace s doménami. Různí poskytovatelé pak mají různé poplatky za služby. Doména csvukrs •Webhosting (hosting) pronájem místa na internetu pro vaše webové stránky. •V podstatě si představte místo na disku serveru, který běží nepřetržitě a někdo se o něj stará. •Vy si zde nahrajete svůj obsah a odkazujete na něj pomocí domény. Hosting csvukrs •Wireframe je základní náčrt nebo plán struktury webové stránky nebo aplikace. •Slouží k vizualizaci rozložení prvků na stránce a hierarchii obsahu. •Wireframe je vytvořen v rané fázi návrhu, než začnete pracovat na grafickém designu a programování. •Ruční kreslení vs. Grafické programy vs. Online wireframe nástroje. Wireframe csvukrs Wireframe - příklad sketch website wireframe example Zdroj: https://looka.com/blog/wireframe-examples/ •Vytvoříme web ve zvoleném CMS systému. •Zavedeme zvolenou funkcionalitu. •Napojíme systémy a databáze. • •Podrobnosti v předmětu Design a správa webové stránky. Vývoj webu a implementace csvukrs •Otestujte webové stránky v různých prohlížečích a na různých zařízeních, abyste zajistili jejich správnou funkčnost a vzhled. •Zkontrolujte, zda všechny odkazy, formuláře a funkce pracují správně. •Přidávejte relevantní klíčová slova do obsahu a meta popisů. •Ujistěte se, že web je dobře strukturovaný a má srozumitelné URL adresy. • •Pokud jsme spokojeni – web PUBLIKUJEME! (Gratuluji J Testování webu a optimalizace csvukrs •Je důležité mít na paměti, že tvorba webu je kontinuální proces. •Web již žije a my vidíme data v Google Analytics, dostáváme zpětnou vazbu od zákazníků, sledujeme konkurenční řešení apod. •Pravidelně aktualizujeme obsah a zabezpečení webu. •Zálohujeme soubory a databázi. •Reagujte na zpětnou vazbu uživatelů a sledujte výkon webu. Udržování a aktualizace csvukrs •Koupím doménu a hosting – např. https://www.active24.cz/ •Stáhneme, nainstalujeme, naučíme se Wordpress a šablonu. WWW.WORDPRESS.ORG •Navrhneme wireframe – např. https://whimsical.com/ •Tvoříme web, optimalizujeme. •Publikujeme, měříme, optimalizujeme. • Web prakticky csvukrs Konec prezentace Děkuji za pozornost J •Nakreslit svůj web - na papír - na šířku - každý list jedna stránka. •Nabízíte služby v oblasti e-marketingu. •Stránky: –Domovská stránka - design + hlavní sdělení (claim) - představení služby. –Představení - kdo jste? Co děláte? Proč bych si vás měl “koupit”? –Popis služby - co nabízíte? Jaké konkrétní služby? Kolik stojí? –Blog - Jaké články byste napsali pro podporu prodeje? 5 témat (nadpisů). •Jak byste na web přiváděli zákazníky? Aspoň 3 marketingové kanály. • Úkol na seminář