Srovnání dvou různých přístupů s více zařízeními Web Design
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 k našim vedlejším srovnáním citlivého a přizpůsobivého návrhu webových stránek, věnujeme chvíli pozornost 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. Dotazy médií umožňují, aby se na stránky, které reagují na změnu, mohly dokonce změnit, pokud je 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 jednoduše nemáte úroveň kontroly, kterou byste měli, pokud byste tento kód vyvíjeli od začátku a brali v úvahu design, který byl zohledněn v nejbližších fázích tohoto 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 se bude jednat pouze o malé množství vývojových prací, můžete zvolit pouze přidání nových adaptivních hraničních bodů pro menší velikosti obrazovky a 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 stávající kód webu, ale jedna z nevýhod je v tom, ž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ž nemají žádný problém, protože jste pečlivě navrhli každý "vzhled" (což znamená, že každý bod zlomu), který bude dodán 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ůsobují se tak, aby vyhovovaly všem obrazovkám , včetně těch, které na trhu dnes nemusí být. 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ě , že mohou být postaveny tak, aby výkonnost nebyla prioritou, ale to není vlastnost samotného řešení, ale spíše odraz 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.