Jak jsem dělal redesign vlastního webu

Blog / Dála Musil – 6. srpna 2017

Od zimy do konce letošního května jsem redesignoval vlastní web, tedy ten, na kterém právě teď jste. Ačkoliv to tak na první pohled možná nevypadá (pokud si pamatujete ten předchozí), musel jsem toho řešit poměrně hodně. Co všechno? To si teď můžete přečíst.

Pohled do historie

Kdo pamatuje mé prehistorické weby z dob dávno minulých, ten ví, že svůj web měním docela rád a často. Včetně toho prvního z roku 2004 je tohle +/- 10. osobní web (nepočítám přitom weby mých projektů). Změna obvykle souvisela s tím, že jsem zcela změnil zaměření webu - ty první se týkaly mého účinkování v online sportovních manažerech, následovaly osobnější weby s ukázkou mé mediální, literární a fotografické tvorby, pokus o agenturní one-man show až po současnou marketingově-poradenskou podobu, ve které se profiluji od roku 2013 (kdy jsem také po dlouhých letech změnil doménu z původní dalax.net na dalamusil.com).

Proč jsem šel do redesignu

Důvodů bylo tentokrát výrazně víc než kdy jindy. Předchozí web jsem spustil v polovině února 2015, kdy už jsem byl čistě na volné noze a nepodnikal při zaměstnání. Během těch dvou let se přesto moje pracovní náplň (a představy o tom, co budu dělat, resp. co nabízím vs. co chtějí klienti) posunula z velké části jinam, takže to byl hlavní důvod redesignu. Mimo to jsem chtěl web zjednodušit, zvýšit počet odběratelů newsletteru, vytáhnout konverzní poměr, přejít na HTTPS a v neposlední řadě zjednodušit všechno co na webu dělám díky převodu z html do php (ano, mám celý web staticky, žádný redakční systém, protože chci mít pod kontrolou úplně každý řádek kódu). No a pak i důvod z typických webových chyb, přiznávám, kvůli němuž byste web měnit neměli - že se vám okouká :-)

Jak jsem na to šel?

Předem říkám, že z mého postupu si neberte příklad, protože takhle jednoduše se weby pro klienty běžně nedělají (jak se web dělá obecně?). Sám sebe nicméně docela znám, takže si neobvyklý, zjednodušený a mnohdy souběžný postup můžu dovolit :-)

"Analýza a dokumentace"

Nadpis v uvozovkách, protože to byl spíš takový velký souhrn. Poznámky k novému webu jsem si psal de facto už od spuštění toho předchozího, takže na začátku mě čekalo proplést se tunou informací, faktů a námětů, a dostat z toho ty nejdůležitější body, které musím řešit. Jak má web působit, odkud kam chci, aby po webu chodili návštěvníci, kde jsou stěžejní konverzní místa, jaký přibližně bude obsah, jak by mohla vypadat grafika, jestli přidám nějakou speciální fíčuru atd. Z původního obřího soupisu byl soupis ještě větší.

Wireframy a texty

Při práci pro klienty jsem zvyklý wireframy dělat vždy, u sebe jsem je ale dřív nikdy moc neřešil a dělal jen skici na papír. To jsem chtěl tentokrát změnit a poprvé dělal wireframy i sám sobě. A světe div se, mělo to smysl. Nechápu, jak jsem vlastně dřív ty své weby zvládl dělat. Ačkoliv mi návrh wireframů zabral hodně času, výrazně mi ulehčil vše další. Kromě rozvržení webu a struktury jsem stihl načrtnout i částečně grafiku a připravit téměř kompletně finální texty.

Grafika

Vlastní weby jsem si dělal vždy od A do Z sám a tentokrát tomu nebylo jinak. Nejsem grafik (i když Photoshop docela ovládám) a mám rád jednoduchost, takže už od svých prvních webů ladím grafiku přímo v prohlížeči při kódování (žádné řezání návrhu a jeho kódování). Člověk má pak volnost, může si zkoušet různé varianty a ihned vidí změny. Druhý bonus je v tom, že pak nemáte tendenci si vymýšlet ptákoviny, a děláte vše opravdu jednoduše.

Kódování

