Responzivní design


Stále více aplikujeme na naše systémy tzv. responzivní design. Co to je? Jedná se o takový styl stránek, který se přizpůsobuje různým rozlišením.

 

Dříve se dělaly weby pro rozlišení 800px šířky a později klidně pro 1024px díky posunutí standardu v rozlišení monitorů. Širší rozlišení se ale už spíše neaplikovalo, protože většina monitorů by nezobrazila stránky celé a bylo by nutné rolovat do strany. Opačná situace, kdy se dělaly weby na plno-obrazovkové rozlišení a využití plné šířky, zase způsobovala rozhození objektů a nepříjemné čtení půlmetrových řádků malých písmen na větších monitorech, což není pro čtení vhodné.

 

V roce 2012 se poprvé prodalo více mobilů a tabletů než PC+notebooků.

Sice se v průběhu let stalo téměř standardem, že rozlišení 1280px bude dalším stupněm, přišly na řadu netbooky a jejich nízké rozlišení. Takže se trend přerušil a roztříštil. Netbooky jsou v této době na ústupu. Nicméně se těší oblibě tablety a chytré telefony, které jsou uživateli stále více používány k přístupu na internet. A zde začala džungle různých rozlišení v plné míře!

 

Trend směřuje k tomu, že návštěvníci přistupují na web z menších zařízení.

Většina webů se nepřizpůsobuje a uživatel musí "lupovat" a "rolovat" doprava. Některé portály (především zpravodajské) mají extra aplikaci nebo web pro menší zařízení.

 

 

Společnost seznam.cz zde 17.10.2013 přešla na responzivní design

Společnost seznam.cz provozovala svou hlavní stránku na seznam.cz a rovněž duplicitně stránku t.seznam.cz pro mobilní zařízení. Udržovala tak dva paralelní systémy. Díky responzivnímu designu přešla na používání jednoho, přičemž se ale ukazuje obsah stránky vhodně poskládaný a použitelný na mobilních zařízeních různých rozlišení.

 

 

Jak na to pohledu moderního designera aplikací?

 

 

Responzivní design je řešením!

Web se na Vašem zařízení díky responzivnímu designu přizpůsobí. A to ne tím způsobem, že se zmenší do titěrných písmenek a nutí lupovat. Naopak. Nabídne Vám větší komfort ovládání (např. se zvětší menu pro dotyk), umožní rolovat pouze dolů (klasicky prstem na mobilu) a vypne i některé neužitečné prvky, aby nepřekážely. Na takovém místě se lidé cítí vítáni a dobře se jim portál ovládá i čte - a to ihned.

Výhody pro uživatele

  • pohodlné čtení
  • pohodlné ovládání
  • snadná orientace
  • použití libovolného zařízení

Výhody implementace v systému

  • menší náročnost oproti vytvoření nové aplikace pro mobilní zařízení
  • snadnější na údržbu i změny při vývoji hlavní aplikace
  • stále jen jedna aplikace/web
  • podchytí se jakékoliv rozlišení

 

 

Chcete také takový design?

 

Tímto to nekončí. Pokud chcete lidem jít naproti ještě více, je třeba se zamyslet nad optimalizací přenášeného objemu dat k uživateli. Jednak jsou některá zařízení méně výkonná a zpracování většího objemu by jim trvalo déle. A jednak jsou mobilní připojení limitována FUP objemem dat, takže je lepší přenášet méně. Takže zvažte minimalizaci kódu, menší počet hitů/souborů, kompresi přenášených dat, opožděné načtení dolního obsahu, cache apod. Zvýšíte rychlost načtení, zpracování a to při menším objemu.

 

Ukázka responzivního designu


Shlédněte, jak vypadá tento web na různých zařízeních, zda se roluje pouze dolů a nikoliv do stran (a vyzkoušejte i jiné adresy):

Příklad na této stránce ...


 

2/2013

 

Co si o tom myslíte Vy?

Add Napsat příspěvek

Jméno:   Titulek:




© BrusTech 2016

Mapa stránek Vytiskni tuto stránku Poslat odkaz na tuto stránku   BrusTech IT » Blog » Responzivní design | responsive web design pro mobily