Citlivý design: Proč to děláte špatně

Citlivý design není výstřelek, který vznikl díky skvělé technice CSS, je to odpověď na problém. Vždy si to pamatujte a neustále se ptejte, zda opravdu řešíte tento problém. Pokud používáte kopírování a vkládání k vložení bodů mediálních dotazů, může být vaše řešení chybné.

Pojďme diskutovat o tom, proč existují mediální dotazy a jak je můžeme využít k tomu, abychom skutečně vyřešili všudypřítomný všudypřítomný web. Pojďme mluvit o tom, proč byste měli nechat svůj obsah určovat zarážky rozložení, ne hypotetické velikosti obrazovky.

Tento článek je součástí naší série „Pohled za hranice designu počítačů“, která vám byla poskytnuta ve spolupráci se společností Heart Internet VPS.

Idea za mediálními dotazy

Abychom mohli tuto debatu zahájit správně, je nutné diskutovat o tom, proč se mediální dotazy najednou staly tak populární. Odpověď je samozřejmě taková, že termín „responzivní design“, který vytvořil Ethan Marcotte, je fantastickým způsobem, jak řešit stále rostoucí problém webových designérů.

Zatímco všichni chvastali dál a dál o tom, jak „mobilní web“ předčí tradiční, revoluce, která se odehrála, byla mnohem drastickější: web se stal všudypřítomný.

Tento „problém“ je skvělý pro celý svět, ale pro nás skutečnou bolest hlavy. V posledním desetiletí se celosvětový web změnil v něco nového. Už to není vázáno zdmi, které jsme dříve založili. Už jsem to řekl dříve, ale stojí za to opakovat. Zatímco všichni chvastali dál a dál o tom, jak „mobilní web“ předčí tradiční, revoluce, která se odehrála, byla mnohem drastickější: web se stal všudypřítomný.

V tuto chvíli nemáme přístup k webu z jediného bodu. Nevzdali jsme naše notebooky ve prospěch chytrých telefonů, jak předpovídali „odborníci“. Místo toho je web všude, kde jsme. Nejde jen o naše telefony a počítače, ale také o tablety, iPod, herní systémy, televizory a dokonce i auta.

Tento trend bude pokračovat pouze s postupem času. Responzivní design nás přivedl přes období vytváření samostatných mobilních webů a do doby, kdy vyvíjíme jeden web, který se vyvíjí a přizpůsobuje zařízení, na kterém je prohlížen. Pomocí mediálních dotazů můžeme představit konkrétní CSS pro libovolný počet různých velikostí výřezu a zajistit, aby každý měl nejlepší možný zážitek.

Problém s citlivým designem

Výše uvedená část není polohistorickým výkřikem určeným k vyplnění prostoru, je to důležitý pohled na cíle, kterých má responzivní design dosáhnout. Otázka se pak stává, splňuje tyto cíle? Řeší responzivní design adekvátně problém všudypřítomnosti?

Odpověď je komplikovaná, přinejlepším mohu říci, „záleží na tom, jak to děláte.“ To je matoucí prohlášení, že? Citlivý design je jednoduchý: pomocí mediálních dotazů můžete obsluhovat vlastní CSS na různé velikosti výřezů. Takto to každý přistupuje, že? Jak tedy může být správný a špatný způsob?

Složitost nastává, když začneme diskutovat o klíčové části této techniky: jaké mediální dotazy bych měl použít? Nebo jinými slovy, na které „body zlomu“ bych měl cílit pro vlastní CSS? Aktuální populární odpověď se dá očekávat počínaje nejlepšími „mobilními“ zařízeními v okolí: iPhone a iPad (cue angry user users comments). Z těchto archetypů vytváříme tzv. „Obecné“ velikosti smartphonu a tabletu. Poté se přesuneme nahoru a adresujeme notebooky a malé stolní počítače a nakonec velké obrazovky. Standardní sada mediálních dotazů, jako je tato, od CSS-Tricks, má obvykle devět nebo deset předem stanovených bodů přerušení.

Co kdybychom se zaměřili na potřeby konkrétního designu namísto hypotetického případu použití zařízení? Co kdybychom vytvořili rozvržení, která prostě fungovala všude?

Abychom byli spravedliví, tento systém do jisté míry funguje. Všichni jsme viděli mnoho skvělých responzivních webů vytvořených pomocí sady podobné výše uvedenému Coyierovi. Nemohu si však pomoci, ale domnívám se, že to nějakým způsobem opakuje stejnou chybu, jakou jsme udělali navrhováním „mobilních webů“ před několika lety. Celé zaměření je zde na zařízení, které web prohlíží. Než začneme stavět stránky, máme na paměti tyto body přerušení.

