Odpovědný design je relativně nový termín v návrhu webových stránek. Tenkrát byl vytvořen před třemi lety v květnu roku 2010, kdy internetový návrhář Ethan Marcotte použil tento výraz jeho článek pro A List Apart.

Dnes je dokonce i mini debata, která se týká toho, zda je zde citlivý design, aby zůstal, nebo zda je to jen záblesk v pánvi. Pouze čas to řekne, ale prozatím je jasné, že reagující design usiluje o co nejkomfortnější uživatelskou zkušenost.

Odpovědný design je filozofie webového designu, která se zaměřuje na vytváření stránek, které uživatelům poskytují vylepšený zážitek ze sledování. To zahrnuje funkce, jako je snadná navigace a čtení, a minimální velikost prohlížeče, posouvání a posunutí. To vše se děje v řadě různých zařízení, od stolních počítačů po chytré telefony.

Vzhledem k tomu, že tento návrh webového designu je stále v rozvíjejícím se stavu, nemusí být zcela jasné, na jaký citlivý design je vše kolem. Je to spíše o bezproblémovém zobrazení obsahu na více platformách, nebo je to hlavně o pomoci podnikům budovat atraktivnější místa pro zvýšení jejich prodeje prostřednictvím lepšího uživatelského zážitku?

Mashable už vyšel na končetinu a volal Rok 2013 odpovídá designu. Zatímco to zůstane vidět, některé základní aspekty citlivého návrhu jsou standardy, které nikdy nezmizí. Zde jsou nejdůležitější reagující faktory designu, abyste se seznámili s tím.

Existuje rozdíl mezi citlivým designem a mobilním designem

Bylo by vám odpuštěno, když jste si mysleli, že citlivý design a mobilní design jsou jeden a tentýž - ale nejsou. Jistě, reagující design vytváří webové stránky, takže oba reagují na velikost prohlížeče a jsou přátelští k mobilním telefonům, avšak citlivý design je opravdu celý webový design. Problém s odkazem na tento návrh webového designu jako mobilní návrh je ten, že je v podstatě omezující, čímž dochází ke špatnému přístupu k samotnému přístupu.

Nejúčinnější reaktivní webové stránky mohou být viděny tak, jak byly zamýšleny, v celé řadě usnesení. To zahrnuje vše od obvyklých 1024 × 768 pixelů až po zobrazení 1920 × 1080 a vše mezi nimi. Taková místa vypadají také skvěle na tabletech (sítích i standardních displejích), stejně jako na smartphonech. Pokud webový návrhář nahlíží na citlivý design výlučně prostřednictvím kontextu mobilního telefonu, pak je potenciálně ztracen v širším uživatelském prostředí.

Mobilní telefon je zároveň opravdu vhodným výchozím bodem pro celkovou diskusi o designu. Bylo normou začít mobilní schématem a rozšiřovat tento návrh na další velikosti, protože je vytvořena citlivá stránka. Spousta návrhářů se domnívá, že je jednodušší růst vizuálních motivů, než je minimalizovat.

Kvalita a velikost obrazu jsou prioritou

Pokud existuje pravidlo, které by měli weboví návrháři následovat, je kvalita obrazu mnohem důležitější než skutečný počet obrázků. Důvodem je, že obraz nízké kvality jednoduše nevypadá atraktivně v žádné velikosti. Čas potřebný k načtení obrázku je téměř stejně důležitý jako jeho velikost. Uživatelé mobilních zařízení s tím souhlasí, protože mají omezenou šířku pásma, s nimiž mohou bojovat.

Co je to návrhář webu? Stačí dosáhnout inteligentní rovnováhy mezi dobou načtení a kvalitou. To zahrnuje změnu velikosti obrázků s vlastnostmi výšky a šířky CSS, řízení bez načtení obrázků v plné velikosti a optimalizace obrázků pro internet. Před nahráním je velmi doporučeno oříznout všechny snímky a ukládat každý snímek v co nejmenší možné podobě, pokud stále zachovává ostrý, vizuální kvalitu.

Překontrolovat Webové stránky společnosti Sony USA . Všimněte si, jak jsou všechny snímky vysoce kvalitní, bez ohledu na velikost. Jakmile navštívíte web nebo aktualizujete domovskou stránku, uvědomte si, jak rychle se načítá obraz. Nemusíte čekat víc než vteřinu, než se vše zaostří ostře.

