Jiní kodéři si na něj netroufli, my jsme jej sestavili jako knihovnu react komponent
400 wireframů a designů zadání od klienta
800 hodin vývoje během 5 mesíců agilní spolupráce
145 unikátních UI komponent s dokumentací
127 šablon ve Storybooku
Služba Bezrealitky od roku 2009 propojuje zájemce o nemovitosti s jejich majiteli a pomáhá řešit záležitosti kolem bydlení – komunikaci, inzerci i právní služby. To vše on-line. Po sedmi letech od posledního redesignu jsme se znova potkali, abychom web posunuli zase o kus dál. Chopili jsme se více než 400 připravených wireframů a poskládali z nich knihovnu komponent pro nový web, který je moderní, intuitivní a stojí na aktuálních technologiích.
Sladění představ
a postup práce
Se službou Bezrealitky jsme se seznámili už v roce 2014, kdy jsme jim pomohli s prvním redesignem webu.
Když byl na stole další redesign, měli v počátcích obavu, že je projekt až moc rozsáhlý a budou těžko hledat dodavatele. Proto jich oslovili více.
„Ačkoliv se to zvenčí nemusí zdát, náš web je hodně komplexní, obsahuje např. uživatelské profily, inzeráty, vyhledávání nemovitostí, mapy, generátor smluv, hlídací psy, elektronickou peněženku a mnoho dalších funkcionalit… Spoustu firem komplexita a provázanost našeho webu odradila, ale SUPERKODERS jako jediní hned řekli, že do toho s námi jdou. Navíc jsme s nimi měli pozitivní zkušenost z minulého redesignu, takže byli jasná volba.”
Daniela Veselá, projektová manažerka Bezrealitky
Na základě podkladů jsme připravovali systém UI komponent v Reactu. Programátoři z Bezrealitky chtěli využít knihovnu React-Bootstrap, protože má dobrou komunitní podporu a je rozšiřitelná o základní interaktivní komponenty. Díky tomu byla i výsledná implementace UI snadnější a rychlejší.
Všechny komponenty jsme vyvíjeli izolovaně a atomicky. Jejich samotnou prezentaci jsme vyřešili pomocí interaktivního rozhraní Storybook. To nám umožnilo jednotlivé stavy dobře otestovat a zdokumentovat možnosti každého prvku.
„S vytvářením design systémů a spoluprací na velkých projektech máme bohaté zkušenosti. Použitelnost, přístupnost a rychlost načítaní jsou pro nás vždy prioritou, proto rádi vše stavíme na zelené louce. Kód máme pak více pod kontrolou a dokážeme zajistit stoprocentní výsledek. Zadání od klienta má ale přednost, takže požadované použití knihovny React-Bootstrap pro nás nebyl žádný problém.”
Petr Bulánek, hlavní vývojář SUPERKODERS
Komponenty jsme podle designů nebo wireframů sestavili do finálních šablon. V Bezrealitky si tak mohli výsledek naší práce prohlédnout ještě předtím, než šel k 1:1 nasazení, o které se postarala firma iD-SIGN. Pro zajištění maximální kvality jsme si nasimulovali produkční prostředí a provedli statický build všech šablon do HTML. Na nich jsme testovali rychlost a přístupnost frontendu.
„Při spolupráci se SUPERKODERS vím, že komunikuji s lidmi, kteří rozumí uživatelům i technologiím. Tím je mnohem snazší najít vhodné řešení. Vážím si bezproblémové a rychlé komunikace při vlastním vývoji i při sdílení postřehů.”
Jan Novák, hlavní vývojář iD-SIGN
Kompletní knihovna komponent
a stovky stránek
Zhruba první dva měsíce jsme se věnovali kódování jednotlivých komponent. Z těch se potom skládaly stránky. Systém komponent je nachystaný tak univerzálně, že se z nich může kdykoliv v budoucnu jednoduše sestavit nové stránky.
Celá spolupráce probíhala agilně – zadání se postupně rozšiřovalo a zpřesňovalo dle potřeby klienta. Za běhu se přidávaly i prvky a celé stránky, se kterými se původně nepočítalo (např. štítky, přihlášení k odběru newsletteru, stránka na pomoc Ukrajině apod.) Pro některé stránky nebyla navržená ani grafika, ale díky dobře připravenému design systému jsme je zvládli nakódovat i bez návrhu.
Weby kódujeme tak,
aby se líbily
prohlížečům i lidem
Knihovna React-Bootstrap je monolitická, všechny styly jsou tedy součástí jednoho souboru. Abychom pro každou stránku stahovali jen to potřebné a zrychlili načítání webu, kód jsme upravili tak, aby obsahoval jen prvky, které opravdu používáme. Výchozí styly některých komponent v sobě zahrnovaly pro nás nepotřebné stavy, takže jsme si místo toho napsali vlastní. Použili jsme technologii CSS modulů, která právě toto řeší. Například při vstupu na domovskou stránku se zbytečně nenačítají data pro stránky pro přihlášené uživatele.
Při kódování je pro nás samozřejmostí testování. Myslíme na všechny typy zařízení i prohlížečů a přístupnost pro handicapované. Dáváme si také záležet na použití webu jen s klávesnicí, aby se dal bez obtíží ovládat bez použití myši.
Hlídali jsme, aby všechny knihovny třetích stran byly použity v aktuální verzi, abychom nevytvářeli technický dluh ještě před spuštěním projektu. V průběhu kódování nastala třeba situace, kdy pro jednu komponentu vyšla nová major verze, která měla dost změn oproti původní použité. Mohli jsme ji nechat tak a říct, že komponenta pojede jen na jedné verzi, my jsme se ale rozhodli komponentu celou přepsat, aby fungovala na všech.
Vzniká komunikační platforma pro zájemce o nemovitost
Unikátním prvkem na webu Bezrealitky je kalendář prohlídek přístupný uživatelům po přihlášení. Majitel nemovitosti vytvoří různě dlouhé časové sloty, do kterých se zájemce může přihlásit. Oba pak mohou své domluvené prohlídky jednoduše spravovat. Výzvou bylo zejména vytvořit kalendář plně responzivní a ovladatelný na různě velkých zařízeních.
„Kódování kalendáře prohlídek zahrnovalo hodně vymýšlení a postupných iterací. Z výsledku mám ale radost.”
Petr Bulánek, hlavní vývojář SUPERKODERS
Bezrealitky stále pracuje na zlepšování svých služeb, s čímž budou souviset občasné úpravy na webu. Takže zůstaneme ve spojení a rádi jim pomůžeme v další fázi redesignu.
Co říká klient?
„SUPERKODERS byli skvělým parťákem na takto komplexní projekt. Vzhledem k agilnímu vývoji se zadání často doplňovala, upřesňovala nebo se kvůli technickým možnostem musela úplně změnit. Také se občas stalo, že jsme v zadání něco opomněli. Vůbec jsme třeba nemysleli na funkčnost v prohlížeči Safari. To všechno oni dělali automaticky, stejně jako tagy pro SEO, meta popisky a další optimalizace. Vždy nám předali odladěný výsledek.”
Daniela Veselá, projektová manažerka Bezrealitky
Rádi pomůžeme i vám!
Vyvineme pro vás e‑shop, web či aplikaci, nebo se jen nezávazně potkáme a pobavíme o možnostech spolupráce. V každém případě se nám ozvěte.
Cookies na tomto webu slouží k personalizaci obsahu a reklam, poskytování funkcí sociálních médií a analýze provozu. Kromě toho sdílíme informace o vašem používání webových stránek s našimi partnery v sociálních médiích, reklamě a webové analytice, kteří je mohou kombinovat s dalšími informacemi, které jste jim poskytli nebo které shromáždili z vašeho používání jejich služeb.
Jednotlivé souhlasy
Nezbytné, aby stránky fungovaly
Nezbytné soubory cookie pomáhají učinit web použitelným povolením základních funkcí, jako je navigace na stránce a přístup do zabezpečených oblastí webu. Bez těchto cookies nemůže web správně fungovat.
Předvolby, abyste si mohli ukládat vaše nastavení
Předvolené soubory cookie umožňují webové stránce zapamatovat si informace, které mění způsob, jakým se web chová nebo vypadá, například preferovaný jazyk nebo oblast, ve které se nacházíte.
Analytika, abychom mohli stránky zlepšovat
Analytické cookies pomáhají majitelům webových stránek porozumět tomu, jak návštěvníci interagují s webovými stránkami, a to anonymním shromažďováním a hlášením informací.
Marketing, aby se vám nezobrazovala reklama, která vás nezajímá
Marketingové cookies se používají ke sledování návštěvníků napříč webovými stránkami. Záměrem je zobrazovat reklamy, které jsou pro jednotlivého uživatele relevantní a poutavé, a tím cennější pro vydavatele a inzerenty třetích stran.