21. 8. 2014
Případové studie

Cesta webu Ligranit.cz do mobilů a tabletů: Responsive webdesign v akci

Cesta webu Ligranit.cz do mobilů a tabletů: Responsive webdesign v akci

V posledních týdnech před sebou máme novou výzvu - specializaci na tvorbu webových stránek optimalizovaných pro mobilní telefony, tablety i klasické monitory je naší prioritou. S potěšením musíme říct, že tahle výzva nás prostě baví! Responsive webdesign (responzivní web, přizpůsobivý design), jak se tato technika nazývá, je současným trendem tvorby www stránek a díky neustále rostoucímu zájmu o mobilní přístup internetu rapidně nabývá na významu.

V tomto článku Vám představíme aplikaci responsive webdesignu na stávající web Ligranit.cz. Jak uvidíte, tato technika není určena nutně pro nové weby, je možné obdobně přepracovat již existující webové stránky.

LIGRANIT lídrem v produkci přírodního kamene i přístupu k zákazníkům

Společnost LIGRANIT a.s. se zabývá těžbou a zpracováním přírodního kamene. Jejími zákazníky jsou jak firmy, tak i koncoví zákazníci. Jedná se o společnost s tradicí, zkušenostmi a ambicemi být lídrem na trhu. Díky dlouhodobé spolupráci víme, že LIGRANIT má zájem být na špici nejen ve své produkci a prodeji, ale také ve své propagaci a přístupu k zákazníkům. Několik měsíců jsme sledovali rostoucí procento přístupů z mobilních zařízení, pro které současný web nebyl optimalizován. Padlo rozhodnutí modernizovat stránky do podoby responzivního webu. Opět jako první v tomto segmentu!

Wireframe pro několik šířek obrazovek

Prvním krokem je tvorba wireframe pro několik rozměrů – šířek obrazovek. V tomto případě jsme zvolily čtyři verze pro mobilní telefony, telefony při otočení „na šířku“, tablety a plné zobrazení pro počítače.

Různá zařízení od mobilu přes tablet až ke klasickým monitorům

Při návrhu postupujeme vždy od nejmenšího rozměru – ve stylu Mobile First od Luka Wroblewskiho (http://www.lukew.com/). Jestliže navrhujete rozložení informací na obrazovce mobilu, pracujete s omezeným prostorem a proto dáte vždy prostor těm nejdůležitejším informacím. U tabletů a klasických monitorů již máte více prostoru pro grafiku a další sdělení - ale co je nejdůležitější - hlavnímu obsahu stále věnujete hlavní pozornost.

Práce na wireframech pro responsive web v rané fázi.

Tým UVM připravuje responsive wireframe

Wireframe Ligranit responsivePrvní wireframy jsou konzultovány a testovány v širším týmu i za účasti laiků, kteří přináší tolik důležitý pohled koncového uživatele. Postupnými úpravami vzniká několik verzí, které následně putují ke kodérovi ke zpracování.

Kódování a úprava grafiky

Výsledkem práce kodéra a grafika je webová stránka, která se bez problémů zobrazí na každém zařízení od mobilních telefonů, přes tablety až po velké monitory počítačů. Obsah je vždy zobrazen tak, aby na stránce nebylo nutné využívat spodní horizontální posuvník a obsah byl vždy celý zobrazen a přizpůsobený šířce okna.

responsive webdesign Ligranit

Náročnost, finance a motivace být responzivní

Vlastní náročnost vytvoření responsive webu je vždy individuální. Je zřejmé, že tato úprava sebou nese jisté náklady navíc. Ze zkušenosti můžeme uvést, že cena přizpůsobivého (responsive) webu je o cca 20-30% vyšší, oproti klasickému webu. Díky veliké přidané hodnotě takto vytvořených webů se jedná o relativně nízké navýšení ceny.

Motivací pro Vás bude nejen uživatelská přívětivost Vašeho webu, ale také jistý náskok před konkurencí, který tímto získáte!

Newsletter

Buďte s námi online. Napište nám svůj e-mail, ať se o zajímavých tématech z digitálního světa dozvíte jako první. Píšeme je pro Vás.

Pro sledovače a šérovače

Tento web používá k poskytování služeb, personalizaci reklam a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tím souhlasíte.
Další informace

Zpracovávám...