Comparant dos enfocaments diferents al disseny web de diversos dispositius
El disseny web adaptatiu i adaptatiu són mètodes per crear llocs web compatibles amb múltiples dispositius que funcionen bé en diferents mides de pantalla. Tot i que Google el recomana disseny web i és el més popular entre els dos enfocaments, ambdós mètodes per al disseny web multiplata tenen els seus punts forts i les seves debilitats.
Fem una ullada a les diferències entre el disseny web adaptatiu i adaptatiu, centrant-se específicament en aquestes àrees clau:
- Facilitat de desenvolupament
- El nivell de control que té sobre el disseny
- Ample de suport de dispositiu / pantalla
- Com la solució és amigable per al futur
- Velocitat general de descàrrega i rendiment del lloc
Algunes definicions
Abans d'entrar en les comparacions paral·leles del disseny web adaptatiu i sensible, aprofundim en una definició d'alt nivell d'aquests dos enfocaments.
Els llocs web responsius tenen un disseny fluid que canvia i s'adapta independentment de la mida de la pantalla que s'utilitza. Les consultes de mitjans permeten que els llocs responsables, fins i tot, canvien "sobre la marxa" si es redimensiona el navegador.
El disseny adaptatiu utilitza mides fixes basades en punts de ruptura predeterminats per oferir la versió de disseny més adequada per a la mida de la pantalla que es detecta quan es carrega la primera pàgina.
Amb aquestes àmplies definicions en el seu lloc, anirem a les nostres àrees clau d'enfocament.
Facilitat de desenvolupament
La diferència més significativa entre el disseny web adaptatiu i de resposta és que aquestes solucions s'apliquen a un lloc web. Atès que el disseny de resposta crea un disseny completament fluid, és millor utilitzar-lo en projectes en els quals s'està redissenyant el lloc des del principi . Intentar adaptar el codi d'un lloc web existent per tornar-se a respondre sovint és un assumpte agressiu perquè simplement no té el nivell de control que tindria si esteu desenvolupant aquest codi des de zero i tingués en compte el disseny adequat per a les primeres etapes d'aquest procés. . Això significa que quan torneu a habilitar un lloc perquè sigui sensible, se us obliga a fer compromisos per mantenir-vos dins d'aquesta base de codi existent.
Si esteu treballant amb un lloc web d'amplada fixa existent, un enfocament adaptatiu significa que podeu deixar la mida que el lloc ha estat dissenyat per a que estigui intacte i afegir punts d'interrupció adaptatius addicionals, segons sigui necessari. En alguns casos, si el pressupost d'un projecte és petit i si només s'admet una petita quantitat de treballs de desenvolupament, podeu afegir nous punts d'interrupció adaptatius per a pantalles més petites o de mida mòbil. Això vol dir que permetria que les pantalles més grans usessin el mateix disseny: potser una versió de punt de ruptura de 960 que era probablement dissenyada per a aquest lloc.
L'avantatge d'un enfocament adaptatiu és que pot aprofitar millor el codi d'un lloc existent, però una de les desavantatges és que està creant diferents plantilles de disseny per a cada punt d'interrupció que escolliu. Això tindrà un impacte en la càrrega de treball necessària per desenvolupar i mantenir aquesta solució a llarg termini.
Control de disseny
Una de les fortaleses dels llocs web responsables és que la seva fluïdesa els permet adaptar i suportar totes les mides de la pantalla enfront de només els punts d'interrupció preestablerts determinats en un enfocament adaptatiu. La realitat, però, és que els llocs responsables poden semblar grans en determinades mides de pantalla (normalment mides que corresponen a dispositius populars disponibles al mercat), però el disseny visual sovint es descompon entre aquestes resolucions populars.
Per exemple, un lloc pot tenir un gran aspecte en el disseny de pantalla ampla de 1.400 píxels, la mida de la pantalla mitjana de 960 píxels i la pantalla petita a 480 píxels, però què passa amb els estats interiors d'aquestes mides? Com a dissenyador, teniu poc o cap control sobre aquestes mides intermèdies i l'aspecte visual de la pàgina a aquestes mides és sovint menys que ideal.
Amb un lloc web adaptatiu, teniu molt més control de disseny sobre els diferents dissenys que s'utilitzen perquè són mides fixes en funció dels punts de parada establerts. Aquests estats incòmodes no són un problema ja que heu dissenyat acuradament cada "mirada" (és a dir, la pantalla de cada punt d'interrupció) que es lliurarà als visitants.
Tan atractiu com aquest nivell de control de disseny pot sonar, cal tenir en compte que arriba a un preu. Sí, tens un control total sobre l'aspecte de tots els punts d'interrupció, però això vol dir que has d'invertir el temps de disseny necessari per dissenyar cada un d'aquests dissenys únics. Com més punts d'interrupció trieu per dissenyar, més temps haurà de gastar en aquest procés.
Ample de suport
Tant el disseny web adaptatiu com adaptatiu gaudeixen d'un suport bastant robust, especialment en navegadors moderns.
Els llocs web adaptatius requereixen components del servidor o Javascript per a la detecció de la mida de la pantalla. Òbviament, si un lloc adaptatiu requereix Javascript, vol dir que un navegador necessita habilitar-lo perquè aquest lloc funcioni correctament. Això pot ser que no sigui una gran preocupació per a vostè, ja que la majoria de la gent tindrà Javascript en els seus navegadors, però en qualsevol moment un lloc té una dependència crítica de tot, cal assenyalar.
Els llocs web responsables i les consultes de mitjans que els impulsin funcionaran bé en tots els navegadors moderns. Els únics problemes que tindreu són les versions més antigues d'Internet Explorer, ja que les versions 8 i posteriors no admeten consultes de mitjans . Per solucionar-ho , s'utilitza sovint un contingut publicitari de Javascript , el que significa que aquí també hi ha una dependència de Javascript, almenys per a aquelles versions antiquades d'IE. Una vegada més, potser no us preocupeu, especialment si les vostres analítiques de llocs mostren que no rep molts visitants utilitzant aquestes versions més antigues del navegador.
Amistat futura
La naturalesa fluida dels llocs web responsables els dóna un avantatge sobre els llocs adaptatius quan es tracta d'una facilitat de futur. Això és degut a que aquests llocs de resposta no estan dissenyats per donar cabuda únicament a un conjunt de punts de ruptura prèviament establerts. S'adapten a adaptar-se a totes les pantalles , incloses les que actualment no es troben actualment al mercat. Això vol dir que els llocs responsables no hauran de ser "fixos" si de sobte es torna popular una resolució de pantalla nova.
Pel que fa a l'increïble varietat del paisatge del dispositiu (a l'agost de 2015, hi havia més de 24.000 dispositius Android diferents al mercat), tenir un lloc que millor s'adapti a aquesta àmplia gamma de pantalles és de vital importància per al futur. Això es deu al fet que és poc probable que aquest paisatge sigui menys divers en el futur, el que significa que el disseny de pantalles o mides específiques serà impossible, si no hem arribat a aquesta realitat.
A l'altre costat d'aquest escenari de comparació, si un lloc és adaptatiu i no admet noves resolucions que puguin arribar a ser importants al mercat, aleshores es pot veure obligat a afegir aquest punt d'interrupció als llocs que heu creat. Això afegeix temps de disseny i desenvolupament als projectes i vol dir que aquests llocs adaptatius han de ser monitoritzats de manera constant per garantir que no s'hagin introduït nous punts d'interrupció al mercat que s'hagin d'afegir al lloc. De nou, tenint en compte que la diversitat de dispositius és el que és, haver de comprovar constantment les noves mides i, possiblement, allotjar-los amb nous punts d'interrupció és un repte en curs que tindrà un impacte en el treball que ha de suportar un lloc i el cost d'aquest manteniment l'empresa o organització a la qual està destinat.
Rendiment
El disseny web sensible ha estat acusat durant molt de temps (injustament, en molts casos) de ser una solució deficient des del punt de vista de velocitat / rendiment de la descàrrega. Això es deu en gran part al fet que en els primers dies d'aquest enfocament, molts dissenyadors web simplement anaven a les petites consultes de mitjans de pantalla en un CSS existent d'un lloc web. Això va obligar a les imatges i als recursos destinats a pantalles més grans a ser lliurats a tots els dispositius, fins i tot si aquestes pantalles més petites no les utilitzaven en els seus dissenys finals. El disseny sensacional ha recorregut un llarg camí des d'aquells dies i la realitat és que els llocs de qualitat que avui no responen amb problemes de rendiment.
Les velocitats de descàrrega lenta i els llocs web inundats no són un problema de lloc web sensible, és un problema que es pot trobar a tots els llocs web. Les imatges que són massa pesades, s'alimenten de les xarxes socials, de les seqüències d'ordres excessives i de més, i pesen un lloc, però es poden crear llocs web adaptatius i adaptatius per a una càrrega ràpida. Per descomptat , també es pot construir d'una manera que no fa que el rendiment sigui una prioritat, però això no és un tret de la solució en si mateix, sinó una reflexió de l'equip involucrat en el desenvolupament del mateix lloc.
Més enllà del disseny
Un dels aspectes més atractius del disseny web adaptatiu és que no només tens el control sobre el disseny del lloc per als punts d'interrupció establerts, sinó també els recursos que es lliuren per a aquestes versions del lloc. Per exemple, això significa que les imatges de retina només es poden enviar a dispositius retina, mentre que les pantalles no retina obtenen imatges més adequades que són més petites en la mida del fitxer. Altres recursos del lloc (fitxers Javascript, estils CSS, etc.) es poden lliurar intel·ligentment només quan són necessaris i s'utilitzaran.
Aquesta utilització del disseny web adaptatiu va molt més enllà de la senzilla equació de "si està adaptant un lloc web, l'adaptació pot ser un enfocament més senzill d'utilitzar". Tots els llocs, inclosos els redissenyos complets, es poden beneficiar d'un enfocament més intel·ligent d'una experiència més adaptada.
Aquest escenari mostra el caràcter matisat d'aquest debat "sensible versus adaptable". Tot i que és cert que un enfocament adaptatiu pot ser més adequat que sensible per a les actualitzacions del lloc, també pot ser una gran solució per als redissenys complets. De la mateixa manera, en alguns casos, un enfocament sensible es pot afegir a un codi base del lloc existent, donant a aquest lloc tots els avantatges d'un enfocament plenament sensible.
Quin enfocament és millor?
Quan es tracta d'un disseny web adaptatiu versus adaptiu, no hi ha un "guanyador" clar, encara que sens dubte és l'enfocament més popular. En veritat, l'enfocament "millor" depèn de les necessitats d'un projecte concret. A més, això no necessita ser una situació "ni / ni". Hi ha molts professionals de la web que creen llocs que combinen el millor disseny web (ample de fluid, suport futur) amb les fortaleses del disseny adaptatiu (millor control del disseny, càrrega intel·ligent dels recursos del lloc).
Conegut habitualment com RESS (disseny web responsable amb components del costat del servidor), aquest enfocament mostra que realment no hi ha cap "mida única". Tant el disseny web adequat com l'adaptable tenen els seus punts forts i els seus reptes, de manera que cal determinar quina funcionarà millor per al vostre projecte específic, o si una solució híbrida us pot servir millor.