Responzivní web

Hlavní výhody responzivního designu

• Webové stránky jsou dostupné a čitelné na všech zařízeních.
• Responzivní web používá pouze jednu URL adresu pro všechna zařízení.
• Google v mobilní verzi vyhledávání nevrací na přední místa weby, které nejsou dobře použitelné na mobilních zařízeních. Responzivní web má tedy lepší umístění ve vyhledávači.
• Majitelé nemusí vytvářet různé verze pro mobilní zařízení a zabývat se jejich správou, což přináší značnou časovou i finanční úsporu.

Principy responzivního designu

• Pružný layout: v době, kdy psal Ethan Marcott svůj článek, měla většina  webů fixní layout nastavený na určitou pixelovou hodnotu. Oproti tomu pružný layout mění rozměry podle velikosti zobrazovacího okna. Této flexibilní struktury se dosahuje zadáváním v procentech namísto v pixelech.
• Pružné obrázky: při technice flexibilních obrázků je nutné zajistit, aby se přizpůsobovali stejným způsobem jako celá struktura, neuvádí se tedy šířka a výška uvnitř tagu ˂img˃. V případě obrázků vyjádřitelných vektorem z něj lze udělat SVG formát.

Media Queries: jedná se o pravidla pro změnu stylování dokumentu v závislosti na velikosti zobrazovacího zařízení a jsou považována za poslední úroveň v responzivním designu. Využívá se takzvaných kaskádových stylů, kdy dojde k oddělení vzhledu od jeho obsahu. Toto oddělení zlepšuje použitelnost pro různé typy zobrazovacích zařízení. Pro každý jednotlivý systém designu je nutné předdefinovat takzvané body zlomu (breakpoint), což jsou soubory podmínek pro odlišné prohlížeče.

Heslo zpracoval: Blanka Kochová 9. 6. 2022