Responsív vs adaptív web design - Melyik a jobb?

Tartalomjegyzék:

Responsív vs adaptív web design - Melyik a jobb?
Responsív vs adaptív web design - Melyik a jobb?

Videó: Responsív vs adaptív web design - Melyik a jobb?

Videó: Responsív vs adaptív web design - Melyik a jobb?
Videó: Remove stuck Software from Apps & features uninstaller - Windows 10 - YouTube 2024, Április
Anonim

A korai weboldal fejlesztőknek nem kellett sok gondot okozniuk a weboldalak tervezése során, mivel a felhasználók a számítógépeken és a számítógépeken rögzített képernyőfelbontást látnának. A mobil forradalom miatt egyre többen keresnek mobileszközön - táblagépeken vagy mobiltelefonokon - információt. Ezért szükségessé vált a webfejlesztők számára, hogy hozzon létre egy olyan weboldalt, amely mindent a Windows PC-ről a mobil eszközökre összpontosít. Ez a cikk a különbséget magyarázza adaptív vagy érzékeny webes kialakítás és lehetővé teszi, hogy eldöntsétek, melyik az Ön és szervezete számára jobb.

Kétféleképpen hozhat létre weboldalakat, hogy különböző képernyőfelbontásokat tudjon biztosítani: a számítógépről a mobiltelefonokra. A módszerek az adaptív webdesign és a felelős webes tervezés. Mindkét esetben a végső cél olyan weboldal készítése, amely bármilyen képernyőfelbontáson megtekinthető. A cél az eszközök széles körű bemutatására - a számítógépről a tabletta és a mobiltelefon között.
Kétféleképpen hozhat létre weboldalakat, hogy különböző képernyőfelbontásokat tudjon biztosítani: a számítógépről a mobiltelefonokra. A módszerek az adaptív webdesign és a felelős webes tervezés. Mindkét esetben a végső cél olyan weboldal készítése, amely bármilyen képernyőfelbontáson megtekinthető. A cél az eszközök széles körű bemutatására - a számítógépről a tabletta és a mobiltelefon között.

Responsív Web Design

A Responsive Web Design extra kódolással jár, és alkalmazza az úgynevezett "folyadékhálózatokat". A számok a pontos százalékos szám helyett "százalékos" értéket adnak meg. Ez ugyanazt a webhelykódot teszi megfelelően a számítógép képernyőjén és a mobiltelefon képernyőjén. Így, függetlenül attól, hogy átméretezi a képernyőt, ugyanaz a webhely könnyen olvasható módon jelenik meg. A kisebb weboldalakhoz a szöveg és a képek könnyen eljuthatnak a képernyőn, és beilleszkedhetnek a weboldal megszakítása vagy a weboldal egyes részeinek kivágása nélkül.

A Responsive webdesign megközelítés kötelezővé teszi a CSS3 helyett a CSS használatát. Ezenkívül skálázható képeket és folyadékhálózatokat is használ, amelyeket egy kicsit nehéz kódolni.

Adaptív webdesign

Az adaptív webes tervezés a számítógépes képernyőkön túl is megjelenik a tablettákon és a mobiltelefonokon megjeleníthető webhelyen. A megközelítés azonban kissé más. A rugalmas webes tervezésben a rugalmasság lehetővé tette a szabad szövegáramlást és a képek méretezését a különböző képernyőkön.

Az alkalmazkodó webes tervezésben a fejlesztők előre meghatározott képernyőméretek és kódok használatát alkalmazzák. Ez azt jelenti, hogy amikor egy felhasználó eléri a webhelyet, a weboldal meghatározza a használt eszköz típusát, és bemutatja az adott eszköz képernyőméretéhez tervezett webhelyet. Bizonyos esetekben a tartalom az eszközökön át változhat.

Például a fejlesztők 1280 × 800 képpontot fontolnának számítógépekhez, 8 "tablettákhoz és 5" mobiltelefonokhoz. Az adaptív webes tervezés korai kódja tartalmazza a képernyők azonosítását. Ha ez PC, mutasd meg a weboldal PC változatát. Ha ez egy 8 "-os tabletta, akkor mutasd meg a webhely tabletta verzióját, és ha a készülék mobiltelefon, akkor mutasd meg a webhely mobil verzióját. Ez az "IF" utasítás segítségével érhető el, amelyet különböző méretek követnek pontosan pixelben, nem pedig százalékban.

Ha az új eszközök különböző képernyőfelbontással érkeznek, a fejlesztőknek vissza kell térniük a kódoláshoz, hogy beépítsék az új képernyőfelbontásokat. Így az adaptív webdesignalnak némi esélye van arra, hogy kisebb eszközökkel dolgozzon, ha a fejlesztők nem vigyáznak.

Az érzékeny webes tervezéshez képest az adaptív webes tervezés könnyebben kódolható, és a legtöbb fejlesztő választja ki az utóbbit az érzékeny webes megoldás felett.

Responsive vs Adaptive web design

A felelős webhelyeket nehéz kódolni. A kód összetett, és százalékos értékeket használ a rögzített pixelérték helyett. Jó koncentrációra van szüksége ahhoz, hogy olyan weboldalt készítsen, amely az eszközök képernyőméretének megfelelően skálázható. Éppen ellenkezőleg, könnyebb különböző webhelyek létrehozására, mint az adaptív webes tervezés esetében. Bár a munka inkább az alkalmazkodó webes tervezésben van, hiszen a fejlesztők különböző webhelyekhez különböző weboldalakat hoznak létre, mégis könnyebb az érzékeny webes megoldáshoz képest.

Mivel túl sok mobileszköz található a piacon, a fejlesztők nem feltétlenül tartalmaznak minden képernyőfelbontást. Ez a weboldalak kisebb képernyőkön történő feldolgozásához vezet, amikor adaptív webes tervezési módszert alkalmaznak.

Az adaptív webhelyek lassan töltődnek be, mivel a weboldal először kiderül, milyen eszközt és milyen képernyőfelbontást használ. Ennek alapján a webhely kapcsolódó verziója betöltődik az eszköz képernyőjére. Érzékelő webes tervezés esetén egyetlen kódot használnak, és automatikusan összezsugorodnak a mobil képernyőkhöz.

Lehet, hogy meg szeretné tekinteni ezt a bejegyzést az MSDN-ben is Miért inkább az adaptív webdesignot inkább válaszolok a webes tervezésre.

UPDATE: A kapcsolódó oldal nem érhető el a Microsoftban. Ahelyett, hogy megnézné a SharePoint Responsive Web Design szolgáltatást.

Ajánlott: