3 reaktivní designové katastrofy - a jak se jim vyhnout
Odpovědné konstrukční metody jsou velmi užitečné pro vývojáře, protože nám umožňují poslouchat obsah nejširšího rozsahu zařízení, aniž bychom museli udržovat oddělené verze webu a bez některých negativních nevýhod jiných metod, jako je škálování a rozložení tekutin.
Tento článek zvýrazní top 3 chyby, které se návrháři setkávají s citlivými návrhy a poskytnou některé strategie, jak se vyhnout těmto chybám.
Změna měřítka vs. tekutina vs. reagující
Tam je mnoho zmatků nad těmito termíny a designéři často nesprávně používají je zaměnitelně. Ve skutečnosti jsou každý z nich zřetelnými evolučními kroky v technice rozvržení, které se v průběhu času objevily v souladu s pokroky v technologii.
Rozvržení měřítka jsou navrženy tak, aby měřily každý prvek ve vztahu k ostatním prvkům . Jsou citlivé v tom smyslu, že budou měnit obsah dynamicky v závislosti na změnách velikosti výřezu. Samotné rozvržení zůstává statické, mění se velikost každého prvku, aby se zachoval konzistentní vzhled.
Nad: příklad rozvržení v různých rozměrech: návrhová obětovost čitelnost pro konzistenci.
Rozložení kapaliny se liší, protože měří velikost kontejneru vzhledem k velikosti výřezu . Toho lze dosáhnout použitím relativních jednotek, jako je ems, k překonání problému zmenšujícího se textu. Návrh může být rozdělen podle toho, jak ho uživatel škáluje.
Výše: příklad uspořádání tekutin v různých rozlišeních: konstrukce obětuje konzistenci pro čitelnost.
Odpovědné rozvržení nic nemění. Namísto toho se změní, co se zobrazuje v závislosti na velikosti výřezu.
Nahoře: příklad reaktivního uspořádání s různými rozlišeními.
Disaster 1) Obalování nabídek
Používáte-li navigační panel v horní části stránky, očekává se, že v případě, že je stránka zobrazena na malé obrazovce, je tento návrh reagovat na kompaktnější formát. To však vždy nefunguje dokonale, pokud je oblast zobrazení větší než bod zlomu, ale příliš malá, aby zobrazovala všechny položky nabídky v jediném řádku. Výsledkem je nabídka, která obtéká.
Existuje několik způsobů, jak vyřešit tento problém. Prvním je snížení počtu položek zobrazovaných horizontálně na navigačním panelu navrácením do kategorií a podkategorií. Rozbalovací položky pak můžete použít k zobrazení podkategorií při výběru kategorie.
Druhou možností je změnit bod zlomu na nižší hodnotu. Skutečné číslo, které chcete použít, je šířka, při které váš navigační panel začne selhat, nikoliv konkrétní velikost zařízení.
Třetím způsobem je použití jiné nabídky pro zařízení, jako je posuvná zásuvka.
Disaster 2) Použití obrazů s pevnou šířkou
Obsahové oblasti jsou obvykle nastaveny na velikost vzhledem k výřezu. Pokud je obraz s pevnou šířkou větší než velikost oblasti, dojde k oříznutí obrázku.
Nad: příklad špatného obrazu s pevnou šířkou, který je příliš velký: nyní má posuvníky a obsah je vykládán mimo obrazovku.
Tento problém se můžete vyhnout pomocí relativních jednotek pro nastavení šířky obrázku nebo pokud používáte rámec, který jej podporuje (například Bootstrap), můžete použít třídu reagujícího obrazu (např.: Class = "img-responsive" ).
Nad: Stejný prvek s přístupem citlivé na třídu obrazu: nyní je pryč.
Katastrofa 3) Deformace prvku
Toto je trochu nejasné, ale v podstatě to, co se stane, když je rozložení zobrazeno na malém výřezu, je, že všechny neošetřené sloupce se chovají jako řádky. To je problém, protože zkreslení obsahu neúmyslně mění hierarchii vašeho návrhu.
Nad: sloupec se stává řádkem, který zkresluje obsah.
Řešení je zřejmé, přesto je překvapující, s kolik lidí se s tím potýká: jednoduše nastavte výšku, šířku a polstrování prvku explicitně. Pokud se pohybuje mimo pozici a pokrývá další prvky, můžete ji donutit, aby se tam, kde chcete, zabalil do rozdílu a nastavení okrajů.
Plánování pomáhá vyhnout se chybám
Tento článek se zabýval pouze třemi nejčastěji se vyskytujícími reaktivními katastrofickými projevy, ale existuje spousta dalších způsobů, jak se vyhnout chybnému návrhu. Zabránění chybám není příliš složité. Moderní prohlížeče mají vestavěné testy přizpůsobivého rozvržení, takže plánujte svůj design dobře a často testujte.