Kvalitní web

Prvořadým kriteriem kvality firemní prezentace je to, zda přináší nové obchodní příležitosti. Tento předpoklad splňují pouze firemní prezentace nejvyšší kvality, jako jsou prezentace publikované systémem WebPerfect.

Recept na úspěšnou firemní prezentaci

Recept na úspěšnou firemní prezentaci, tedy takovou, která prodává, je relativně jednoduchý. Aby firemní prezentace prodávala, musí být schopná prolomit bariéry v mysli kupujícího a musí být schopna přitáhnout potenciální návštěvníky.

Za tímto jednoduchým receptem se, ale skrývá řadu předpokladů. Stručně a zjednodušeně řečeno. Aby Váš web navštěvovali potenciální zákazníci, musí být dobře dohledatelný ve vyhledávačích (SEO) - proto musí splňovat kriteria, která mají na pozici ve vyhledávačích vliv. Aby návštěvník, který přišel z vyhledávače, zase rychle neodešel, musí web být hezký. Aby web byl schopen prezentovat informace všem 100% uživatelů, kteří na něj přijdou, musí být přístupný (= aby se informace korektně zobrazily na různých zařízeních a to i na zařízeních pro zdravotně či technicky hendykepované uživatele). Aby zákazník z webu brzo neutekl, musí být web použitelný (= musí být intuitivní, zákazník musí vědět kam má klinout ap). Ze stejného důvodu se musejí stránky rychle zobrazovat.

Doposud jsme hovořili pouze o předpokladech, které zajistí, že na web budou chodit potenciální zákazníci a že se seznámí s Vaší nabídkou. Nyní je ještě třeba překonat bariéry v myslích zákazníků. V anonymním prostředí internetu je tou nejzákladnější překonat nedůvěru. Je třeba si uvědomit, že potenciální zákazník často nemá žádné další informace k pozouzení Vaší důvěryhodnosti, než web, na který právě kouká. V této souvislosti není bez zajímavosti informace, že

Asi 50% uživatelů internetu posuzuje serioznost firmy na internetu podle vzhledu jejich webových stránek. 

Bohužel velká část z dříve uvedených předpokladů může být negativně ovlivněna implementací grafického vzhledu. Někdy je těžké dosáhnout zároveň hezkého vzhledu a zároveň splnění ostatních předpokladů. Tímto uměmím disponují jen ti nejlepší z nejlepších, mezi něž se se svojí mnohaletou praxí (od roku 1996) řadíme i my.

V dalších odstavcích uvádíme stručný přehled prací, které souvisejí s tvorbou a implementací grafiky do webu, tak aby byla zachovaná vysoká kvalita webu. Za většinou z níže uvedených vět se skrývá několik hodin práce zkušeného webmastera.

Vstupní rozvaha.

Co zadavetel od webu očekává: nové obchodní příležitosti, posílení značky, prestiž, jen aby byly?

Má firma design manuál nebo alespoň firemní barvy? Vytvářela v minulosti letáky, katalogy nebo jiné materiály ve stylu, kterému se budeme chtít přiblížit?

Pro koho jsou stránky určeny? Web se musí líbit hlavně cílové skupině, ne majiteli firmy. Muži a ženy vnímají vzhled a barvy odlišně. A úplně jinak bude vypadat web pro děti.

Návrh vzhledu

Grafik zhotoví grafický návrh dle zadání.

Náš odborný konzultant shlédne grafický návrh a provede test přístupnosti při nejběžnějších poruchách barvocitu. Nevyhovuje-li návrh některým požadavkům na kvalitní web, nechá jej přepracovat. Tento krok se opakuje do doby než je návrh kvalitní.

Takto připravený grafický návrh zákazník buďto schválí nebo dodá připomínky, na základě nichž se návrh upraví. Opakuje se do úplné spokojenosti se vzhledem.

Grafik rozřeže grafiku. Vyžaduje to zkušenosti a znalosti. Nejedná se o pouhé rozřezání na obdelníčky. Některé plochy na webu jsou ve skutečnosti realizovány opakováním proužku o šířce 1px. Jako například pozadí našich www stránek, bleděmodrý stín pod záhlavím, či vertikálně prostřední část stínu na boku stránky. Záložky se naproti tomu často skládají ze tří a více obrázků, levého a pravého kousku a jednopixelového proužku, jehož opakováním vzniká prostředek záložky.

