Výhody responsivního designu webu

21. 09. 2017

Responsivní design je označení pro web přizpůsobující se velikosti jednotlivých zařízení, jakými jsou telefon, tablet i displej desktopu. Pokud ještě nemáte responsivní verzi webu, pojďte se s námi podívat na všechny její hlavní výhody. Dozvíte se, jak je možné svůj web na inPage převést na responsivní verzi.

Hlavní výhody responzivního webu

• prvky na webu se plynule přeskupují podle použitého zařízení tak, aby se v plném rozsahu vešly na dostupný displej a obsah byl čitelný
• lepší pozice ve vyhledávání – společnost Google oficiálně oznámila, že bude tzv. mobile-friendly weby ve vyhledávání upřednostňovat
• vyšší návštěvnost webu – podíl uživatelů internetu, kteří využívají k prohlížení mobil nebo tablet, se zvyšuje (celosvětově tento podíl v roce 2016 dokonce poprvé předstihl podíl prohlížení z desktopu, zdroj: Statcounter)
• úspora nákladů a času oproti případné alternativě ve formě vlastní webové aplikace

Responsivní web na inPage

Výběr šablony

Nejdříve je třeba zdůraznit rozdíl mezi tzv. mobilní šablonou inPage (mobilní web) a responsivní šablonou (např. HANAMI nebo ONE). 

Mobilní web je přídavným modulem našich starších neresponsivních šablon, který zobrazí stránky v jednoduchém designu připraveném pro mobilní zařízení. Webová stránka při návštěvě detekuje zařízení, na kterém je zobrazena, a dle toho spustí buď klasickou, nebo mobilní verzi. Nevýhodou je nekonzistentní zobrazení designu i prvků webu. Nastavení mobilní šablony lze provést pouze v původní administraci (vase-domena.cz/admin). 

Responsivní web naproti tomu reaguje výhradně na rozměr okna, ve kterém je zobrazován. Při zmenšování okna prohlížeče tak můžete sledovat, jak se prvky postupně přizpůsobují až do nejužšího zobrazení bez újmy na grafice.

Pokud používáte některou z neresponsivních šablon, doporučujeme přechod na šablonu responsivní. V administraci v nabídce šablon (Vzhled  → Šablona) si můžete snadno vyzkoušet, jak bude vaše stránka po změně na jinou šablonu vypadat. Zapamatujte si však původní šablonu a její barevnou variaci, pokud byste chtěli šablonu vrátit v tu chvíli zpět (nelze pomocí tlačítka zpět). 

Stejný web při použití různých šablon

Přehled šablon s informacemi o responsivitě naleznete v článku Šablony inPage. 

Pozor na responsivitu vložených prvků

Jestli potřebujete upravit responsivitu prvků v určitém rozlišení, pomůže vám článek Jak upravit responsivní design.

Skutečnost, že jste si změnili šablonu na responsivní, ještě nemusí nutně znamenat, že se vše bude zobrazovat v pořádku. Tomuto zobrazení musí být přizpůsobeny také prvky, které na stránku vkládáte. Jednou z nejčastějších chyb je pevná šířka obrázků, videí nebo iframů, která poté neumožňuje jejich zmenšení (např. na telefonu). Tím se pak naruší přizpůsobení celé stránky. Řešení je popsáno v samostatném článku Responsivní obrázky a videa. 

Právě z důvodu umožnění responsivního zobrazení jsme provedli úpravu v chování tabulek, které jsou tvořeny přímo v editoru WYSIWYG (nejsou nakopírované z excelu nebo z jiného zdroje). Dříve se při vytvoření tabulky a roztažení jednotlivých polí přiřadily tabulce i jednotlivým buňkám určité šířky a výšky, čímž došlo k problému popsanému v předešlém odstavci (více v článku Změny a nastavení tabulek v editoru WYSIWYG). 

Mezi možné problémy patří také nesprávně použitý tzv. bootstrap nebo použití tabulek na místech, která jsou vhodná pro bootstrapové sloupce. Přidání sloupců v podobě boxů můžete vyzkoušet díky článku Dlaždice na úvodní stránce.

Jsme tu pro vás

Pokud si nebudete s úpravami vědět rady, pomůžeme vám. Nechte je na nás a ušetříte svůj čas. V případě, že máte zájem o úpravu vašeho webu nebo jeho převod na responsivní verzi, zašlete nám dotaz či poptávku na admin@zoner.cz.