V Justmighty pracuju sedmým měsícem. Bylo už na čase, abych o svých zkušenostech z web developmentu napsal článek. Vysvětlím vám, co z mého pohledu developera obnáší jednotlivé části webových projektů. Chci, abyste pochopili, co je na developmentu nejvíc náročné a “proč to tak trvá”.
Komunikace mezi developerem a designerem
Pro úspěšnost projektu je podstatné, aby si developer a designer všechny potřebné informace správně předali a případné nesrovnalosti vychytali hned u zrodu. Díky tomu se celý vývoj výrazně zrychlí, zefektivní a v průběhu se pak nemusí vše několikrát měnit a upravovat. Z mého pohledu je tento krok naprosto klíčový. V porovnání s mými zkušenostmi z předchozího zaměstnání, kde jsme webdesign zadávali externím grafikům, trvala komunikace mnohem déle. Nebylo to úplně ideální. Proto si v Justmighty cením toho, že jsme s grafickými designery v každodenním kontaktu a že na projektech úzce spolupracujeme.
“I am not a robot. Nikdo není neomylný, ale společně to vychytáme.”
Každý z nás se občas splete, nejsme roboti. Ani já, ani designer. Ale když spolu sedíme v jednom kanclu a o všem se bavíme, dokážeme případný problém řešit v řádech minut, nikoliv hodin, jak tomu bývá při spolupráci s externími grafiky či grafickými společnostmi.
Náročnost: 2/5
Příprava webových komponent
Pro developera je důležité, aby si pro urychlení následného vývoje předpřipravil základní stavební kameny projektu. Jsou jimi dílčí komponenty webu.
Jaké z nich jsou nejdůležitější?
- Písma a jejich řezy (napojení na projekt a definování řezů)
- Velikosti textů (nadpisy, odstavce, hlavička a patička)
- Barvy (text, odkazy, hlavička a patička)
- Tlačítka (tvary, varianty a nájezdy na tlačítka)
- Formuláře
- Šířka stránky nebo jejích částí
- Ikony (ikony sociálních sítí a další infografika)
- Obrázky
- Pozadí
- Scripty a funkce
Náročnost: 3/5
A jsme u toho! Řada je na vývoji.
Teprve teď začíná samotný vývoj webu. Přípravu komponent může developer přeskočit a použít některý z předem připravených frameworků jako je například Bootstrap, Uikit nebo PureCSS. Pro mě je rychlejší si komponenty připravit sám. V Justmighty frameworky nepoužíváme. Bez nich je kód kratší a přehlednější, což se promítne i na rychlosti načítání webu.
Co je v tuto chvíli potřeba?
- Příprava jednotlivých stránek
- Aplikace komponent a stylování
- Napojení na redakční systém (např. WordPress)
- Testování funkčnosti a zobrazení na dotykových zařízeních
- Testování projektu v dostupných webových prohlížečích
- Testování formulářů a objednávek
- SEO a strukturovaná data
Náročnost: 5/5
5 nejvíce náročných částí jsem pro vás krátce popsal.
Zaklínadlo jménem responzivita
V dnešní době je již nemyslitelné, aby projekt nebyl připravený na zobrazení v mobilních zařízeních v menším rozlišení než jsou obrazovky notebooků a stolních počítačů. Weby by dnes měly být tzv. mobile first. To znamená, že developer nejdřív vytváří mobilní verzi a až pak tu desktopovou. Nikoliv naopak. Proto je na začátku projektu velmi důležité veškeré komponenty, šířky sekcí nebo rozsah textů definovat. Pak desktopové verze nemusí trvat celou věčnost.
Náročnost: 4/5
Jazykové mutace
Občas se setkáváme s více jazyčným projektem. Tím náročnost projektu výrazně stoupá. Záleží na velikosti projektu a počtu stránek včetně komponent. Každé pole, každý formulář, každé tlačítko nebo textový blok se musí upravit a připravit tak, aby si klient mohl jednoduše měnit texty na webu podle toho, v jakém jazyce je chce mít. Samotná náročnost stoupá podle počtu jazyků.
Náročnost 4/5
Formuláře
Formuláře jsou v dnešní době nepostradatelnou součástí každého webového projektu a nezáleží na jeho velikosti. Ať už jde o kontaktní, poptávkový nebo objednávkový formulář, jejich příprava a nastavení zabere také nějaký čas. Musí se připravit komponenty, nastavit validace polí pro případ, kdyby někdo do pole e-mail zadával telefonní číslo. Dále se řeší ochrana proti botům a robotům (spamy) a v neposlední řadě se připravují notifikace, které budou chodit jak majiteli projektu, tak jeho zákazníkovi či návštěvníkovi webových stránek či e-commerce projektu.
Náročnost: 4/5
Strukturovaná data
Strukturovaná data se provádí pomocí Schema.org a pomahají nejen prohlížečům porozumět tomu, co je obsahem stránek. Schémat je opravdu hodně. Běžně se používají pro definici blogových článků, nadcházejících událostí, ale také pro definici hlavní i drobečkové navigace stránek nebo v případě e-commerce projektu definici produktů, receptů a recenzí. Určitě jste na strukturovaná data v běžném životě narazili i vy. Například na Googlu jste si hledali určitý produkt a zobrazil se vám slider s produkty, ne pouze odkaz na web, na kterém se toto klíčové slovo nachází. Využití je celá řada – záleží na projektu.
Náročnost: 3/5
Minifikace a optimalizace
Stalo se vám někdy, že jste přišli na webovou stránku a její načítání bylo pomalé? Nejvíce je to poznat při použití pomalejšího internetového připojení (např. prohlížení přes mobilní data). Scripty, styly a obrázky je potřeba minifikovat a optimalizovat tak, abychom minimalizovali čas načítání projektu co nejvíc to jde. U obrázků je potřeba dodržet optimalizaci tak, aby se snížila velikost obrázku, ale kvalita zůstala stejná nebo okem nepostřehnutelná.
Náročnost: 2/5
Testování a předání práce klientovi
Další fází je testování projektu napříč různými prohlížeči – Google Chrome, Mozilla Firefox, Safari, Microsoft Edge nebo třeba Opera. Cílem je, aby byl vzhled projektu na každém z nich stejný. U starších prohlížečů to byl a bude problém vždy. Proto jděte tak jako my vývojáři s dobou a používejte nejnovější verze prohlížečů. To, co fungovalo před deseti lety, nemusí nutně fungovat dnes. Dále se otestují formuláře nebo objednávky v případě e-commerce projektu.
Náročnost: 2/5
Spuštění projektu
Pokud je vše připravené, otestované, ošetřené a doladěné, je čas projekt spustit. Samotné spuštění projektu trvá obvykle den, v případě většího projektu či e-commerce i několik dní. Opět je nutné vše otestovat – od procházení všech stránek až po testování formulářů nebo objednávek.
Náročnost: 3/5
Na závěr
Každý projekt je jinak časově náročný, ale v základních krocích se mezi sebou v zásadě neliší. Je potřeba si práci správně rozvrhnout a tím se vyhnout nechtěným dodatečným úpravám. Díky tomu na projektu nestrávíme více času, než jsme se na začátku s klientem domluvili. Spokojený klient = spokojený developer a designer. Platí to i naopak. 🙂