Zapracování grafiky do webu

Koder takto připravenou grafiku nastyluje. Zařídí, aby se jednopixelové proužky opakovaly a prvky, které se skládají z několika obrázků se poskládaly tak jak mají. Nadefinuje barvy textů a pozadí pro různé části aplikace, které jsou v příslušné verzi dostupné. Například navigaci pro procházení fotogalerií, barvy javaskriptového prohlížeče obrázků (LightBoxu), ankety, nadpisy, odkazy, odkazy při přejetí myši, vzhled seznamu (odrážek), vzhled tabulek, upoutávek, oddělovačů, poznámek a mnohé jiné.

Koder provede implementaci nastylované grafiky do redakčního systému. Obnáší to nejen vědět kam co vložit, co kam nahrát, ale také všechno vyzkoušet, protože XHTML šablona je vždy aspoň trochu jiná a je třeba provádět zásahy do Smarty šablony.

Při této příležitosti je vhodné říci, že webová aplikace se skládá z několika vrstev. Nejnižší vrsvou je programový kód v PHP a MySQL. Tento kód spolupracuje s další vrstvou, kterou jsou Smarty šablony. Ty se používají k formátování výstupu aplikace a tudíž vlastně k definici třetí vrstvy, kterou je XHTML šablona. Nejvyšší vrstvou je samotný vzhled, který je realizován tzv. tabulkou stylů (CSS). Při implementaci grafiky se pracuje s horními třemi vrstvami.

Koder nastyluje tzv. tiskový stylopis (stylopis = tabulka stylů = CSS). Tiskový stylopis se realizuje při tisku www stránky. Je vhodné v něm zrušit zobrazování prvků, které je zbytečné tisknout.

Koder provede tzv. validaci HTML. Obnáší to opakované spouštění validátoru a odstraňování chyb, dokud není stránka tzv. validní dle striktní specifikace.

Koder provede tzv. validaci CSS. Obnáší to opakované spouštění validátoru a odstraňování chyb, dokud není stránka tzv. validní dle striktní specifikace.

Plnění webu

Pokud provádíme plnění webu, je v této části realizace projektu naplněn. V opačném případě, je-li to možné provede v této fázi naplnění alespoň několika stránek zákazník. Není-li zbytí, je okamžitě přistoupeno k další fázi, kterou je však vhodnější provádět na alespoň částečně naplněném webu. V ideálním případě na zcela naplněném.

Výstupní kontrola

Výstupní kontrolu provádí specialista.

Test vzhledu a funkčnosti v asi 8 prohlížečích. V prohlížečích, které mají více než 1%-ní podíl plus některé vybrané s menším podílem. V této fázi je manuálně kontrolován vzhled a funkčnost napříč webem v několika prohlížečích a je-li u některého prohlížeče s podílem nad jedno procento vzhled narušen, je provedena úprava za účelem nápravy - je tolerován různý vzhled písma. U vybraných prohlížečů ze skupiny  s podílem pod 1 procento jsou tolerovány mírné nedostatky vzhledu, cílem zde je zajištění toho, aby stránky šly používat a vypadaly obstojně. Zde jsou vždy nutné na know how náročné úpravy.

Test vzhledu v asi 60 nevýznamných prohlížečích. Zde je kladen důraz na to aby všechny části webu byly viditelné. Je prováděna pouze vizuální kontrola titulní strany.

Test validity, případně oprava CSS. Zde je prověřována i řada doporučení, kterou validátor doporučí. Typicky se jedná například o případy, kdy prvek nemá definovanou barvu pozadí a je nutné manuálně zkontrolovat zda text v něm obsažený, je vždy čitelný.

Test validity XHTML na několika stránkách webu. Typicky Home Page, první úroveň menu, druhá úroveň menu. Obsahuje-li web prvky nebo části, kde je dle posouzení kontrolora riziko nevalidity, je otestována i tato část. Jsou-li zjištěny nedostatky, což se vzhledem k předchozím úpravám z důvodu meziprohlížečové kompatibility stává, jsou odstraněny.