Návrháři mají mnoho možností, když vkládají obrázky do citlivého nastavení. Mohou používat jen několik obrázků; snížit používání snímků v rámci režimů pro mobilní zařízení; umožňují obrazům maskovat se v mobilním prostředí; nebo využít různé velikosti a verze souborů. Tato volba bude fungovat efektivně, ačkoli někteří vývojáři jsou proti skrytí obrázků, protože uživatel bude muset načíst obrázky i přesto, že jsou neviditelné.

Promluvme si o reaktivním typu

Typ by neměl být jedna velikost pro všechny. Jeden druh písma, který vypadá líbivě na oko na ploše, může být na vašem smartphonu hrozný. Typografie musí dodržovat stejná pravidla jako ostatní aspekty citlivého návrhu.

Nejdůležitějším aspektem citlivé typografie je délka čáry. Pro snadnou čitelnost je třeba optimalizovat typ založený na šířce obrazovky. Pravidlem pro webové stránky pro stolní počítače je, že mezi 50 a 75 znaky je ideální linka; pro mobilní zařízení je ideální jen 35 až 50 znaků.

Typ musí být také snadno čitelný vertikálně. Spousta stránek využívá linkový prostor, který je až 140% velikosti bodu obrazovky pro větší bloky textu. Je-li obrazovka menší, měl by být přidán větší prostor.

Dokonce i konkrétní typ písma, který je použit, je významný. Fantastická písma a novinkové písmo mají schopnost vypadat vizuálně přitažlivá na větších obrazovkách, přesto je těžké číst, pokud je velikost bodu malá. Tyto druhy písem by měly mít mezi nimi dostatek prostoru. Když pracujete s menšími velikostmi, je nejjednodušší používat normální styly bez patky a dokonce i tahy.

Na Stránky webového designu s vysokým obsahem tuku , můžete vidět spoustu těchto principů, které jsou dodržovány, což vede k dobré reakci. Mějte na paměti, že délka textu na ploše - je-li v průměru větší než ideální doporučení od 50 do 75 znaků - obsahuje text, který je čistý a snadno čitelný. Kromě toho je řádkový prostor také větší než velikost písma. V mobilních zařízeních je reakce webu ještě lepší: na displeji iPhone 5 byl počet znaků na řádku přibližně 67, což je o něco více než ideální pravidlo o rozmezí od 35 do 50 znaků.

Nezapomeňte na navigaci

Pokud jde o uživatelskou zkušenost - což je jeden z nejdůležitějších faktorů, o kterých by měli weboví návrháři přemýšlet - je navigace přímo na vrcholu priorit. Navigace musí být hladká a efektivní, aby byla zajištěna komfortní uživatelská zkušenost.

Efektivní reagující design musí zajistit to tím, že věnuje zvláštní pozornost specifické šířce daného prohlížeče. Webové stránky, které využívají citlivý design, budou obsahovat navigaci na webu v různých oblastech, což závisí na šířce prohlížeče. Jedním z nejlepších příkladů je Potravinový smysl Navigace na webu.

Bylo by chybou reagovat na design měřítku navigace webu na větší proporce na zařízeních s většími obrazovkami.

Recepce s citlivým designem

Takže nyní, když uslyšíte, že weboví designéři mluví o citlivém designu, budete vědět, že to není jen o tom, že webové stránky vypadají dobře a běží hladce na menších, mobilních obrazovkách. Budete vědět, že tento návrhový přístup je založen na principu vytváření webových stránek všech velikostí, které poskytují uživateli nejoptimálnější zkušenosti - bez ohledu na to, co používají k prohlížení webu.

Odpovědný design je stále relativně nový koncept, přinejmenším pro většinu lidí, kteří právě prohlíží webové stránky na internetu. To je důvod, proč se tolik lidí stále nemůže shodnout na tom, co dělá reagující design ... reagující design. Je to asi vidět všechno na mobilních obrazovkách? Jedná se pouze o dobu načítání a vysoce kvalitní obrázky, které potěší oko? Je to o čistém designu a snadno čitelných písmenech?

Je to všechno a víc. To jsou jen základy tohoto přístupu k návrhům webových stránek, avšak citlivý design se stále vyvíjí a mění, takže je pravděpodobné, že budou vzaty v úvahu i další prvky. Nakonec jde o zvýšení uživatelské zkušenosti, protože nikdo se nechce zabývat webovými stránkami, které jsou pomalé, rozmazané, těžko čitelné, přeplněné nebo obtížné se orientovat.

Odpovídá design pouze trend? Jaké jsou klíčové aspekty reagujícího návrhu? Dejte nám vědět své myšlenky v komentářích.

Doporučený snímek / náhled, přes s58y