Co je responzivní design? (Vysvětlující video a infografika)

Trvalo to deset let responzivní webdesign (RWD) od té doby přejít do hlavního proudu Cameron Adams poprvé představen koncept v roce 2010. Myšlenka byla geniální – proč nemůžeme navrhnout weby, které se přizpůsobí výřezu zařízení, na kterém jsou prohlíženy?

Co je responzivní design?

Responzivní web design je přístup k návrhu, který zajišťuje, že web poskytuje optimální zážitek ze sledování na jakémkoli zařízení, bez ohledu na velikost obrazovky nebo rozlišení. Zahrnuje použití flexibilních rozvržení, rozvržení na základě mřížky a dotazů na média k vytvoření webu, který se přizpůsobí velikosti obrazovky, na které je prohlížen. To znamená, že web navržený s responzivním webovým designem bude vypadat a fungovat dobře na stolním počítači, tabletu nebo chytrém telefonu.

Jinými slovy, prvky, jako jsou obrázky, lze upravit stejně jako rozvržení těchto prvků. Zde je video, které vysvětluje, co je responzivní design a proč by jej měla vaše společnost implementovat. Pokud si necháváte vyvíjet nový design webu nebo webovou aplikaci, responzivní webový design je nutností, nikoli možností, protože více než polovina veškerého webového provozu pochází z mobilních zařízení, která mají různé šířky a výšky zobrazovaných oblastí.

Responzivní design je také optimální pro webové designéry, kteří nemusejí vytvářet nezávislé zážitky, které jsou jedinečné na základě zařízení nebo výřezu. Responzivní web design lze provést pomocí CSS.

Responzivní design CSS Viewport dotazy

Zde je příklad šablony stylů, která upravuje velikost písma na základě výřezu pomocí dotazu na média:

/* Default styles for all devices */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }
}

/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
  body {
    font-size: 20px;
  }
}

/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
  body {
    font-size: 22px;
  }
}

Prohlížeče jsou si vědomy své velikosti a načítají šablonu stylů shora dolů. Dotazem na příslušné styly pro velikost obrazovky můžete nastavit konkrétní prvky stylů pro každou minimální a maximální šířku zařízení. To neznamená, že musíte navrhovat různé stránky pro každou velikost obrazovky, stačí pouze přesunout potřebné prvky pomocí dotazů na média.

Provoz s mentalitou „první na mobil“ je dnes základním standardem. Nejlepší značky ve své třídě nemyslí jen na to, zda je jejich web vhodný pro mobilní zařízení, ale také na plnou zákaznickou zkušenost.

Lucinda Duncalfe, generální ředitelka společnosti Monetate

Tady je infografika z Monetate ilustrující potenciální výhody vytvoření jednoho responzivního designu pro více zařízení:

Je váš web responzivní?

Jedním jednoduchým způsobem, jak zjistit, zda je váš web responzivní, je jednoduše zvětšit nebo zmenšit okno prohlížeče, abyste zjistili, zda se prvky pohybují na základě šířky prohlížeče.

Pro větší přesnost zamiřte Google Chrome prohlížeče na váš web. Vybrat Zobrazit> Vývojář> Nástroje pro vývojáře z nabídky. To načte spoustu nástrojů do panelu nebo nového okna. Klikněte na malou ikonu nalevo od lišty nástrojů pro vývojáře, která vypadá jako ikona mobilu a tabletu. Můžete si vybrat některá standardní zařízení a dokonce změnit, zda si přejete zobrazit stránku vodorovně nebo svisle.

Pomocí možností navigace nahoře můžete změnit pohled z krajiny na výšku nebo dokonce vybrat libovolný počet předprogramovaných velikostí výřezu. Možná budete muset stránku znovu načíst, ale je to nejúžasnější nástroj na světě pro ověřování vašich citlivých nastavení a zajištění toho, aby váš web vypadal skvěle na všech zařízeních!