Už můj předchozí web byl responzivní, takže jsem tentokrát nestrávil na kódování tolik času, přestože mě docela baví (takovéto jak vám to doslova roste postupně před očima, což kodéři jistě znají :-). Jako vždy jsem navíc dokázal velkou část kódu zjednodušit, zkrátit a vylepšit, z čehož mám vždy velkou radost - díky tomu totiž vím, že to umím zase o něco lépe. A tak jak nemám žádný redakční systém, nejedu ani na žádném kódovacím frameworku (snad jen na tom vlastním :-)

Ladění

Mnoha lidem se stává, že se těsně před dokončením nějakého projektu (nemusí jít zrovna o web) zaseknou, a pak jim třeba posledních 5 % práce trvá tolik času co předchozích 95 %. Mě to už několikrát potkalo a jsem rád, že tohle nebyl zrovna ten případ. Tunil jsem všechno, co už bylo hotové, a doplňoval, co nebylo - některé texty, některé grafické prvky, loga, fotky, tlačítka, formuláře, děkovačky, 404ku, nový lightbox, responzivitu v některých šířkách, hovery, fíčury přes jQuery, strukturovaná data, zabezpečení, htaccess, zrychlení webu... Nebylo toho málo :-)

Převod z HTML do PHP

Na závěr těsně před spuštění jsem si nechal převod do PHP, na který jsem se hodně těšil. Zatímco v HTML máte celý kód na jedné stránce, v PHP můžete skládat stránku z více "stránek", resp. souborů. Nevýhoda HTML je, že když chcete něco změnit (např. odkaz v patičce), musíte pak projít třeba 50 stránek a všude to ručně přepsat. V PHP máte jeden soubor pro patičku, který se pak automaticky propíše všude. No, podobně jako s wireframy jsem zalitoval, že jsem tohle už neudělal dávno. Zvlášť tehdy, když jsem musel převést v kódu všechny články tohohle blogu... Ale teď už je to za mnou a jsem fakt rád, že jsem tuhle změnu udělal :-)

Co jsem jak a kde měnil?

Postup jste si přečetli, tak se ještě pojďme mrknout na to co, kde, jak nebo proč jsem měnil. Obecně jsem se řídil jednoduchým pravidlem: méně je více. V následujícím soupisu shrnuji ty největší změny.

Texty

Co šlo, to jsem zkrátil. Obzvlášť to ode mě schytaly stránky Služby a O mně, kde jsem seškrtal minimálně polovinu textů, na profilu cca 3/4. Důvod? Lidé obvykle nechtějí číst dlouhé texty, zvlášť tehdy, když je tam hodně balastu. Já jsem byl sice hodně faktický, ale pořád tam byla spousta zbytečného, bez čeho se všichni kromě mě obejdou. Služby sice ještě hodlám trochu ladit, ale ne na úkor přehlednosti.

Vzhled

V případě grafiky jsem měl dva velké cíle a těmi byly jednosloupcový layout a více whitespace (= volného prostoru). Díky těmhle změnám více vynikne to důležité. Hlavička, patička, hlavní blok - všechno je teď čistější a přehlednější. S výjimkou dvou boxů v kontaktech a několika bloků na homepage jsem také zahodil všechny ohraničené bloky. Když uděláte jednodušší layout, je to přehledné i bez rámečků. Taky jsem zvětšil font a lehce poladil barvy - hlavní oranžová zůstala, ale jinak jsem opustil světle černou a přešel na sympatičtější tmavě modrou.

Menu

V menu se udály jen dvě větší změny. První bylo vyhození odkazu na mou fotogalerii, protože už moc nefotím, a stejně to nemělo efekt. Druhá změna byla zásadnější - v mobilním menu, kde se používá tzv. hamburger, mám nově rámeček a zároveň text "menu", aby bylo všem jasnější, že jde o menu (protože někteří starší uživatelé s tím obecně mají problémy).

Formuláře

Původní čtyři pole jsem stáhl na tři - jméno, e-mail a zprávu, zcela jsem se zbavil telefonu (stejně předtím nebyl povinný), který málokdo vyplňoval. Upravil jsem také textaci tlačítka a automaticky je zaškrtnutý odběr newsletteru, který se musí odkliknout. Nechci předbíhat po tak krátké době, ale úprava, zdá se, zafungovala.

Tlačítka

