Jak to pro Vás děláme, aneb Orange web pod pokličkou | OrangeHouse s.r.o - Tvorba webu, Hypos CRM, CMS, PPC kampaní

Jak to pro Vás děláme, aneb Orange web pod pokličkou

cms web RWD   Napsal: Luboš Brát, 1. 7. 2014 19:44

Kladli jste si někdy otázku, jak vlastně vzniká webová stránka? Jistě, co je na tom - stačí přeci jen pěkný obrázek, logo firmy a odkazy na podstránky, trocha HTML a je hotovo… Zdánlivě je to velmi jednoduché. Proto také tvorbu webových stránek nabízí každý druhý student. Pojďte se ale podívat do kuchyně profesionálů.

podhradem.jpg

1) Úvodní analýza potřeb zákazníka

První krok ve tvorbě webu je analýza potřeb zákazníka. Formou připraveného dotazníku zjišťujeme odpovědi na otázky, jako jsou

  • Čeho chce zákazník novými webovými stránkami dosáhnout?
  • Do jaké míry plní tyto cíle stávající stránky (pokud existují)?
  • Kdo je cílová skupina?
  • Co zákazník očekává, že web udělá za něj?
  • Jaké produkty zákazník prodává?
  • Jak často uvádí na trh nové produkty / novinky?
  • V čem je lepší oproti konkurenci?
  • Kolik času měsíčně může věnovat svým webovým stránkám?

Na základě odpovědí na tyto a podobné otázky vytvoříme úvodní analýzu, která popisuje cílení webu a způsob, jak ho dosáhnout. Je navrženo procentuální vyvážení mezi třemi základními funkcemi webu:

  • Poskytnutí informace
  • Prodej produktu
  • Emotivní působení na návštěvníka

diagram.jpg

2) Drátěný model webu

Na základě úvodní analýzy vytvoří náš UX designer návrh funkcionality a rozložení webu – prozatím bez grafiky. Takzvaný drátěný model (Wire frame). Jde o klikatelný prototyp webových stránek, kde je navrženo rozložení úvodní stránky, podstránky, funkce menu a podobně.

Tento drátěný model je prodiskutován a odsouhlasen se zákazníkem. Případné úpravy modelu jsou rychlé. Je zde možné flexibilně reagovat na připomínky zákazníka a sladit náš návrh s jeho potřebami.

wireframe.jpg

Součástí drátěného modelu je i návrh odkazové struktury, menu. Rozložení konkrétních odkazů je navrženo tak, aby respektovalo zvyklosti uživatelů internetu (User eXperience).

Pokud je webová stránka tvořena jako responsivní, je drátěný model vytvořen pro mobil, tablet i desktop. Rozložení prvků a jejich priorita na stránkách se liší podle použitého zařízení. Na mobilní verzi jsou podstatnější rychlé informace (kontakt, přehled služeb či produktů), na desktopové verzi web musí přinášet komplexní informační servis a přitom zůstat přehledný. Rovněž ovládací prvky se liší – na tabletu a mobilu musí být uzpůsobeny pro dotyk a malou šířku displeje.

3) Grafický návrh webu

Jakmile je doladěn drátěný model stránek, přichází na řadu grafika. Designér vezme v potaz úvodní analýzu a drátěný model webu a navrhne atraktivní vzhled webových stránek. Jde o klíčovou fázi projektu. Webové stránky musí působit na cílovou skupinu požadovaným dojmem. Zároveň musí svým vzhledem podporovat co nejvyšší konverzi návštěvník – zákazník.

rwd_pekarnynachod.png

U responsivních webů je vytvořena grafika zvlášť pro mobil, tablet i desktop. Po odsouhlasení grafiky zákazníkem můžeme pokročit k dalšímu kroku.

4) Analýza funkčnosti CMS

Analytik Orange house zpracuje analýzu funkčnosti webových stránek. Jde o dokument popisující funkci všech ovládacích a grafických prvků webu a jejich provázání s redakčním systémem Orange CMS.

Podle této analýzy je následně grafika oživena. Jsou vytvořeny webové stránky a naprogramován redakční systém.

5) Kódování grafiky

