Responzivní webdesign

Co je to responzivní webdesign?

Responzivní web design je přístup k tvorbě grafiky webových stránek, který bere v úvahu různé typy zařízení, které navštevníci využívají při procházení webu. Dle rozměrů obrazovky zařízení uživatele upravuje způsob zobrazení obsahu na stránce.

Optimalizace responzivního designu zabezpečuje, že jsou stránky funkční a prehledné při užití různých zařízení jako třeba:

• Mobilní telefony
• Tablety
• Chytré televize
• Notebooky
• Stolní počítače

Mobile-first indexing

Mobile-first indexing znamená, že Google používá k indexování a hodnocení stránek převážně obsah mobilní verze webovek. V minulosti Google při vyhodnocování relevance stránky vzhledem k dotazu uživatele používal především obsah stránky z verze pro počítače. Protože většina uživatelů nyní Vyhledává na Google pomocí mobilního zařízení, Googlebot prochází a indexuje stránky primárně pomocí agenta pro chytré telefony.

"Od 1. července 2019 používá Google pro všechny nové weby mobile-first indexing."

(Zdroj: developers.google.com)

Proč responzivní design?

• Responzivita webu ma vliv na seo
• Počet uživatelú chytrých telefonů pořád roste
• Více než polovina online nákupů a rezervací je realizováno prosřednictvím telefonu
• Náklady na správu jedné platformy jsou nišší v porovnání s alternativami 

Krátká historie

Flexibilní uspořádání před responzivním designem

V minulosti jste měli při navrhování webu dvě možnosti:

• Vytvořit likvidní web, který vyplnil celou obrazovku prohlížeče.
• Nebo web s pevnou šířkou stanovenou velikostí v pixelech.

Tyto dva přístupy měly tendenci vést k tomu, že webová stránka vypadala co nejlépe na obrazovce osoby, která web navrhuje.
Design likvidního webu se nevešel na menších zařízeních do obrazovky - byl zmáčknutý. Na větších se začali objevovat nečitelné dlouhé rádky.
Web s pevnou šířkou měl na menších zařízeních horizontální posuvník a na větších spoustu volného místa na okrajích návrhu.

Byla vyvinuta řada přístupů, které se pokusily vyřešit nevýhody likvidních metod nebo metod vytváření webových stránek s pevnou šířkou. V roce 2004 Cameron Adams napsal příspěvek s názvem "Resolution dependent layout", popisující metodu vytváření designu, který by se mohl přizpůsobit různým rozlišením obrazovky. Tento přístup vyžadoval ke zjištění rozlišení obrazovky JavaScript a načtení správného CSS.

Zoe Mickley Gillenwater ve své práci z roku 2008 popsala a formalizovala různé způsoby jimiž by mohly být flexibilní stránky vytvořeny. Snažila se najít zlatou střední cestu mezi vyplněním obrazovky a zcela pevnou šíŕkou.

Responzivní design

Termín responzivní design zavedl Ethan Marcotte v roce 2010 a popisoval použití následujícich tří technik:

1. První byla myšlenka fluidních mřížek, kterou již zkoumala Gillenwater a lze si o tom přečíst v Marcotteově článku "Fluid Grids" (uveřejněném v roce 2009 na "A List Apart").
    
2. Druhou technikou byla myšlenka z článku "Fluid Images". Použitím nastavení šířky obrázku max-width na 100 % docílíme toho, že se obrázek zmenšuje se zužující se obrazovkou ale nikdy se nezvětší nad svojí původní velikost. Díky tomu obrázek nevypadá rozpixelovaně na velkých obrazovkách a zmenšuje se na šířku těch menších.
    
3. Třetí klíčovou složkou byl "Media Query". Media Queries poskytují nástroj pro přizpůsobení designu, který Cameron Adams dříve dosáhl pomocí JavaScriptu ale pouze pomocí CSS. Místo jeshono rozvržení pro všechny velikosti obrazovky lze rozvržení měnit. Třeba je možné přemístit boční panely pro menší obrazovku, nebo zobrazit alternativní navigaci.

(Zdroj: developer.mozilla.org)

Nástroje pro testování:

Test responzivity pro telefony od společnosti Google:
https://search.google.com/test/mobile-friendly

Při hledání problémů, které mohou ovlivnit vaši stránku při přístupu z chytrého telefonu se hodí přehled použitelnosti na telefonu ve sluzbě Search Console
https://search.google.com/search-console/mobile-usability

Máte už webové stránky v responzivním designu?

Ještě ne? Kontaktujte nás a my Vám vytvoříme responzivní web design webových stránek nebo eshopu na míru. Pro více informací o responzivním webdesignu nás můžete kontaktovat na tel.: +420 602 426 001, email: [email protected], nebo veškeré kontakty naleznete zde.