Procházím internet každý den na více zařízeních. Používám Macbook Pro, iMac, PC, iPad, iPhone a dokonce i můj televizor. Takže mě to opravdu znepokojuje, když vidím webové stránky, které nejsou optimalizovány pro větší rozlišení obrazovky, nebo to trvá dvě minuty na načítání mobilního zařízení.
Všichni jsme přijali koncept citlivého designu. Velmi málo lidí proti tomu tvrdí. Jediný přesvědčivý výsledek, který jsem v poslední době slyšel, je, že klient není ochoten zaplatit za prodloužený čas. Ale stejně jako u každé nové praxe, mýty vyrostly, aby to prokázaly.
Podívejme se, jestli můžeme popsat některé z těchto mylných představ.
Ano, mobilní web vybuchne a ano, to je hnací síla, která reaguje na citlivý design, ale když přemýšlíme o citlivém designu, musíme zvážit víc než jen mobilní. Se zavedením sítnicových displejů a prohlížečů videohry uživatelé internetu nyní prohlížejí webové stránky na větších rozlišeních a v mnoha různých kontextech.
Při navrhování a vývoji citlivých webových stránek se snažte zohlednit různé kontexty uživatelů. Musíte přemýšlet o tom, jaké zařízení uživatel používá: je uživatel na mobilním zařízení nebo doma před televizorem? Musíte přemýšlet o tom, kde se uživatel nachází: je uživatel v řadě v obchodě s potravinami nebo kempování v divočině? Dobrý obsah znamená nic, pokud váš web trvá deset minut načtení, zatímco uživatelé sedí na pláži s margaritou.
Obsah je vše, ale kontext je všude a je to něco, za které nemáte vůbec žádnou kontrolu. To je důvod, proč by měl váš obsah realisticky měřit na jakékoli rozlišení, velké nebo malé. Máme k dispozici sadu nástrojů, které nám umožní manipulovat s rozvržením, optimalizovat velikost textu a zvýšit výkon v jakémkoli kontextu, takže si ho pamatujte.
Zapamatujte si, že kontext se mění po celou dobu, a proto je důležité, aby byla rovnováha mezi vizuálním uspořádáním, potřebami uživatele a výkonem při přiblížení se k citlivé konstrukci. Nejde jen o mobilní zařízení.
Pravděpodobně jsem tvrdil, že citlivý webový design nebude fungovat pro každý projekt a že záleží na použití. No, nedávno jsem pozměnil svůj názor a pevně věřím, že pokud budeme uživatelé zaměřeni na designery a vývojáře, musíme přistupovat ke každému projektu s citlivým designem.
Webové stránky s pevnou šířkou mohou být omezeny na větších a menších rozlišeních obrazovky. Důsledkem je, že naše webové stránky by měly být přístupné všem bez ohledu na to, jaké rozlišení zařízení nebo obrazovky používají bez omezení.
Zaznamenal jsem trend, který se objevuje v průmyslu, kde návrháři a vývojáři vytvářejí citlivé webové stránky, které se váží pouze k některým rozlišením zařízení, a já jsem za to také vinen. Tři nejobvyklejší zařízení jsou samozřejmě notebooky / stolní počítače, iPady a iPhony (nebo jiné mobilní zařízení). Jako konstruktéři potřebujeme uvědomit si, že citlivý design je o bodových bodech návrhu a činí obsah čitelný a přístupný všem, nejen uživatelům určitých zařízení.
To znamená, že pokud vytváříte webové stránky v softwarovém programu, je důležité mít nějaký rámec s hraničními body, z nichž byste mohli pracovat. Navrhuji vytvořit vlastní. Optimalizujte rozvržení podle obsahu. Nejlepší způsob, jak zjistit, které zlomové body fungují nejlépe, je nakreslit několik drátových rámů jako první, abyste získali nápad, a poté můžete začít s položením pixelů ve vašem softwaru, který si vyberete. Ujistěte se, že při frézování a navrhování vyhotovíte stejnou mřížku.
Pokud jste jako já, kódujete své dráty a vytvoříte živý prototyp. To mi pomohlo hodně s mým reagujícím workflow, protože mohu vytvořit tekutý mockup a přidat hraniční body k designu jako design breaks místo toho, aby se snažil spěchat pixely ve Photoshopu.
Jeden z největších problémů, které jsem zaznamenal na mnoha citlivých webových stránkách, je, že typografie je hodena vlkům, když se návrháři a vývojáři rozhodnou používat body přerušení zařízení přes hranice návrhu. Podle mého názoru výběr zařízení přes design ukazuje úplné ignorování publikovaného obsahu a uživatele spotřebovávajícího tento obsah. Obsah by si měl zachovat čitelnost, dokud se nebude muset přizpůsobit tak, aby byla zachována čitelnost. Obsah bude vždy králem a přístupnost a čitelnost obsahu by měla být vždy nejvyšší prioritou.
Jedním ze způsobů, kterými se mi líbí zachovat čitelnost obsahu v citlivém designu, je použití relativních jednotek jako ems pro velikost písma, polstrování, okraje a rozvržení. Odpovědný design je o proporcionálních rozvrženích a podle mého názoru jsou ems perfektní.
Ems jsou relativní jednotky, které jsou škálovatelné na velikost písma rodičovských prvků, mohou vám ušetřit spoustu času a potíží a pomáhají udržovat strukturu celého rozvržení. Co to znamená, že se ptáte? Znamená to, že se základní velikost písma zvyšuje nebo snižuje, rozložení se vyrovnává rovnoměrně, aniž by se nic zvládlo.
Zde je příklad, řekněme, že jsme našli dvě konstrukční hranice, jednu pro velmi velký stolní monitor v super rozlišení a jeden pro malou tabletu. Řekněme také, že základní velikost písma je 16 pixelů, což se rovná 1,0, a při zobrazení stránky s rozlišením 3840 x 2160 (super rozlišení) narazíme na základní velikost písma až na 22 pixelů a snížíme velikost základní velikosti písma 14 pixelů s rozlišením 800 x 600 (malý laptop / tablet). Právě jsme dramaticky změnili velikost typu a rozvržení našich webových stránek na dvě určené hraniční body, jednu velkou a jednu malou. Nadpis na 1.4m s rozměrem písma 22px pro větší rozlišení znamená, že 1.4m se rovná 30.8px a u menšího písma základní velikosti 14px, 1.4m by se rovnalo 19.6px. Přestože se naše velikost písma dramaticky zvětšila na 3840 x 2160, nemusíte se obávat, že by rozložení rozložení bylo také upraveno. Řekněme, že náš obsahový prvek měl šířku 50cm. Při rozlišení 800 x 600, která by byla 700 pixelů, ale při rozlišení 3840 x 2160 by to bylo 1100 pixelů. Naše polstrování a okraje by se také přizpůsobily. Při větším rozlišení s velikostí písma a uspořádáním v ems umožnil náš návrh měřítku proporcionálně, což činí náš obsah dostupnější a čitelnější.
Účelem reagujícího návrhu je zpřístupnit váš obsah všem, dokonce i osobám se zdravotním postižením, ve všech rozlišeních a zařízeních na obrazovce. Skrývání obsahu není nikdy dobrý nápad, a je pravděpodobné, že pokud ho musíte skrýt, nepotřebujete, aby to začalo. Skrývání obsahu je nečitelné pro čtečky obrazovky a nyní děláte váš obsah nepřístupný pro ty, kteří mají vizuální nebo kognitivní postižení. Mějte na paměti, že obsah by měl být univerzální ve všech zařízeních, nepopírat uživatele tím, že omezí to, co mohou zobrazit na samostatném zařízení.
To bylo řečeno, stále mám několik případů použití, kde zobrazení: žádný; je v pořádku. Většinou všechny případy použití se zabývají nějakou navigací a používám displej: žádný; na navigačních prvcích, které mění formu na různých zařízeních. Nikdy není dobrý nápad omezovat nebo skrývat obsah na různých zařízeních, protože jste pravděpodobně založili toto rozhodnutí na předpokladu a někde uživatel někde bude mít velmi špatné zkušenosti.
Existuje řada webových stránek, které jsem v poslední době viděl, které projevily nedostatek empatie vůči uživatelům s nízkou šířkou pásma. Většina těchto stránek má stejné společné, velké obrázky a velké knihovny jazyka JavaScript a mnoho těchto webových stránek mohlo být optimalizováno, pokud byly navrženy s mobilním prvním přístupem.
Vzhledem k tomu, že stále existuje mnoho diskusí o citlivých obrázcích, je těžké, aby se někdo zavázal k jednomu řešení. Rozumím dilematu, ale čekání na perfektní řešení, které je standardem ve všech prohlížečích a zařízeních, nedělá vaše aktuální webové stránky snadněji na zařízení s omezenou šířkou pásma. Najděte řešení, které nejlépe řeší váš problém a spusťte s ním. Nevyhledávání řešení znamená problémy s výkonem pro každého a to úplně znemožňuje účel odpovědného designu.
Velké knihovny jazyka JavaScript mohou také způsobit problémy na menších zařízeních. Zkuste najít způsob, jak je zavolat podmíněně na základě rozlišení obrazovky nebo typu zařízení. Výkon by neměl být nápadem, pokud jde o citlivý design.
Web vybuchl as příchodem technologií pro mobilní telefony a smartphony můžeme přistupovat k obsahu kdekoli a v jakémkoli kontextu. Je důležité se ujistit, že můžeme oslovit všechny naše uživatele a dát jim, co chtějí, když to chtějí. Odpovědný design je velmi nová technika a podle mého názoru je to dokonalá technika pro sjednocení našeho obsahu na webu.
Jaké další mýty o citlivém designu byste rádi odhalili? Existují nějaké nevýhody pro citlivý design? Dejte nám vědět v komentářích.
Doporučený snímek / náhled, citlivý webový obrázek přes Shutterstock.