Je otestován vzhled tištěné stránky.

Následuje řada testů za účelem zjištění přístupnosti hendykopvanými uživateli.

Kontrola při nejběžnějších poruchách barvocitu.

Test vzdálenosti jasu pozadí a textu obsahové části a menu. Je-li zjištěn nedostatek, je opraven. Znamená to mírnou změnu barvy textu nebo pozadí.

Test barevného kontrastu pozadí a textu obsahové části a menu. Je-li zjištěn nedostatek, je opraven. Znamená to mírnou změnu barvy textu nebo pozadí.

Test přístupnosti dle WCGA (WAI). Automatizovaný nástroj provede analýzu stránek a oznámí nedostatky, které je třeba opravit. Oznámí prvky, které je třeba zkontrolovat manuálně. Zjištěné nedostatky jsou odstraněny.

Test přístupnosti dle Section 508. Automatizovaný nástroj provede analýzu stránek a oznámí nedostatky, které je třeba opravit. Oznámí prvky, které je třeba zkontrolovat manuálně. Zjištěné nedostatky jsou odstraněny.

Test přístupnosti WAVE. WAVE je vizuální nástroj pro testování přístupnosti, který dokáže graficky znázornit problematické prvky. Zjištěné nedostatky jsou odstraněny.

Za pomocí simulátoru odečítacího zařízení je zkontrolována přístupnost při jejím použití. Zjištěné nedostatky jsou odsraněny.

Dále je otestováno a případně opraveno chování stránek v níže uvedených případech:

  • S vypnutým CSS
  • bez zobrazování obrázků
  • s vypnutým Javascriptem a Flashem
  • při 8bitové grafice

Je provedena simulace vzhledu na mobilních zařízeních a provenedny potřebné úpravy - cílem u firemních stránek je, aby byly stránky v plném rozsahu použitelné. Kvalita vzhledu v tomto případě již není tak důležitá.

Použitelnost

V dalším kroku je posouzena použitelnost zkušeným webmasterem.

  • Je hlavní menu na očekávetelném místě?
  • Je vedlejší menu na očekávetelném místě?
  • Je pomocné menu na očekávetelném místě a má očekávatelný obsah?
  • Je mapa webu?
  • Je množství sekcí webu maximálně 7 až 9?
  • Je informační architektura navržena správně?
  • Je logo, případně záhlaví prokliknutelné na titulní stranu?
  • Je menu přehledné?
  • Jsou texty správně strukturované?
  • Celkové posouzení použitelnosti.

SEO miniaudit

Je proveden SEO miniaudit.

  • Je-li přítomen robots.txt, neobsahuje zákaz procházení obsahu roboty?
  • Je-li přítomen meta tag robots, neobsahuje zákaz procházení obsahu roboty?
  • Jsou smysluplně definované titulky na všech stránkách?
  • Jsou smysluplně definované nadpisy na všech stránkách?
  • Jsou adresy SEO friendly?
  • Je mapa webu?
  • Je obsah webu přístupný vyhledávacímu robotovi?
  • Jaký je Srank a PageRank?
  • Je přesměrování verze bez www na verzi s www nebo naopak?

Další kontroly

Je zkontrolována funkčnost v několika oblastech:

Jaký je počet odkazů vedoucích na stránku?

Ověření funkčnosti kontaktního formuláře

Jaký je procentuální podíl obsahu a kódu?

Rychlost načítání a zobrazování stránek

Optimalizace grafiky s cílem zajištění minimální datové velikosti.

Test rychlosti a analýza prvků, které je možné zlepšit za účelem zrychlení. Případné úpravy.

Na závěr je opět zkontrolována validita XHTML, protože v důsledku úprav se mohla poškodit.

Implementace stylopisu do WYSIWYG editoru v administraci.

 

Kontakt

weto.cz webdesign

Netušilova 7
796 01 Prostějov

tel.: 604 574 527
email: info@weto.cz

Web jako je tento

Chtěli byste web jako je tento?

Můžete ho mít!
Jen za 4 900 Kč

Jedná se o variantu Standard, se šablonovou grafikou. Web je plně validní, použitelný, přístupný a responzivní.