Tvorba nového webu pro Pískovnu Pohořelice

Přípravná fáze, struktura a grafika nového webu

V prvních krocích je důležité dostat se s klientem na stejnou vlnu. Proto jsme nechali majitele Pískovny Pohořelice vyplnit pár jednoduchých dotazníků, na základě kterých pak v prvních fázích vycházíme. Ptali jsme se třeba na:

• co se jim na stávajícím webu nelíbí;
• weby, které se jim líbí a ze kterých by rádi brali inspiraci;
• co pro ně je a není důležité (z pohledu webu, požadavků, publikovaných informací, barev, designu apod.);
• cíle, kterých chtějí s novým webem dosáhnout;
• konkurenční výhody;
• jakým způsobem chtějí být kontaktováni.

Jakmile jsme zjistili všechny tyto potřebné náležitosti, pustili jsme se do prvních náčrtů. Podrobně jsme rozepsali požadavky klienta, cílovou skupinu nebo jaké produkty a služby prodávají. Dále jsme si rozvrhli strukturu webu (wireframe), navigační menu a až 7 typologických stránek (např. homepage, výpis, produkt nebo kontakty) i s předpokládaným obsahem a rozmístěním jednotlivých prvků. Na základě takto sepsané specifikace jsme vytvořili komplexní zadání pro grafika.

Grafik následně zpracoval grafický návrh na míru pro homepage, podle které se pak určuje ráz celého webu. Jakmile ho jednatelé společnosti Pískovna Pohořelice odsouhlasili bez výhrad, grafik doplnil i ostatní typové stránky, čímž jsme ukončili jednu z částí tvorby nového webu. V grafickém návrhu jsme kombinovali barvy z logo manuálu s akcentem na písečnou žluto-hnědo-zlatou. Kladli jsme důraz především na moderní a čistý vzhled, přehledné a funkční uživatelské rozhraní a co největší jednoduchost při poptání materiálů a služeb.

Nakódování grafiky, programování modulů

V další fázi se předávají dostupné materiály a podklady kodérovi, který grafiku nastuduje, zpracuje a nařeže tak, aby se dala aplikovat na nyní již reálně vznikající webové stránky. Nejprve jsme proto implementovali náš redakční systém Comerto. V rámci něho jsme pak nakódovali postupně všechny stránky. Dáváme při tom pozor nejen na validitu, ale také na čistotu kódu.

Graficky připravené webovky v tento moment trochu připomínají šablonu, do které je ještě potřeba vložit klíčové informace. K tomu nám mnohdy slouží moduly na míru, které naplníme obsahem od klienta. Pro Pískovnu Pohořelice jsme jich naprogramovali rovnou několik, např. pro výpisy a detaily produktů či poboček. Díky modulům se třeba produktový katalog může na pár kliknutí zobrazovat na vícero stránkách.

Dokončení detailů

Celý web se poté musí ještě několikrát překontrolovat z pohledu uživatelů, kodérů či SEO specialistů:

1. Vyzkoušeli jsme funkčnost webu, celý si ho znovu a znovu proklikali a zjistili, co funguje a co nefunguje a tyto nedostatky z hlediska UX a UI doladili. Typicky jsou to prvky, které se jeví jako tlačítka, ale nic nedělají, nebo seřazení informací podle důležitosti.
2. Kodér se podíval na techničtější aspekty, jako je validita kódu, minifikace obrázků, zajištění responzivity na různých zařízeních a prohlížečích a nastavení redirectů a errorů 404.
3. Z pohledu SEO jsme zajistili, aby byly webové stránky indexovatelné roboty webových vyhledávačů a abychom nenechali žádné aktivní tzv. broken linky (odkazy vedoucí na 404). Aktivovali a implementovali jsme analytické nástroje (Google Analytics, Google Search Console, Seznam Webmaster Tools) a nastavili v nich odpovídající cíle.

Klientovi jsme tak na závěr předali kompletně nový web se vším všudy a v novém hávu. Podařilo se nám sloučit obsah dvou webů do jednoho. Akcentovali jsme zaměření na stavebniny. Zároveň vypadají webovky moderně a čistě. Uživatelům umožňují na pár kliků poptat libovolný materiál v jakémkoliv množství, porovnat cenu v Pohořelicích a Hustopečích a případně si požádat o další doplňující služby. A v dnešní době standardem už je dobrá optimalizace k procházení na počítači i telefonu.