Racionálni vývojári webových stránok sa nemuseli starať o navrhovanie webových stránok, pretože ich používatelia by ich zobrazovali v počítačoch a tieto počítače mali pevnú obrazovku. S mobilnou revolúciou čoraz viac ľudí hľadá na svojich mobilných zariadeniach - tabletoch alebo mobilných telefónoch - pre informáciu. Preto je potrebné, aby vývojári webových stránok vytvorili webové stránky, ktoré zabezpečia všetko od počítača Windows až po mobilné zariadenia. Tento článok vysvetľuje rozdiely medzi prispôsobivý vs citlivý web dizajn a umožňuje vám rozhodnúť, ktorý z nich je pre vás a vašu organizáciu vhodnejší.
Zodpovedný dizajn webu
Odpovedajúci webový dizajn zahŕňa dodatočné kódovanie a používa takzvané "kvapalné siete". Čísla sú špecifikované skôr ako "percento" ako presný počet pixelov. To robí rovnaký kód webových stránok správne zobrazovaný na obrazovke počítača a na obrazovke mobilného telefónu. Bez ohľadu na to, akým spôsobom meníte veľkosť obrazovky, je ten istý web prezentovaný ľahko čitateľným spôsobom. V prípade menších webových stránok text a obrázky ľahko prúdia priestorom obrazovky a zapadajú do neho bez prerušenia webových stránok alebo bez orezania častí webových stránok.
Zodpovedný prístup k návrhu webových stránok vyžaduje povinnosť používať CSS3 namiesto CSS. Využíva tiež škálovateľné obrazy a mriežky, ktoré sú trochu ťažké kódovať.
Adaptívny webový dizajn
Adaptívny dizajn webových stránok je zameraný aj na prezentáciu viditeľných webových stránok na tabletoch a mobilných telefónoch okrem obrazoviek počítača. Prístup je však trochu iný. V citlivom dizajne webových stránok bola flexibilita, ktorá umožňovala voľný tok textu a veľkosť obrázkov, aby sa zmestili na rôznych obrazovkách.
Pri prispôsobivej tvorbe webových stránok vývojári využívajú vopred určené veľkosti obrazovky a zodpovedajúcim spôsobom ich kódujú. To znamená, že keď používateľ pristane na webových stránkach, webová lokalita určuje typ použitého zariadenia a prezentuje webovú stránku určenú pre danú veľkosť obrazovky zariadenia. V niektorých prípadoch sa obsah môže v jednotlivých zariadeniach líšiť.
Napríklad vývojári by zvážili 1280 × 800 pixelov pre počítače, 8 "pre tablety a 5" pre mobilné telefóny. Skorý kód adaptívneho webového dizajnu obsahuje identifikáciu obrazoviek. Ak je to počítač, ukážte verziu počítača na webe. Ak ide o tabletu s veľkosťou 8 ", ukážte verziu tabletu na webe a podobne, ak je zariadenie mobilným telefónom, zobrazte mobilnú verziu webových stránok. To sa dosiahne použitím príkazu "IF", po ktorom nasledujú rôzne rozmery, ktoré sú špecifikované presne v pixeloch, a nie percentuálne.
Ak sa nové zariadenia dostanú s rozdielnym rozlíšením obrazovky, vývojári sa budú musieť vrátiť k kódovaniu, aby zahŕňali novšie rozlíšenie obrazovky. Adaptívny webový dizajn má teda šancu na ozdobu na menších zariadeniach, ak vývojári nie sú opatrní.
V porovnaní s citlivým dizajnom webových stránok, prispôsobivý dizajn webových stránok je jednoduchší na kódovanie a väčšina vývojárov si ich vyberie na základe citlivého dizajnu webu.
Responzívny vs Adaptive web design
Odpovedajúce webové stránky sú ťažko kódovateľné. Kód je zložitý a používa percentuálne hodnoty namiesto pevných hodnôt pixelov. Potrebuje sa dostatočná koncentrácia na vytvorenie webovej stránky, ktorá sa mení podľa veľkosti obrazovky zariadení. Naopak, je jednoduchšie vytvoriť rôzne webové stránky pre rôzne zariadenia, ako je tomu v adaptivnom web dizajne. Hoci práca je viac v adaptive web dizajnu ako vývojári by vytvoriť rôzne webové stránky pre rôzne veľkosti zariadení, je stále ľahšie v porovnaní s citlivým web design.
Keďže na trhu existuje príliš veľa mobilných zariadení, vývojári nemusia nevyhnutne zahŕňať všetky typy rozlíšení obrazovky. To vedie k orezávaniu webových stránok na menších obrazovkách, keď sa používa prístup adaptívneho webového dizajnu.
Adaptívne webové stránky sú trochu pomalé pri načítavaní, pretože web musí najprv zistiť, ktoré zariadenie a aké rozlíšenie obrazovky sa používa. Na základe toho sa na obrazovke zariadenia načíta súvisiaca verzia webových stránok. V prípade odpovedajúceho dizajnu webových stránok sa používa jediný kód, ktorý sa automaticky skracuje tak, aby sa zmestil na mobilné obrazovky.
Možno by ste sa chceli tiež pozrieť na tento príspevok na tituloch MSDN Prečo dám prednosť adaptívnemu dizajnu webových stránok pred citlivým webovým dizajnom.
UPDATE: prepojená stránka nie je k dispozícii v spoločnosti Microsoft. Možno budete chcieť skontrolovať SharePoint Responsive Web Design namiesto toho.
