Responzivní web design

Aktuální verze stránky ještě nebyla zkontrolována zkušenými přispěvateli a může se výrazně lišit od verze recenzované 2. prosince 2017; kontroly vyžadují 20 úprav .

Responzivní web design ( angl.  Responsive web design ) - design webové stránky , který zajišťuje správné zobrazení webu na různých zařízeních připojených k internetu a dynamicky se přizpůsobuje zadané velikosti okna prohlížeče .

Cílem responzivního webdesignu je, aby se obsah webu zobrazoval univerzálně na různých zařízeních. Aby bylo možné web pohodlně prohlížet ze zařízení formátů a s obrazovkami různých rozlišení pomocí technologie adaptivního webdesignu , není nutné vytvářet samostatné verze webu pro určité typy zařízení. Jedna stránka může fungovat na chytrém telefonu, tabletu, notebooku a televizi s přístupem k internetu, tedy na celé řadě zařízení [1] .

Koncepty

Pojem responzivní web design ( responzivní web design z  responzivní architektury ) poprvé představil Ethan Marcot [2] v jednom ze svých článků v květnu 2010 [3] . Následně vydal knihu s názvem „ Responsive Web Design “ věnovanou této technologii [4] .

Jeffrey Zeldmannavrhl rozšířit koncept Ethana Marcota tak, aby pokryl jakýkoli přístup, který poskytuje jasný vizuální zážitek bez ohledu na vlastnosti obrazovky a další omezení uživatelského zařízení [5] .

Na druhou stranu Aaron Gustafson vydal knihu Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement [ 6] , která progresivní vylepšení považuje za důležitou součást responzivního designu . 

V důsledku toho weboví designéři začali chápat adaptivní design ( anglicky  adaptive design , nezaměňovat s anglickým  adaptive layoutem ) jako širší koncept, který zahrnuje responzivní design (jako jednu z implementací adaptability) a inkrementální zlepšování [7] [8 ] .

Pozadí

Hlavní důvody pro vznik a vývoj technologií adaptivního webdesignu jsou:

Základní principy

v responzivním designu [9] navíc v responzivním designu

Nejprve upravit _

Návrh začíná adaptivní verzí webu pro mobilní zařízení. V této fázi se návrháři snaží správně zprostředkovat význam a hlavní myšlenky pomocí malé obrazovky a pouze jednoho sloupce. Obsah je v případě potřeby redukován, přičemž se odstraní sekundární informační bloky a to nejdůležitější se ponechá [11] .

Jako ilustraci vhodnosti tohoto přístupu lze uvést bývalého vývojáře mobilních aplikací na Facebooku :

Zpočátku jsem mobilní webovou aplikaci považoval pouze za záložní službu pro facebook.com, ale jak jsem platformu poznal, rychle jsem se přesvědčil, že je možné vytvořit verzi, která bude mnohem lepší než hlavní web ! (Joe Hewitt)

Původní text  (anglicky)[ zobrazitskrýt]

Mým cílem bylo zpočátku jen vytvořit mobilního společníka pro mateřskou loď facebook.com, ale jakmile jsem se s touto platformou seznámil, přesvědčil jsem se, že je možné vytvořit verzi Facebooku, která je ve skutečnosti lepší než web! (Joe Hewitt)

— Joe Hewitt, iPad

Tento přístup není podmínkou, má však výhodu menší velikosti kódu díky menšímu počtu dotazů na média a zvýšenému důrazu na design při nízkém rozlišení.

Viz také

Poznámky

  1. ↑ Marcotte , Ethan Responzivní webdesign  . A List Apart (25. května 2010). Archivováno z originálu 24. května 2013.
  2. ↑ Hlavní  stránka . EthanMarcotte.com . Datum přístupu: 13. ledna 2012. Archivováno z originálu 9. září 2012.
  3. ↑ Responzivní webový design od Ethana Marcotteho  (anglicky) (25. května 2010). Datum přístupu: 13. ledna 2012. Archivováno z originálu 9. září 2012.
  4. ↑ Marcotte, 2011 .
  5. ↑ L. Jeffrey Zeldman, Responzivní design. Nemyslím si, že to slovo znamená to, co si myslíte  (anglicky) (2011-97-96). Získáno 15. října 2012. Archivováno z originálu 22. října 2012.
  6. ↑ Gustafson, 2011 .
  7. ↑ Viljami Salminen, Adaptivní vs. Responzivní, jaký je rozdíl?  (anglicky) . Získáno 15. října 2012. Archivováno z originálu 20. října 2012.
  8. ↑ Jared Ponchot, Responzivní a adaptivní webový design,  2011 . Získáno 15. října 2012. Archivováno z originálu 1. listopadu 2012.
  9. ↑ Marcot, 2012 , str. patnáct.
  10. ↑ O tomto webu  … . Webové stránky výzkumné skupiny Mobile Web Development Research Group . Datum přístupu: 13. ledna 2012. Archivováno z originálu 10. února 2013.
  11. ↑ Wroblewski, 2012 .

Literatura

Odkazy