Responsive vs Adaptive web design - Care este mai bine?

Dezvoltatorii de site-uri timpurii nu au avut de ce să se îngrijoreze mult de proiectarea site-urilor web, deoarece utilizatorii le-ar vedea pe computere și acele computere au avut o rezoluție fixă ​​a ecranului. Cu ajutorul revoluției mobile, tot mai multe persoane caută informații despre dispozitivele mobile - tablete sau telefoane mobile. Prin urmare, a devenit necesar pentru dezvoltatorii de site-uri web, pentru a crea un site web care să satisfacă totul de la Windows PC la dispozitive mobile. Acest articol explică diferența dintre adaptiv față de designul web și vă permite să decideți care dintre ele este mai bine pentru dvs. și organizația dvs.

Există două metode de a crea site-uri Web pentru a putea răspunde la diferite rezoluții ale ecranului: de la PC la telefoane mobile. Metodele sunt designul web adaptiv și designul web responsiv. În ambele cazuri, obiectivul final este de a crea un site web care poate fi vizualizat pe orice tip de rezoluție a ecranului. Scopul este de a prezenta informații despre o serie de dispozitive - de la calculatoare la tablete la telefoane mobile.

Design Web Responsabil

Responsabil Web Design implică codare suplimentară și folosește ceea ce se numește "grile fluid". Numerele sunt specificate în "procent", mai degrabă decât numărul exact de pixeli. Acest lucru face ca același cod de site să fie afișat corect pe un ecran PC și pe ecranul unui telefon mobil. Astfel, indiferent de modul în care redimensionați ecranul, același site este prezentat într-un mod ușor de citit. Pentru site-uri mai mici, textul și imaginile se strecoară cu ușurință cu spațiul de pe ecran și se încadrează în el fără a rupe site-ul sau fără a decupa părți ale site-ului.

O abordare responsabilă a designului web face obligatoriu utilizarea CSS3 în loc de CSS. De asemenea, utilizează imaginile scalabile și rețelele fluide care sunt puțin greu de codificat.

Adaptive Web Design

Designul web adaptabil este, de asemenea, axat pe prezentarea unui site vizibil pe tablete și telefoane mobile în plus față de ecranele PC. Abordarea este însă puțin diferită. În designul web receptiv, a fost o flexibilitate care permite fluxul textului liber și dimensionarea imaginilor pentru a se potrivi pe diferite ecrane.

În designul adaptiv de web, dezvoltatorii folosesc dimensiunile predefinite ale ecranului și codurile corespunzătoare. Adică atunci când un utilizator intră pe site, site-ul web determină tipul de dispozitiv utilizat și prezintă site-ul web creat pentru dimensiunea ecranului respectiv. În unele cazuri, conținutul poate varia în funcție de dispozitive.

De exemplu, dezvoltatorii ar considera 1280 × 800 pixeli pentru PC-uri, 8 "pentru tablete și 5" pentru telefoane mobile. Codul timpuriu al proiectării web adaptive conține identificarea ecranelor. Dacă este PC, arătați versiunea PC a site-ului web. Dacă este vorba de un comprimat de 8 ", arătați versiunea de tabletă a site-ului și, de asemenea, dacă dispozitivul este un telefon mobil, arătați versiunea mobilă a site-ului web. exact în pixeli, mai degrabă decât în ​​proporție.

Dacă dispozitivele noi vin cu o rezoluție diferită a ecranului, dezvoltatorii vor trebui să se întoarcă la codificare pentru a încorpora cele mai noi rezoluții ale ecranului, astfel încât adaptarea web designului are unele șanse de a trăi dispozitive mai mici, în cazul în care dezvoltatorii nu sunt atenți.

Comparativ cu design-ul web receptiv, designul adaptiv de web în codul mai ușor și cei mai mulți dezvoltatori îi aleg pe cei din urmă în ceea ce privește designul web receptiv

Responsive vs Adaptive web design

sunt greu de cod.Codul este complexă și face uz de valori procentuale în loc de valori fixe pixel.Este nevoie de o cantitate bună de concentrare pentru a construi un site care se scalare în funcție de dimensiunea ecranului dispozitivului.În schimb, este mai ușor să creați site-uri web diferite pentru dispozitive diferite, așa cum este cazul în design-ul web adaptiv. Deși munca este mai mult în proiectarea web adaptivă, dezvoltatorii ar crea site-uri web diferite pentru diferite dimensiuni ale dispozitivului, este încă mai ușor comparativ cu designul web receptiv

Deoarece există prea multe dispozitive mobile pe piață, dezvoltatorii nu pot include neapărat toate tipurile de rezoluții ale ecranului. Acest lucru duce la decuparea site-urilor pe ecrane mai mici atunci când este utilizată abordarea adaptivă a designului web.

Site-urile adaptive sunt puțin cam încărcate, deoarece site-ul trebuie să-și dea seama mai întâi ce dispozitiv și ce rezoluție a ecranului este utilizată. În funcție de aceasta, versiunea corespunzătoare a site-ului este încărcată pe ecranul dispozitivului. În cazul unui design web receptiv, se folosește un singur cod și este redus automat pentru a se potrivi ecranelor mobile.

Este posibil să doriți să aruncați o privire și la acest post pe MSDN intitulat De ce prefer modul de adaptare a paginilor web adaptate design web