S pojmem responzivní webdesign přišel v roce 2010 americký programátor Ethan Marcotte. Hlavním charakteristickým znakem responzivního webu je jeho flexibilita. Takové stránky se přizpůsobí jakémukoliv zařízení. Responzivní webdesign má dva základní stavební kameny.

Prvním je flexibilní struktura, kdy jsou rozměry jednotlivých elementů a obrázků zadávány v procentech. Druhým podstatným rysem jsou tzv. dotazy na média (Media Queries). Jedná se o pravidla, kterými lze měnit kaskádové styly stránky v závislosti na určité vlastnosti zobrazovacího zařízení.

Nejčastěji se Media Queries týkají šířky obrazovky. Stylování webu se tak mění podle stanovené hraniční šířky (breakpointu), po jejímž dosažení se aplikuje určitá sada stylů.

Výhody responzivního designu

Responzivní web má řadu výhod, z nichž ty největší lze shrnout do těchto bodů:

• Optimální zobrazení stránek na všech současných i budoucích zařízeních.
• Nepotřebujete mobilní verzi stránek a nemusíte tak spravovat obsah dvou webů.
• Prohlížení webových stránek bez přítomnosti nepraktického vodorovného posuvníku.
• Ve výsledcích mobilního vyhledávání upřednostňuje společnost Google responzivní weby.

Mobile First vs. Desktop First přístup

Podle způsobu, jakým se aplikuje responzivní webdesign, rozlišujeme dva základní přístupy. První přístup je tzv. Mobile First, kdy se postupuje od nejnižších rozlišení až po ta nejvyšší. To znamená, že se nejprve kóduje web pro mobilní zařízení a až poté se přechází na větší obrazovky. Naproti tomu u Desktop First přístupu se postupuje přesně obráceně, nejprve se programuje pro velká zařízení a až následně pro ta mobilní.

V následujícím článku si ukážeme, proč upřednostňujeme Mobile First přístup, který je základem všech našich webů.