Comparând două abordări diferite ale designului web pentru mai multe dispozitive
Designul reactiv și adaptiv este o metodă de creare a unor site-uri web prietenoase cu mai multe dispozitive care funcționează bine pe o varietate de dimensiuni ale ecranului. Desi designul web responsabil este recomandat de Google si este cel mai popular dintre cele doua abordari, ambele aceste metode pentru designul web multi-device au punctele forte si punctele slabe.
Să aruncăm o privire asupra diferențelor dintre designul web adaptabil și adaptiv, concentrându-ne în special pe următoarele domenii cheie:
- Ușor de dezvoltare
- Nivelul de control pe care îl aveți asupra designului
- Lățimea suportului dispozitivului / ecranului
- Cum va fi soluția viitoare prietenoasă?
- Viteza de descărcare și performanța site-ului
Unele definiții
Înainte de a ajunge la comparațiile noastre complementare de design web adaptabil și adaptabil, să ne gândim la o definiție la nivel înalt a acestor două abordări.
Site-urile responsive au un aspect fluid care se schimbă și se adaptează indiferent de dimensiunea ecranului utilizat. Interogările media permit site-urilor responsabile să se schimbe chiar și "în zbor" dacă browser-ul este redimensionat.
Proiectarea adaptivă utilizează dimensiuni fixe, bazate pe puncte prestabilite pentru a furniza cea mai potrivită versiune de aspect pentru dimensiunea ecranului detectată la prima încărcare a paginii.
Având în vedere aceste definiții largi, să ne îndreptăm spre domeniile noastre cheie de concentrare.
Ușurința dezvoltării
Cea mai importantă diferență dintre designul web adaptabil și adaptiv este modul în care aceste soluții sunt aplicate pe un site web. Deoarece designul receptiv creează un aspect complet fluid, este cel mai bine folosit pe proiecte în care reproiectați site-ul de la bază . Încercarea de a moderniza codul unui site existent pentru a deveni receptiv este adesea o afacere extenuantă, deoarece pur și simplu nu aveți nivelul de control pe care l-ați avea dacă ați dezvoltat acest cod de la zero și ați luat în considerare designul receptiv pentru primele etape ale procesului . Acest lucru înseamnă că atunci când actualizați un site pentru a fi receptiv, sunteți obligat să faceți compromisuri pentru a rămâne în cadrul codului de bază existent.
Dacă lucrați cu un site existent cu o lățime fixă, o abordare adaptivă înseamnă că puteți lăsa mărimea pe care site-ul a fost proiectată pentru a fi intactă și adăugați puncte suplimentare de întrerupere, după cum este necesar. În unele cazuri, dacă bugetul unui proiect este mic și dacă acesta va găzdui doar o cantitate mică de lucrări de dezvoltare, puteți alege să adăugați doar noi puncte de referință adaptive pentru dimensiuni mai mici pe ecran sau mobile. Acest lucru înseamnă că veți permite tuturor ecranelor mai mari să utilizeze aceeași structură - poate o versiune de punct de pornire de 960, ceea ce a fost probabil proiectat pentru site-ul respectiv.
Progresul unei abordări adaptive este că puteți utiliza mai bine codul unui site existent, dar unul dintre dezavantajele este acela că creați diferite șabloane de aspect pentru fiecare punct de întrerupere pe care îl alegeți să îl sprijiniți. Acest lucru va avea un impact asupra volumului de muncă necesar pentru dezvoltarea și menținerea acestei soluții pe termen lung.
Controlul proiectării
Unul dintre punctele forte ale site-urilor care răspund este că fluiditatea lor le permite să se adapteze și să suporte toate dimensiunile ecranului, spre deosebire de punctele prestabilite determinate printr-o abordare adaptivă. Realitatea este însă că site-urile receptive pot să arate excelent la anumite dimensiuni ale ecranului cheie (de obicei dimensiuni care corespund dispozitivelor populare disponibile pe piață), dar designul vizual deseori se descompune între aceste rezoluții populare.
De exemplu, un site poate arăta grozav la aspectul lat de 1400 pixeli, dimensiunea ecranului mediu de 960 de pixeli și aspectul mic al ecranului la 480 de pixeli, dar ce se întâmplă între stările între aceste dimensiuni? În calitate de designer, aveți puține până la niciun control asupra acestor dimensiuni între ele, iar aspectul vizual al paginii la acele dimensiuni este adesea mai puțin decât ideal.
Cu un site web adaptiv, aveți mult mai mult control asupra designului asupra diverselor machete utilizate, deoarece acestea sunt dimensiuni fixe pe baza punctelor de întrerupere stabilite. Aceste state incomode între state nu mai sunt o problemă, deoarece ați proiectat cu atenție fiecare "aspect" (adică fiecare afișaj al punctului de rupere) care va fi livrat vizitatorilor.
Atât de atractiv ca acest nivel de control al designului poate suna, trebuie să fii conștient că vine la un preț. Da, aveți control complet asupra aspectului fiecărui punct de întrerupere, dar asta înseamnă că trebuie să investești timpul de proiectare necesar pentru proiectare pentru fiecare dintre aceste aspecte unice. Cele mai multe puncte de întrerupere pe care le alegeți pentru a proiecta, cu atât mai mult timp va trebui să cheltuiți pentru acest proces.
Lățimea suportului
Atât designul adaptabil cât și cel adaptabil se bucură de un sprijin destul de robust, în special în browserele moderne.
Site-urile adaptate necesită componente de server sau Javascript pentru detectarea dimensiunii ecranului. Evident, dacă un sit adaptiv necesită Javascript, înseamnă că un browser trebuie să îl activeze pentru ca site-ul respectiv să funcționeze corect. Aceasta ar putea să nu fie o preocupare majoră pentru tine, deoarece majoritatea oamenilor vor avea Javascript în browserele lor, dar oricând un site are o dependență critică de orice, trebuie remarcat.
Site-urile responsabile și mass-media interoghează că puterea lor va funcționa bine în toate browserele moderne. Singurele probleme pe care le veți avea sunt cele mai vechi versiuni ale Internet Explorer, deoarece versiunile 8 și cele de mai jos nu acceptă interogări media . Pentru a rezolva acest lucru , este adesea folosit un polifill Javascript , ceea ce înseamnă că există și o dependență de Javascript aici, cel puțin pentru versiunile anterioare ale IE. Din nou, acest lucru nu poate fi o preocupare pentru dvs., mai ales dacă analizele site-ului dvs. arată că nu primiți mulți vizitatori folosind versiunile mai vechi ale browserului.
Prietenia viitoare
Natura fluidă a site-urilor sensibile le oferă un avantaj față de site-urile adaptive atunci când vine vorba de o prietenie în viitor. Acest lucru se datorează faptului că aceste site-uri responsabile nu sunt construite pentru a se potrivi doar cu un set prestabilit stabilit anterior. Ele se adaptează pentru a se potrivi tuturor ecranelor , inclusiv celor care nu se află în prezent pe piață. Aceasta înseamnă că site-urile receptive nu vor trebui "fixate" dacă o nouă rezoluție a ecranului devine brusc populară.
Privind varietatea incredibilă a peisajului dispozitivului (începând cu august 2015, pe piață erau peste 24.000 de dispozitive distincte Android), având un site care face tot ce este mai bun pentru a acomoda această gamă largă de ecrane este extrem de important pentru o prietenie viitoare. Acest lucru se datorează faptului că peisajul este puțin probabil să fie mai puțin diversificat în viitor, ceea ce înseamnă că proiectarea pentru ecrane sau dimensiuni specifice va deveni imposibilă, dacă nu am ajuns deja la acea realitate.
Pe cealaltă parte a acestui scenariu de comparație, dacă un site este adaptabil și nu se potrivește cu noi soluții care pot deveni importante pe piață, atunci este posibil să fiți obligat să adăugați punctul de stopare pe site-urile pe care le-ați creat. Aceasta adaugă timpul de proiectare și dezvoltare la proiecte și înseamnă că acele site-uri adaptive trebuie să fie monitorizate în mod constant pentru a se asigura că nu au fost introduse noi puncte de rupere pe piață care trebuie adăugate pe site. Din nou, prin faptul că diversitatea dispozitivului este ceea ce este, verificarea constantă a unor dimensiuni noi și posibila acceptare a acestora cu noi puncte de întrerupere reprezintă o provocare continuă care va avea un impact asupra muncii pe care trebuie să o sprijiniți și a costului acestei întreținere pentru compania sau organizația pentru care este destinat site-ul.
Performanţă
Responsabilitatea design-ului web a fost mult timp acuzată (incorect, în multe cazuri) de a fi o soluție slabă din punct de vedere al vitezei de descărcare / performanței. Acest lucru se datorează în mare măsură faptului că, în primele zile ale acestei abordări, mulți designeri web au abordat pur și simplu interogări media de pe ecranul mic pe site-urile CSS existente. Aceasta a determinat ca imaginile și resursele destinate ecranelor mari să fie livrate tuturor dispozitivelor, chiar dacă acele ecrane mai mici nu le-au folosit în planurile lor finale. Designul receptiv a parcurs un drum lung din acele zile, iar realitatea este că site-urile care răspund de calitate astăzi nu suferă de probleme de performanță.
Vitezele scurte de descărcare și site-urile pline de umflături nu reprezintă o problemă legată de site-ul web - este o problemă care poate fi găsită pe toate site-urile web. Imagini care sunt prea grele, se alimentează de la medii sociale, scripturi excesive și mai mult și cântăresc un site în jos, dar site-urile reactive și adaptive pot fi construite pentru a fi încărcate rapid. Desigur , acestea pot fi construite într-un mod care nu face ca performanța să fie o prioritate, dar aceasta nu este o trăsătură a soluției în sine, ci mai degrabă o reflectare a echipei care a fost implicată în dezvoltarea site-ului însuși.
Dincolo de aspect
Unul dintre aspectele cele mai convingatoare ale designului adaptiv de web este acela că nu numai că aveți control asupra designului site-ului pentru setările de întrerupere, dar și resursele livrate pentru versiunile respective. De exemplu, aceasta înseamnă că imaginile retinei pot fi trimise doar la dispozitivele retinei, în timp ce ecranele non-retină obțin imagini mai adecvate, care sunt mai mici în dimensiunea fișierului. Alte resurse ale site-ului (fișierele Javascript, stilurile CSS etc.) pot fi livrate inteligent numai atunci când sunt necesare și vor fi utilizate.
Această utilizare a designului adaptiv de web merge cu mult peste ecuația simplă a "dacă adaptează un site web, adaptarea poate fi o abordare mai ușoară de utilizare". Toate site-urile, inclusiv reproiectarea completă, pot beneficia de o abordare mai inteligentă pentru o experiență mai adaptată.
Acest scenariu arată caracterul nuanțat al acestei dezbateri "reactive față de adaptare". Deși este adevărat că o abordare adaptivă poate fi mai potrivită decât reacționarea pentru site-ul retrofit, aceasta poate fi, de asemenea, o soluție excelentă pentru reproiectarea completă. În mod similar, în unele cazuri poate fi adăugată o abordare receptivă pe baza codului unui site existent, oferind site-ului toate avantajele unei abordări pe deplin receptive.
Care este abordarea mai bună?
Când vine vorba de designul adaptabil față de versiunea adaptivă, nu există un "câștigător" clar, deși reacția este cu siguranță cea mai populară abordare. Într-adevăr, abordarea "mai bună" depinde de nevoile unui proiect specific. Mai mult, acest lucru nu trebuie să fie o situație "fie / sau". Există mulți profesioniști în domeniul web care construiesc site-uri care combină cele mai bune dintre designul de web receptiv (lățimea fluidelor, suportul viitor) cu punctele forte ale designului adaptiv (control mai bun al designului, încărcare inteligentă a resurselor site-ului).
În mod obișnuit cunoscut sub numele de RESS (Responsive Web Design with Components Side Side), această abordare arată că într-adevăr nu există "o singură mărime potrivită pentru toate soluțiile". Atât designul reactiv, cât și adaptivul au punctele forte și provocările lor. va funcționa cel mai bine pentru proiectul dvs. specific sau dacă o soluție hibrid vă poate fi de cea mai bună calitate.