Ale zařízení se mění. Již jsme zjistili, že web je připojen téměř ke všemu pomocí vypínače, tak proč znovu klademe tolik důrazu na současné běžné velikosti obrazovky? Existuje lepší alternativa? Co kdybychom se zaměřili na potřeby konkrétního designu namísto hypotetického případu použití zařízení? Co kdybychom vytvořili rozvržení, která prostě fungovala všude?

Citlivý design zaměřený na obsah

Výše uvedené problémy s předem stanovenými dotazy na média se mi vyskytly pouze tehdy, když jsem se kopal a opravdu jsem začal produkovat responzivní práci. Teoreticky jsou standardní návrhy skvělé, ale jakmile je použijete na složitý design, zjistíte, že tyto body přerušení ne vždy pokrývají. Problém, jak designéři Boston Globe zjistili, že se rychle zjistilo, jakmile web začal, je v tom, že problémy se objevují „mezitím“ (pro informaci, tento projekt je fantastický a problémy s rozvržením byly do značné míry vyřešeny). Věci se stanou chaotickými, když je design ve velikosti, kterou jste nezohlednili, a po tom, co jste se rozhodli, musíte jít dovnitř a napravit díry.

Říkám to jako vášnivý fanoušek Apple: přestaňte navrhovat webové stránky pro iPhone.

Moje otázka zní, proč nezačneme tam? Proč bychom neměli nechat na projektu se sadou zařízení a v důsledku toho na dotazy médií, proč nenecháme design? Každé rozložení webové stránky má místo, kde velikost prohlížeče snižuje jeho integritu. Naším úkolem jako designérů by mělo být s ohledem na problém všudypřítomnosti najít tuto velikost a zohlednit ji, pak pěnit, oplachovat a opakovat, dokud se nezohlední všechny slabé stránky.

Říkám to jako vášnivý fanoušek Apple: přestaňte navrhovat webové stránky pro iPhone. Místo toho vytvořte web, který si zachová integritu, protože jeho velikost výřezu se zmenší na jakýkoli proveditelný stav. Mějte na paměti konkrétní zařízení jako vodítko pro váš návrh (příklad: menší zařízení mají tendenci být dotyková, takže vytvářejí odkazy velké), ale nenasazujte své rolety a nedívejte se na větší obrázek: že váš design by měl vypadat dobře na jakékoli obrazovce.

Nový pracovní postup

Jak tedy vypadá pracovní postup designu reagující na obsah? Je to jednodušší, než si myslíte. Samozřejmě potřebujete nějaký výchozí bod. Pokud chcete začít mobilní a jít nahoru, skvělé. Pokud chcete začít velký a sestupovat, také skvělý. Osobně považuji za velmi obtížné opravdu se do návrhu pustit a udělat to správně, pokud začínám na mobilní úrovni, ale existuje mnoho solidních argumentů, jak to udělat.

Když sledujete tento pracovní postup, stane se něco magického.

Hypoteticky, řekněme, že jste začali s velkým, 1020px širokým webem. Vyzkoušejte to na největší obrazovce, na které máte ruce a ujistěte se, že vypadá skvěle. Nyní přetáhněte okno a zmenšete jej, dokud nebude design ošklivý. Je tu váš první bod zlomu. Nastavte mediální dotaz pro tento bod a opravte vše, co potřebujete řešit. Po dokončení uchopte toto okno a najděte další bod ošklivosti. Tyto kroky opakujte, dokud nejste spokojeni s rozsahem, který jste uvedli.

Ale co iPad? A co Kindle Fire nebo nejnovější pokus Samsungu být relevantní? Když sledujete tento pracovní postup, stane se něco magického. Právě jste to udělali tak, aby rozložení vypadalo dobře téměř v jakékoli velikosti. Pokud jste to udělali správně, pak, když to vytáhnete na telefonu nebo tabletu, bude to vypadat skvěle.

Pouze rozvržení
Mějte na paměti, že tato diskuse se týká pouze poměrů rozvržení. Absolutně se nedostanete z testování funkcí v různých prohlížečích a zařízeních. Citlivý design nijak nebere v úvahu skutečnost, že různé prohlížeče interpretují HTML, CSS a JavaScript odlišně.

Závěr

Abychom to shrnuli, dotazy na média a responzivní design nám poskytují neuvěřitelně silný nástroj, který odpovídá za skutečnost, že webové stránky jsou zobrazovány všemi druhy obrazovek a velikostí výřezů. Jakmile však začneme upínat naše návrhy na hrst zařízení, jsme hned tam, kde jsme začali. Vaším cílem by místo toho mělo být sestavení rozvržení, které je tak univerzální, že zvládne téměř jakoukoli velikost výřezu, která se na něj hodí.

To je teoreticky pěkné, ale kde je příklad? Skok z této diskuse přišel z nedávného pokusu o vybudování responzivní obrazové galerie. Podívejte se na tento článek a podívejte se, jak by se pracovní tok návrhu s responzivním designem mohl podívat ve volné přírodě.