Odpovědný a adaptivní návrh webových stránek jsou oba způsoby vytváření webových stránek přátelských pro více zařízení, které dobře fungují na různých velikostech obrazovky. Zatímco reakce na webový design doporučujeme Google a je více populární z obou přístupů, obě tyto metody pro multi-device web design mají své silné stránky a jejich slabiny.
Podívejme se na rozdíly mezi citlivým a adaptivním webovým designem, konkrétně se zaměřujeme na tyto klíčové oblasti:
- Snadnost vývoje
- Úroveň kontroly nad projektem
- Šířka podpory zařízení / obrazovky
- Jak bude řešení v budoucnu příjemné
- Celková rychlost stahování a výkon webu
Některé definice
Předtím, než se dostaneme do našeho vedle sebe srovnávaného reaktivního a přizpůsobivého návrhu webových stránek, nechme chvíli podívat se na definici těchto dvou přístupů na vysoké úrovni.
Odpovědné webové stránky mají tekuté rozvržení, které se mění a přizpůsobuje bez ohledu na velikost obrazovky. Vyhledávací dotazy médií umožňují, aby se citlivé weby dokonce změnily, kdyby byl prohlížeč změněn.
Adaptivní návrh používá pevnou velikost založenou na předem stanovených bodech pro přerušení, aby poskytla nejvhodnější verzi rozvržení pro velikost obrazovky, která byla zjištěna při první načtení stránky.
S těmito širokými definicemi se zaměříme na naše klíčové oblasti zaměření.
Snadnost vývoje
Nejvýznamnějším rozdílem mezi citlivým a adaptivním webovým designem je to, že tato řešení jsou aplikována na webové stránky. Vzhledem k tomu, že reagující design vytváří zcela tekuté uspořádání, je nejlépe využíván na projektech, kde jste od začátku redigování webu. Pokus o dodatečné přizpůsobení stávajícího kódu webových stránek je často vyčerpávající záležitostí, protože prostě nemáte úroveň kontroly, kterou byste měli, pokud byste tento kód rozvíjeli od začátku a brali v úvahu design, který byl zohledněn v nejbližších fázích procesu. To znamená, že když upravujete stránky tak, aby byly citlivé, jste nuceni učinit kompromisy, aby zůstali v rámci existujícího kódového pole.
Pokud pracujete s existujícím webem s pevnou šířkou, přizpůsobivý přístup znamená, že můžete ponechat velikost stránky, která byla navržena, pro neporušenost a podle potřeby přidávat další adaptivní hraniční body. V některých případech, pokud je rozpočet projektu malý a pokud bude vyhovovat pouze malému množství vývojových prací, můžete zvolit pouze přidání nových adaptivních zarážkových prvků pro menší velikosti obrazovky nebo mobilních center. To znamená, že by bylo možné, aby větší obrazovky používaly všechny stejné rozvržení - možná verze 960 breakpoint, která byla původně určena původnímu webu.
Vzhůru k adaptivnímu přístupu je, že můžete lépe využívat kód existujícího webu, ale jednou z nevýhod je to, že vytváříte různé šablony rozvržení pro každou zarážku, kterou se rozhodnete podpořit. To bude mít dopad na pracovní zátěž potřebnou pro dlouhodobé vyvíjení a udržování tohoto řešení.
Řízení návrhu
Jednou ze silných stránek reaktivních webových stránek je, že jejich plynulost jim umožňuje přizpůsobit a podporovat všechny velikosti obrazovky, na rozdíl od předem nastavených hraničních bodů určených adaptivním přístupem. Realita je však, že citlivé stránky mohou vypadat skvěle u některých klíčových velikostí obrazovky (typicky velikosti, které odpovídají populárním zařízením dostupným na trhu), ale vizuální design se často rozpadá mezi těmito populárními rozlišeními.
Například web může vypadat skvěle při rozložení širokoúhlé obrazovky 1400 pixelů, střední velikosti obrazovky 960 pixelů a malá obrazovka vypadá na 480 pixelů, ale co mezi stavy mezi těmito velikostmi? Jako designér máte jen málo nebo žádnou kontrolu nad těmito mezerami a vizuální vzhled stránky v těchto velikostech je často méně než ideální.
S přizpůsobivým webem máte mnohem více designové kontroly nad různými rozvrženími, které jsou používány, protože jsou pevné velikosti založené na vašich stanovených hraničních bodech. Tyto nepříznivé mezilidské stavy už nejsou problém, protože jste pečlivě navrhli každý, "pohled" (což znamená, že každá obrazovka bodu zlomu), která bude dodána návštěvníkům.
Jak atraktivní, protože tato úroveň kontroly designu může znít, musíte si uvědomit, že to přijde za cenu. Ano, máte plnou kontrolu nad vzhledu každé zlomové čáry, ale to znamená, že musíte investovat projektový čas potřebný pro návrh každého z těchto jedinečných rozvržení. Čím více breakpointu se rozhodnete navrhnout, tím více času budete muset utratit v tomto procesu.
Šířka podpory
Jak reagující, tak i adaptivní webový design mají velmi robustní podporu, a to zejména v moderních prohlížečích.
Adaptivní webové stránky vyžadují komponenty na straně serveru nebo Javascript pro detekci velikosti obrazovky. Je zřejmé, že pokud adaptivní web vyžaduje Javascript, znamená to, že musí mít prohlížeč zapnutý, aby fungoval správně. To nemusí být pro vás velkou záležitostí, protože většina lidí bude mít ve svých prohlížečích Javascript, ale kdykoli má stránka kritickou závislost na cokoliv, mělo by to být poznamenáno.
Odpovědné webové stránky a mediální dotazy, které jim napomohou, budou fungovat ve všech moderních prohlížečích. Jediné problémy, které budete mít, jsou s nejstaršími verzemi aplikace Internet Explorer, protože verze 8 a níže nepodporují dotazy médií. Chcete-li toto vyřešit, často se používá polyvalentní Javascript, což znamená, že zde existuje i závislost na Javascriptu, přinejmenším pro ty zastaralé verze IE.Znovu to nemusí být pro vás příliš znepokojivé, zvláště pokud vaše analytické služby ukazují, že neobdržíte mnoho návštěvníků s použitím starších verzí prohlížeče.
Budoucí přívětivost
Tekutá povaha citlivých webových stránek jim dává přednost před adaptivními stránkami, pokud jde o budoucí přívětivost. Je tomu tak proto, že tyto citlivé weby nejsou postaveny tak, aby vyhovovaly pouze dříve nastavené sadě bodů zlomů. Přizpůsobí se všechny obrazovky , včetně těch, které nemusí být dnes na trhu. To znamená, že reagující stránky nebudou muset být "fixní", pokud se náhle objeví nové rozlišení obrazovky.
Když se podíváme na neuvěřitelnou rozmanitost v oblasti zařízení (od srpna 2015 bylo na trhu více než 24 000 odlišných zařízení Android), má místo, které se snaží udělat tolik, aby vyhovovalo této široké škále obrazovek, což je pro budoucí přívětivost důležité. Je to proto, že se tato krajina v budoucnu pravděpodobně nebude méně rozmanitá, což znamená, že návrh na konkrétní obrazovky nebo velikosti se stane nemožným, pokud jsme dosud tuto skutečnost nedosáhli.
Na druhé straně tohoto srovnávacího scénáře, pokud je web přizpůsobivý a nevztahuje se na ně nová řešení, která se mohou na trhu stát důležitá, pak byste mohli být nuceni přidat tento zlomový bod na stránky, které jste vytvořili. To přidává projektový a vývojový čas do projektů, což znamená, že tyto adaptivní lokality musí být trvale monitorovány, aby se zajistilo, že na trh nebudou zavedeny žádné nové hraniční body, které musí být přidány na místo. Opět platí, že pokud je rozmanitost zařízení to, co je, neustálé zkontrolování nových velikostí a případné přizpůsobení se novým hraničním bodům je neustálou výzvou, která bude mít vliv na práci, kterou potřebujete k podpoře webu, a náklady na tuto údržbu společnost nebo organizace, pro které je web určen.
Výkon
Odpovědný návrh webových stránek je již dlouho obviňován (nespravedlivě v mnoha případech), že je špatným řešením z hlediska rychlosti / výkonu stahování. To je z velké části způsobeno skutečností, že v počátcích tohoto přístupu mnoho webových designérů jednoduše upoutalo dotazy na malé obrazovky na existující CSS webu. To způsobilo, že obrazy a zdroje určené pro větší obrazovky byly doručovány do všech zařízení, i když tyto menší obrazovky je nepoužívaly v jejich konečném uspořádání. Odpovědný design je od té doby dlouhou cestou a skutečnost spočívá v tom, že kvalitní stránky, které reagují na kvalitu, dnes netrpí problémy s výkonem.
Pomalé stahování rychlostí a nafouknuté webové stránky nejsou problémem s citlivým webem - je to problém, který lze nalézt na všech webových stránkách. Obrázky, které jsou příliš těžké, přenášejí ze sociálních médií, nadměrné skripty a další a váží stránky dolů, ale citlivé i adaptivní webové stránky mohou být postaveny tak, aby byly rychlé. Samozřejmě , mohou být také postaveny tak, aby výkonnost nebyla prioritou, ale to není rysem samotného řešení, ale spíše odrazem týmu, který se podílel na vývoji samotného místa.
Za rozložením
Jedním z nejdůležitějších aspektů adaptivního návrhu webových stránek je to, že nemáte kontrolu nad designem stránek pro nastavené body stop, ale také zdroje, které jsou dodávány pro tyto verze stránek. Například to znamená, že obrazy sítnice mohou být odesílány pouze do retinových zařízení, zatímco obrazovky bez sítnice získají vhodnější obrazy, které jsou menší ve velikosti souboru. Jiné zdroje webových stránek (soubory Javascriptu, styly CSS atd.) Mohou být chytře dodávány pouze tehdy, když jsou potřebné a budou použity.
Toto použití adaptivního webového designu jde daleko za jednoduchou rovnici "pokud jste dodatečně přizpůsobili webové stránky, adaptivní může být snadnější přístup." Všechny weby, včetně úplného přepracování, mohou mít prospěch z chytřejšího přístupu k přizpůsobenému zážitku.
Tento scénář ukazuje nuancovanou povahu této "reaktivní versus adaptivní" debaty. I když je pravda, že adaptivní přístup může být vhodnější než reagovat na úpravy na místě, může to být také skvělé řešení pro úplné redesigny. Stejně tak v některých případech může být přístupný přístupový přístup k existujícímu kódovému serveru existujícího webu, který dává tomuto webu veškeré výhody plně reagujícího přístupu.
Který přístup je lepší?
Pokud jde o reaktivní versus adaptivní návrh webových stránek, neexistuje jasný "vítěz", i když reagující je určitě populárnější přístup. Ve skutečnosti "lepší" přístup závisí na potřebách konkrétního projektu. Navíc to nemusí být "jedna nebo jedna" situace. Existuje mnoho webových profesionálů, kteří vytvářejí webové stránky, které kombinují to nejlepší z citlivého webového designu (šířky kapalin, budoucí podpory) se silnými stránkami adaptivního návrhu (lepší kontrola návrhu, inteligentní načítání zdrojů webu).
Běžně známý jako RESS (Responsive Web Design with Side Side Components), tento přístup ukazuje, že opravdu neexistuje žádná "jedna velikost pro všechny řešení". Jak citlivý webový design, tak adaptivní mají své silné stránky a jejich výzvy, takže je třeba určit, bude fungovat nejlépe pro váš konkrétní projekt nebo pokud hybridní řešení může skutečně vyhovovat vám nejlépe.