S tlačítky jsem si hodně vyhrál. Dlouho se mi líbily ghost buttons (tlačítka s rámečkem, které mají pozadí stejné jako je pozadí stránky), ale protože je ne každý chápe, mám i "plná" tlačítka. Ty jsou vždy primární a proto jsou "mou klasickou" oranžovou barvou, zatímco ta méně důležitá jsou v ghost verzi. A vyhrál jsem si trochu i graficky - poprvé používám stíny a k tomu css přechod ease, kdy se při najetí tlačítko jakoby stlačí.

Logo v hlavičce

Zjistil jsem, že nemá smysl mít logo, když je příliš obecné - proto ho už v levém horním rohu nenajdete. Celý tenhle levý blok je teď navíc celý textově, ne jako obrázek, takže mám vždy jistotu, že se načte (což u obrázků občas může pokulhávat).

Hlavní blok na homepage

Na úvodce jsem udělal jednu velmi podstatnou změnu, když jsem vyhodil tři boxy se službami (které říkaly, co dělám) a nahradil je jedním boxem. Ten neříká, co dělám, ale naopak s čím návštěvníkům pomůžu, což má daleko větší smysl. Mám tam i jméno a fotku, protože jak jsem zjistil, někteří klienti už nepoptávají co dělám, ale chtějí přímo mě - takhle mě hned uvidí, plus to samozřejmě zvyšuje důvěryhodnost. Tlačítko vedoucí do služeb nelze přehlédnout a pod boxem mám i tři malé boxy s odkazy, takže se každý dostane, kam chce.

Reference

Já mám moc rád jakýkoliv obsah, takže jsem šel vždy trochu sám proti sobě, když jsem ho měl v referencích příliš. Uváděl jsem všemožné reference, ačkoliv některé nebyly tak důležité, některé byly už hodně staré a některé byly málo relevantní k tomu, co dělám. Názory klientů a hlavní klienti se dočkali jen vzhledových úprav, ale soupis dalších referencí už je výrazně kratší a doplněný o loga - protože obraz vnímá člověk rychleji než text.

Odběr newsletteru

Na blogu a ve článku jsem měl speciální blok pro odběr newsletteru, ale nefungoval podle mých představ. Přetextoval jsem nadpis, text před polem pro e-mail a tlačítko, aby byly jasnější a efektivnější, navíc jsem formulář posunul až k patičce. Je předčasné něco hodnotit, ale narůst odběratelů je zatím 1,75x vyšší než doposud.

Fototvorba

Stránka s mou fotografickou tvorbou doznala v součtu asi největších změn. Kromě zkrácení textů jsem přidal graficky odkazy na profily na fotomodelingových webech a fotobankách, vyměnil jsem lightbox za responzivní, přidal ukázky fotek ve fotobankách, fotomodelingové ukázky se všechny zobrazí až po rozkliku. Také jsem odebral reference z focení, protože jsem zjistil, že se lidé stejně rozhodují hlavně podle kvality fotek, méně podle názorů.

Kontakt

Poslední za zmínku stojí změny na kontaktní stránce. Samostatnou kancelář jsem už zrušil, takže ztratilo smysl mít v kontaktech adresu a mapu - navíc s většinou klientů stejně řešíme věci na dálku. Zároveň jsem se zbavil ikon u e-mailu a telefonu, které byly na předchozím webu příliš velké, a dal větší důraz právě na samotné kontakty. Sociální sítě, ač je někteří freelanceři cpou do kontaktů, stále nepovažuji za tak důležité, takže zůstaly v patičce - jsou však alespoň o něco viditelnější než předtím.

Jaké jsou výsledky?

Hodnotit výsledky redesignu po dvou měsících je dosti předčasné, což jsem zmiňoval už v některých bodech, nicméně pár vlaštovek se ukázalo. Návštěvníci si prohlíží více stránek, stráví na nich více času a je menší míra okamžitých odchodů - snad to tak bude pokračovat i nadále. Co mě naopak nemile překvapilo, ač jsem to čekal - přechod na HTTPS sestřelil návštěvnost přibližně cca o 30-50 %. V tuhle chvíli může mít velký vliv ale samozřejmě i léto, tak uvidím, jak se čísla změní třeba za půlroku.

Dnešní článek byl dlouhý, ale už jsme na konci. Co říci závěrem? I kdyby se výsledky už víc nepohnuly, budu spokojený - tak jako při každém redesignu jsem se naučil spoustu nových věcí a web teď více odráží skutečnost a to, co dělám.

Potřebujete také udělat redesign webu nebo e-shopu a nevíte, jak na to? Kontaktujte mě, rád vám pomůžu.