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

responzivní webdesign

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

Co je responzivní design?

Responzivní webový design (RWD) je webdesignový přístup zaměřený na vytváření webů, které poskytují optimální zážitek ze sledování - snadné čtení a navigaci s minimem změn velikosti, posouvání a posouvání - napříč širokou škálou zařízení (od mobilních telefonů po stolní počítače) monitory). Web navržený pomocí RWD přizpůsobuje rozložení prostředí pro prohlížení pomocí plynulých, proporcionálních mřížek, flexibilních obrázků a mediálních dotazů CSS3, což je rozšíření pravidla @media.

Wikipedia

Jinými slovy lze upravit prvky, jako jsou obrázky, stejně jako rozložení těchto prvků. Zde je video, které vysvětluje, co je responzivní design, a proč by ho vaše společnost měla implementovat. Nedávno jsme přestavěli DK New Media aby byly responzivní a nyní na nich pracujeme Martech Zone udělat totéž!

Metodika vytváření responzivního webu je trochu zdlouhavá, protože potřebujete mít hierarchii svých stylů, které jsou organizovány na základě velikosti výřezu.

Prohlížeče jsou si vědomy své velikosti, proto načtou šablonu stylů shora dolů a dotazují se na použitelné styly pro velikost obrazovky. To neznamená, že musíte navrhovat různé styly pro každou velikost obrazovky, stačí jen posunout nezbytné prvky.

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í:

Reagovat na infografiku webového designu

Pokud chcete vidět responzivní web v akci, nasměrujte svůj Google Chrome prohlížeč (věřím, že Firefox má stejnou funkci) na DK New Media. Nyní vyberte Zobrazit> Vývojář> Nástroje pro vývojáře z nabídky. Tím se načte spousta nástrojů ve spodní části prohlížeče. Klikněte na malou ikonu pro mobilní zařízení zcela vlevo na liště nabídek Nástroje pro vývojáře.

responzivní testovací chrom

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!

3 Komentáře

  1. 1
  2. 2

    Děkuji Douglasovi za tento dobře vysvětlený článek. Musím s tím souhlasit, i když po obsahové stránce věci. U většiny webů, které vytváříme, nebude stačit responzivní rozložení. Potřebujeme citlivý obsah. Ale pro základní webové stránky určitě použijeme váš dobře zdokumentovaný článek o tom, jak to zvládnout!

Co si myslíte?

Tyto stránky používají Akismet k omezení spamu. Zjistěte, jak jsou vaše údaje komentářů zpracovávány.