Grafický návrh byl dodán jako PDF soubor, byl ale poměrně neúplný. Zcela chyběla verze pro mobilní zařízení a v katalogu nebyl navržen detail výrobku.
Homepage byla navržena jako dvě řady po pěti kartách. Pro užší obrazovky jsem to vyřešila tak, že se karty mohou trochu smrštit a když už by byly moc úzké přeskočí poslední karta na daném řádku na začátek řádku dalšího. Tento efekt by nebylo možné dosáhnout použitím klasického Bootstrapu. CSS Grid to však řeší velmi elegantně. Když karta přeskočí, tak se zase všechny karty trochu roztáhnou, aby využily celého prostoru. Ve finále na velmi úzkých displejích mobilů zůstane jen jedna karta na řádku.
Dále jsem musela řešit mobilní menu a vlastně celou hlavičku pro mobilní zařízení včetně přepínání jazyků a vyhledávání. Menu bylo tříúrovňové, takže navíc ještě otevírání a zavírání podmenu a změny ikon a podbarvení položek.
Také patu bylo potřeba přizpůsobit pro mobilní zařízení. Původní řadu jedenácti log významných zákazníků jsem opět pomocí CSS Grid postupně rozhodila do dvou a do tří řad. U všech dodaných log jsem provedla optimalizaci jejich velikosti tak, aby při co nejmenších datech ukazovaly vysokou kvalitu. Snažila jsem se buď najít již existující svg verzi a nebo jsem si ji sama vyrobila. Loga mají nakonec jen několik kilobytů ale i na retina obrazovkách budou vypadat skvěle.
Klient si přál, aby se obě řady karet zobrazovaly celé včetně aktualit a formuláře i v případě, že někdo používá laptop s obrazovkou 1366x768px a má nazoomovaný browser na 125%. Naštěstí místo pixelů používám relativní jednotky, takže se to dalo vyřešit jednoduše ve stylech. Jak vertikální responzivita funguje můžete mimo jiné vidět na následujícím videu.
Díky WordPressu je zákazník schopen sám editovat obsah statických stránek a případně je i přidávat nebo odebírat. V administraci WordPressu má dále možnost přidávat, odebírat či upravovat aktuality a také pracovat s katalogem výrobků, jemuž věnuji celý samostatný příspěvek, který je momentálně v přípravě.
Aby zákazník věděl, jak pracovat s WP editorem Gutenberg, čeho se vyvarovat, jak vložit obrázky apod, připravila jsem pro něj a jeho tým videotutoriály včetně ukázky, jak nastavit základní meta tagy pro SEO.
Pro vyhledávání ve výrobcích a napříč celým webem bylo potřeba připravit šablonu pro výpis výsledků vyhledávání a její variantu pro případ, že se žádné výsledky nenajdou. Šablona musela být samozřejmě responzivní, stejně jako takzvaná 404 šablona, která se zobrazí, když se do adresní řádky zadá odkaz na neexistující stránku.
Jak to probíhalo můžete vidět na doprovodném videu a celkový výsledek můžete posoudit na www.ups.cz.
Snad bych ještě dodala, že vývoj webu probíhal na mém vývojovém serveru včetně plnění dat zákazníkem. Teprve když bylo vše kompletně hotovo se stanovil termín pro migraci. Při ní se nejprve odstavil původní web, provedl se upgrade na poslední verzi PHP, nainstalovala se a nastavila nejnovější verze WordPressu, provedl se přesun čerstvě vyrobené šablony a naplněné databáze. To vše včetně testování se podařilo zvládnout během jednoho dopoledne.