Adaptive (AWD) vs responsive (RWD): combat d’estils
Dissenyar la interfície d’un projecte web no és fàcil, però sens dubte es fa més senzill si coneixes a fons el target al qual va dirigit el producte, els dispositius en què funcionarà o les funcionalitats que tindrà. No obstant això, fins i tot amb tots aquests objectius clars, encara poden envair-te dubtes com: és millor el disseny responsive o el adaptive? En aquest post t’explico les seves diferències i què has de tenir en compte per decidir-te per un o per l’altre. Al ring!
Primer round: defineix les resolucions
La pregunta d’or abans de començar: ¿tens clares les resolucions a què vols donar suport? Analitza les teves possibilitats i defineix cada mida a consciència perquè és la clau per començar a planificar i que el teu projecte sigui un gran èxit!
Adaptive
El disseny adaptive es basa en la creació d’un plantejament complet per a cada mida, basant-se en plantilles d’amplada preestablerta que serveixin per als dispositius més utilitzats. Les midas més populars són:
Mòbil:
320 px per 480 px
640 px per 960 px
Tablet:
768 px per 1024 px
800 px per 600 px
Escriptori:
1280 px per 800 px
1680 px per 1050 px
Això vol dir que, per exemple, si l’usuari navega en un dispositiu amb una resolució de 414px, se li mostrarà el disseny corresponent a 320px perquè és el més petit disponible.
Responsive
En el cas del responsive, les mides són proporcionals i es construeixen una sèrie de layouts (o disposicions) que normalment es divideixen entre la versió mòbil, la de tablet i la d’escriptori, adaptant-se de manera més fidel a cada pantalla. Se solen prendre com a referència les següents resolucions:
Mòbil:
320 px per 480 px
Tablet:
+768 px per +1024 px
Escriptori:
+1280 px per +800 px
En aquest cas un usuari amb una pantalla de 1024px de resolució veurà una versió adaptada entre les dues resolucions més properes (768px i 1280px).
Segon round: dissenya per a tots
Dissenyar per a tots els dispositius actuals, amb tantes marques i models com existeixen, és una tasca utòpica, però fer-ho per a la majoria del nostre públic objectiu no ho és. Si englobes el nombre més gran de terminals possible, t’asseguraràs una difusió més ampla i podràs oferir una millor experiència d’usuari a cadascun d’ells. Els teus usuaris agrairan una navegació consistent en tots els dispositius i el més important: es fidelitzaran!
Adaptive
El disseny adaptive no es caracteritza precisament per la seva elasticitat però, en canvi, és més còmode que el resposive si tenim clares les resolucions que volem implementar. Normalment el procés de disseny comença creant la pantalla amb la resolució més baixa i adaptant-la per a les diferents grandàries. L’avantatge d’aquesta modalitat és que es pot utilitzar per afegir pàgines a una web existent i no cal que el producte neixi des de zero.
Responsive
En el cas del disseny responsive l’estructura es basa en columnes, fet que la fa més flexible i adaptable, donat que mostra o amaga els elements segons l’amplada de pantalla. Normalment el procés de creació s’origina en una resolució intermèdia que serveix com a base per ajustar les mides superiors i inferiors. El desavantatge en aquest cas és que si la pàgina ja existeix i no és responsive, afegir pàgines noves necessita un redisseny complet. En contraposició, amb aquest tipus de disseny s’aconsegueixen transicions més suaus i fluides, perquè la interfície es va adaptant a l’amplada total.
Tercer round: implementa com un savi
Decidir el tipus de disseny també marcarà la implementació posterior, és per això que has de tenir-ho en compte abans de prendre la teva decisió. I tant si et decideixes per un disseny adaptive com per un responsive, has de tenir en compte els següents punts clau. Et seran molt útils a l’hora de triar!
Adaptive
-
Requereix més testeig en resolucions no estàndards que el disseny responsive.
-
Cada plantilla presenta unes funcionalitats concretes que s’executen si totes les eines associades funcionen correctament, la qual cosa pot donar més probabilitat d’error.
-
Es necessiten coneixements avançats de Javascript per fer la implementació.
-
Els canvis realitzats en una plantilla no afecten a la resta, de manera que les actualitzacions són més complicades i lentes.
-
És més costós perquè cada pantalla es personalitza tant en la creació com en el manteniment.
-
Si ha estat desenvolupat i provat en tots els dispositius necessaris, el rendiment serà més òptim que si es realitza en responsive.
Responsive
-
S’inclouen totes les característiques que necessita un navegador sigui quina sigui la resolució per la qual cosa s’assegura un millor funcionament en qualsevol resolució.
-
El testeig pot resultar molest per la quantitat de resolucions que necessiten revisió, donat que no existeix un estàndard de pantalles com en el disseny adaptive.
-
El temps de càrrega de la web serà més gran perquè tant els elements com el material gràfic es carreguen en mida completa i és el navegador el que els ajusta.
-
Permet englobar un nombre més gran de resolucions d’una manera més senzilla i ràpida.
-
La seva implementació és menys costosa perquè hi han múltiples plantilles en les principals plataformes web: WordPress, Magento, Prestashop, Joomla.
I el guanyador és …
La veritat és que després d’aquest ajustat combat no hi ha un únic guanyador. La millor opció dependrà de molts factors, entre ells l’abast, el pressupost o la maduresa del producte. No obstant això, hi han alguns casos d’ús concrets en què està bastant clar quin tipus has d’utilitzar. Te’ls mostrem a continuació:
Millor adaptive per a…
- Webs o apps que requereixen diferenciar notòriament l’experiència en cada dispositiu.
- Projectes amb més pressupost.
- Productes que requereixin un millor rendiment.
- Projectes existents.
Millor responsive per a…
- Webs o apps que no requereixin grans canvis entre dispositius.
- Productes de nova creació que volen resultats ràpids.
Ja tens clar quin has de triar? Si encara necessites un extra d’ajuda no et perdis el nostre post Què és i per a què serveix una Anàlisi Funcional i assegura’t que la teva planificació sigui òptima des de l’inici. Perquè les primeres fases d’un projecte són la clau!