Tento krok často probíhá paralelně s předchozím. Náš kodér vezme grafiku, návrh titulní stránky, podstránky a dalších specifických stránek a vdechne jim život. Ze statického obrázku se stane reagující interaktivní webová stránka. Zatím bez možnosti obsah stránky editovat. Zpracovávají se Java skripty a buduje se celé UI webu.

6) Nasazení CMS

ASP.NET vývojář obdrží od analytika analýzu funkčnosti a od kodéra nakódovanou grafiku. Tu „nasadí“ na redakční systém Orange CMS (Content Management Systém). Vytvoří se databáze, tabulky, datové typy, typy dokumentů, Razor šablony, oživí se formuláře. V redakčním systému se vytvoří stromová struktura webu, ze které se generuje automaticky interaktivní menu.

orangeCMS.jpg

Nainstalují se potřebné pluginy (práce s obrázky, RSS kanál, cache, …). Web je spuštěn na dočasné adrese – na betě (beta.domena.cz).

7) Iniciační plnění a testování

Vývojář, případně IT manažer naplní stránky obsahem dodaným zákazníkem. Často jde o texty přejaté z jeho starých www stránek či z různých letáků. Při plnění obsahem se zároveň testuje funkčnost všech prvků ve všech internetových prohlížečích (počínaje Internet Explorerem 8, Google Chrome, Opera, Firefox) a na všech dostupných zařízeních ve firmě. Připomínky se ukládají do firemního systému Hypos CRM k projektu. Vývojáři je postupně opravují a ladí.

8) Zaškolení v CMS a finální naplnění obsahem

V této fázi je web představen zákazníkovi jako téměř dokončený a plně funkční. Zákazník je v sídle Orange house proškolen v práci s redakčním systémem. Jde o intuitivní systém s ovládáním a plněním podobným s MS Wordem. Školení většinou netrvá déle než 2 hodiny.

Nyní již zákazník umí pracovat s webem, jsou mu předány přístupy do Orange CMS, návod. Web je doplněn finálními texty, obrázky, dokumenty, materiály, produkty a podobně. Jsou odladěny poslední detaily, na které zákazník narazí při práci se stránkami.

9) Google Analytics

Do webu vložíme Google Analytics – statistický nástroj na sledování návštěvnosti, údajů o stránkách odkud návštěvníci přišli, jaké použili prohlížeče, zda to byl mobilní telefon, tablet či notebook a podobně.

google1.png

10) Analýza klíčových slov a SEO

Pokud si zákazník objedná i analýzu klíčových slov, připravím náš specialista návrh klíčových slov a sousloví (obvykle jich bývá stovky), pro které se má webová stránka zobrazovat ve vyhledávačích. V analytických nástrojích vyhledávačů (Google a Seznam) je následně k jednotlivým klíčovým slovům doplněna hledanost. Zjistíme tedy, která klíčová slova jsou nejvíce hledaná a která méně.

Obsah, nadpisy, URL stránek a texty jsou následně upraveny tak, aby primárně obsahovaly ty nejvíce hledané výrazy.

11) Zachování starých odkazů na stránky

Pro staré stránky zjistíme z Google Analytics hlavní přístupové adresy, stránky, na které jsou mířeny odkazy z jiných webů či vyhledávačů. Tyto adresy musí zůstat zachovány i s přechodem na jiný web. Důvody jsou pro to dva: přenos Page ranku staré stránky na novou a tím i výše pozice ve vyhledávačích a zachování fungujících odkazů.

pagerank.png

Pokud tedy někdo po spuštění nových stránek přistoupí na adresu funkční na starém webu (např. /index.php?id=56123), je přesměrován na odpovídající stránku nového webu (např. /produkty/novinky/).

12) Finální spuštění na doméně zákazníka

Jakmile je web kompletně připraven, upravíme nastavení DNS a serveru a web spustíme na ostré adrese (např. www.xantipa.eu). Díky tomuto postupu jsou stránky zveřejněny v jednom okamžiku a již plně funkční.

13) Audit nových webových stránek

Po spuštění stránek se na ně asi za měsíc podívají odborníci z Orange house, zkontrolují způsob používání redakčního systému, funkčnost webu a návštěvnost. A zašlou případné upozornění zákazníkovi s radou, jak práci s webem zvládat lépe (pokud je to třeba).

 

Všechny články

comments powered by Disqus