Porovnanie dvoch rôznych prístupov k dizajnu viacerých zariadení
Odozva a prispôsobivý dizajn webov sú obidve spôsoby vytvárania webových stránok, ktoré sú priateľské pre viaceré zariadenia a fungujú dobre na rôznych veľkostiach obrazovky. Zatiaľ čo odporúčaný dizajn webových stránok odporúča spoločnosť Google a je viac populárny z obidvoch prístupov, obe tieto metódy pre dizajn webových stránok s viacerými zariadeniami majú svoje silné a slabé stránky.
Poďme sa pozrieť na rozdiely medzi citlivým a prispôsobivým dizajnom webov, ktoré sa zameriavajú najmä na tieto kľúčové oblasti:
- Jednoduchosť vývoja
- Úroveň kontroly nad dizajnom
- Šírka podpory zariadenia / obrazovky
- Ako bude riešenie v budúcnosti priateľské
- Celková rýchlosť sťahovania a výkonnosť stránok
Niektoré definície
Predtým, než sa dostaneme do porovnávania odpovedajúcich a prispôsobivých návrhov webových stránok, poďme sa pozrieť na vymedzenie týchto dvoch prístupov na vysokej úrovni.
Odpovedajúce webové stránky majú rozloženie tekutín, ktoré sa menia a prispôsobujú bez ohľadu na veľkosť obrazovky, ktorá sa používa. Mediálne otázky umožňujú citlivým webovým stránkam dokonca zmeniť "za behu", ak je veľkosť prehliadača zmenená.
Adaptívny dizajn používa pevné veľkosti založené na vopred určených bodoch zlomu, aby poskytol najvhodnejšiu verziu rozloženia pre veľkosť obrazovky, ktorá sa zistí pri prvom načítaní stránky.
S týmito širokými definíciami sa obráťme na naše kľúčové oblasti zamerania.
Jednoduchosť rozvoja
Najvýraznejším rozdielom medzi prispôsobivým a prispôsobivým dizajnom webov je to, že tieto riešenia sa uplatňujú na webových stránkach. Vzhľadom na to, že reagujúci dizajn vytvára úplne tekuté rozloženie, najlepšie sa používa na projektoch, v ktorých preorientujete miesto od základov . Pokúšať sa aktualizovať kód existujúceho webu, aby ste reagovali, je často vyčerpávajúca záležitosť, pretože jednoducho nemáte úroveň kontroly, ktorú by ste mali, ak by ste tento kód vyvíjali od začiatku a zohľadňovali by ste zodpovedajúci dizajn v najskorších štádiách tohto procesu , To znamená, že keď uprednostňujete stránku, aby ste boli citliví, ste nútení robiť kompromisy, aby ste zostali v rámci existujúcej základne.
Ak pracujete s existujúcou webovou stránkou s pevnou šírkou, prispôsobivý prístup znamená, že môžete ponechať veľkosť stránky, ktorá bola navrhnutá, aby bola neporušená a podľa potreby pridať ďalšie adaptačné body prerušenia. V niektorých prípadoch, ak je rozpočet projektu malý a ak bude vyhovovať len malému množstvu vývojových prác, môžete zvoliť, aby ste pridali iba nové adaptačné hraničné body pre menšie veľkosti obrazovky alebo mobilných zostáv. To znamená, že by ste umožnili väčším obrazovkám používať to isté rozloženie - možno verziu 960 bodu zlomu, čo bolo pravdepodobne pôvodne určené pre túto lokalitu.
Nárast adaptívneho prístupu spočíva v tom, že môžete lepšie využiť existujúci kód lokality, ale jedným z nedostatkov je to, že vytvárate rôzne šablóny rozloženia pre každú zarážku, ktorú sa rozhodnete podporiť. To bude mať vplyv na pracovné zaťaženie potrebné na dlhodobé vyvinutie a udržanie tohto riešenia.
Kontrola návrhu
Jednou zo stránok citlivých webových stránok je to, že ich plynulosť im umožňuje prispôsobiť sa a podporovať všetky veľkosti obrazovky, na rozdiel od prednastavených hraničných bodov stanovených v adaptačnom prístupe. Pravdou však je, že reagujúce lokality môžu vyzerať skvelo pri určitých veľkostiach kľúčových obrazoviek (typicky veľkosti, ktoré zodpovedajú populárnym zariadeniam dostupným na trhu), ale vizuálny dizajn sa často rozpadá medzi týmito obľúbenými rozlíšením.
Napríklad stránka môže vyzerať skvelo pri rozložení širokouhlých obrazoviek 1400 pixelov, strednej veľkosti obrazovky 960 pixelov a malom rozlíšení obrazovky 480 pixelov, ale čo medzi týmito stavmi medzi týmito veľkosťami? Ako dizajnér máte malú alebo žiadnu kontrolu nad týmito rozmermi a vizuálny vzhľad stránky v týchto veľkostiach je často menej ako ideálny.
Pomocou prispôsobivej webovej stránky máte oveľa väčšiu kontrolu nad rôznymi rozloženiami, ktoré sa používajú, pretože sú to pevné veľkosti založené na vašich stanovených hraničných bodoch. Tieto nepríjemné medziľudské stavy už nie sú problémom, pretože ste starostlivo navrhli každý "vzhľad" (znamenajúci každý zobrazovací bod), ktorý bude dodaný návštevníkom.
Keďže táto úroveň kontroly dizajnu môže byť príťažlivá, musíte si uvedomiť, že to prichádza za cenu. Áno, máte plnú kontrolu nad vzhľadom každého zlomu, ale to znamená, že musíte investovať projektový čas potrebný na dizajn pre každé z týchto jedinečných rozložení. Čím viac breakpointov sa rozhodnete navrhnúť, tým viac času budete musieť minúť na tento proces.
Šírka podpory
Obozretný a prispôsobivý dizajn webových stránok má pomerne silnú podporu, a to najmä v moderných prehliadačoch.
Adaptívne webové stránky vyžadujú komponenty na strane servera alebo Javascript pre detekciu veľkosti obrazovky. Je zrejmé, že ak adaptívna lokalita vyžaduje Javascript, znamená to, že prehliadač musí mať zapnutú funkciu, aby táto stránka fungovala správne. To nemusí byť pre vás veľkým problémom, pretože väčšina ľudí bude mať vo svojom prehliadači Javascript, ale kedykoľvek má stránka kritickú závislosť na čomkoľvek, malo by to byť poznamenané.
Citlivé webové stránky a mediálne dopyty, ktoré ich napájajú, budú fungovať vo všetkých moderných prehliadačoch. Jediné problémy, ktoré budete mať, sú s najstaršími verziami programu Internet Explorer, pretože verzie 8 a nižšie nepodporujú dotazy médií . Ak to chcete vyriešiť, často sa používa polyvalentný Javascript , čo znamená, že tu existuje aj závislosť od Javascriptu, prinajmenšom pre tie zastarané verzie IE. Znova to nemusí byť pre vás veľa obavy, najmä ak vaša analýza stránok ukazuje, že nemáte dostatok návštevníkov, ktorí používajú tie staršie verzie prehliadača.
Budúci priateľskosť
Tekutá povaha citlivých webových stránok im dáva výhodu v porovnaní s adaptačnými stránkami, pokiaľ ide o budúcnosť. Je to preto, lebo tieto odpovedajúce lokality nie sú vytvorené tak, aby vyhovovali len predtým stanovenému súboru zlomových bodov. Prispôsobia sa všetkým obrazovkám , vrátane tých, ktoré na dnešnom trhu v skutočnosti nemusia. Znamená to, že reakčné lokality nebudú musieť byť "opravené", ak sa zrazu stane populárne nové rozlíšenie obrazovky.
Pri pohľade na neuveriteľnú rozmanitosť v krajine zariadenia (od augusta 2015 bolo na trhu viac ako 24 000 rôznych zariadení Android), má miesto, ktoré sa usiluje o to, aby vyhovovalo tejto širokej škále obrazoviek, a je veľmi dôležité pre budúcnosť. Je to preto, že táto krajina sa v budúcnosti pravdepodobne nebude menej rozmanitá, čo znamená, že navrhovanie pre konkrétne obrazovky alebo veľkosti sa stane nemožným, ak sme túto skutočnosť ešte nedosiahli.
Na druhej strane tohto porovnávacieho scenára, ak je lokalita prispôsobivá a nevzťahuje sa na nové uznesenia, ktoré sa môžu stať dôležitými na trhu, potom by ste mohli byť nútení pridať tento zlom v miestach, ktoré ste vytvorili. Tým sa pridáva projekt a doba vývoja na projekty, čo znamená, že tieto adaptačné lokality musia byť dôsledne monitorované, aby sa zabezpečilo, že na trh nebudú zavedené nové hraničné body, ktoré sa musia pridávať na miesto. Znova, keď je rozmanitosť zariadení to, čo je, neustále kontrolujete nové veľkosti a je možné, že je budete môcť prispôsobiť novým hraničným bodom, je to pretrvávajúca výzva, ktorá bude mať vplyv na prácu, ktorú musíte podporiť, a náklady na túto údržbu spoločnosť alebo organizácia, pre ktorú je lokalita určená.
výkon
Zodpovedný dizajn webu je už dávno obvinený (nespravodlivo v mnohých prípadoch), že je zlé riešenie z hľadiska rýchlosti / výkonnosti sťahovania. To je z veľkej časti dôsledkom skutočnosti, že v prvých dňoch tohto prístupu mnohí weboví dizajnéri jednoducho spájali dotazy na malé obrazovkové médiá na existujúce CSS stránky. To prinútilo obrazy a zdroje určené na väčšie obrazovky byť doručené do všetkých zariadení, aj keď tieto menšie obrazovky ich nepoužili vo svojich konečných usporiadaniach. Odozva dizajn je od týchto dní veľmi dlhá a realita je v tom, že stránky s vysokou citlivosťou na kvalitu dnes netrpia problémami s výkonnosťou.
Pomalé rýchlosti sťahovania a nafúknuté webové stránky nie sú problémom s citlivým webom - je to problém, ktorý nájdete na všetkých webových stránkach. Obrázky, ktoré sú príliš ťažké, sa prenášajú zo sociálnych médií, nadmerné skripty a viac a vážia si stránky dole, ale prispôsobivé aj prispôsobivé webové stránky môžu byť postavené tak, aby sa rýchlo načítavali. Samozrejme , môžu byť tiež postavené spôsobom, ktorý neposkytuje výkonnosť prioritu, ale to nie je vlastnosť samotného riešenia, ale skôr odrazom tímu, ktorý sa podieľal na vývoji samotnej lokality.
Za rozložením
Jedným z najpresvedčivejších aspektov adaptívneho dizajnu webov je to, že máte nielen kontrolu nad dizajnom lokality pre nastavenie hraničných bodov, ale aj zdroje, ktoré sú dodávané pre tieto verzie stránok. Napríklad to znamená, že obrazy sietnice môžu byť odosielané len do sietnicových zariadení, zatiaľ čo obrazovky bez sietnice získavajú vhodnejšie obrázky, ktoré sú menšie vo veľkosti súboru. Ďalšie zdroje lokality (súbory Javascriptu, štýly CSS atď.) Môžu byť inteligentne dodávané len vtedy, keď sú potrebné a budú použité.
Toto používanie adaptívneho dizajnu webov ďaleko presahuje jednoduchú rovnicu: "ak dodatočne inštalujete webovú stránku, prispôsobenie môže byť jednoduchším prístupom k používaniu." Všetky lokality, vrátane kompletných redizajníc, môžu profitovať z inteligentnejšieho prístupu k viac prispôsobenému zážitku.
Tento scenár ukazuje rozličnú povahu tejto diskusie "reagujúceho a adaptívneho". Aj keď je pravda, že adaptívny prístup môže byť vhodnejší ako reagovať na úpravy na mieste, môže to byť tiež skvelé riešenie pre úplné redizajnovanie. Podobne v niektorých prípadoch môže byť pridaný prístupný prístup k existujúcej kódexovej základni, ktorý dáva tejto lokalite všetky výhody plne reagujúceho prístupu.
Ktorý prístup je lepší?
Pokiaľ ide o prispôsobivý a prispôsobivý dizajn webových stránok, neexistuje jasný "víťaz", aj keď reagujúci je určite populárnejší prístup. V skutočnosti "lepší" prístup závisí od potrieb konkrétneho projektu. Navyše to nemusí byť "jedna alebo druhá" situácia. Existuje veľa webových profesionálov, ktorí vytvárajú stránky, ktoré kombinujú najlepší dizajn webových stránok (šírka kvapalín, budúca podpora) so silnými stránkami prispôsobivého dizajnu (lepšia kontrola dizajnu, inteligentné načítanie stránok).
Bežne známy ako RESS (Responsive Web Design with Server Side Components), tento prístup ukazuje, že naozaj neexistuje "jedna veľkosť pre všetky riešenia". Obaja reagujúci dizajn webových stránok a adaptívni majú svoje silné stránky a ich výzvy, takže je potrebné určiť, ktorý z nich bude najlepšie pracovať pre váš konkrétny projekt, alebo ak hybridné riešenie môže skutočne vyhovovať vám najlepšie.