Comparando dous enfoques diferentes para o deseño web de varios dispositivos
O deseño web adaptativo e adaptativo son métodos para crear sitios web compatibles con varios dispositivos que funcionan ben nunha variedade de tamaños de pantalla. Mentres o deseño web receptivo é recomendado por Google e é o máis popular entre os dous enfoques, estes dous métodos para o deseño web multiplataforma teñen os seus puntos fortes e as súas debilidades.
Vexamos as diferenzas entre o deseño web adaptativo e sensible, centrado especialmente nestes ámbitos clave:
- Facilidade de desenvolvemento
- O nivel de control que ten sobre o deseño
- Ancho de dispositivo / soporte de pantalla
- Como é a solución futura a solución
- Velocidade xeral de descarga e rendemento do sitio
Algunhas definicións
Antes de entrar nas nosas comparacións de deseño web sensible e adaptable, imos dar un momento a analizar unha definición de alto nivel destes dous enfoques.
Os sitios web responsivos teñen un deseño fluído que cambia e adapta sen importar o tamaño da pantalla que se utilice. As consultas de medios permiten que os sitios responsivos incluso cambien "a tempo real" se o navegador redimensiona.
O deseño adaptativo usa tamaños fixos baseados en puntos de interrupción predeterminados para entregar a versión de deseño máis axeitada para o tamaño da pantalla que se detecta cando se carga primeiro a páxina.
Con esas definicións amplas no seu lugar, volvemos as nosas áreas clave de foco.
Facilidade de desenvolvemento
A diferenza máis significativa entre o deseño web sensible e adaptable é a forma en que estas solucións se aplican a un sitio web. Debido a que o deseño atractivo crea un deseño completamente fluído, é mellor utilizalo nos proxectos nos que está a rediseñar o sitio desde o principio . Tratar de actualizar o código dun sitio web existente para volverse receptivo adoita ser un asunto agotador porque simplemente non tes o nivel de control que tería se estiveses desenvolvendo ese código desde cero e tendo en conta o deseño sensible nas etapas máis tempranas dese proceso . Isto significa que cando se adapta a un sitio para que sexa sensible, obrigáronlle a facer compromisos para manterse dentro da base de código existente.
Se estás a traballar cun sitio web de ancho fixo existente, un enfoque adaptativo significa que podes deixar o tamaño que o sitio foi deseñado para intacto e engadir puntos de interrupción adaptativos adicionais segundo sexa necesario. Nalgúns casos, se o orzamento dun proxecto é pequeno e se só acomodará unha pequena cantidade de traballo de desenvolvemento, pode optar por só engadir novos puntos de interrupción adaptativos para tamaños máis pequenos / con pantalla móbil. Isto significa que permitiría que todas as pantallas máis grandes usen o mesmo esquema: quizais unha versión de punto de interrupción de 960 que era o que desexaba inicialmente este sitio.
A vantaxe de un enfoque adaptativo é que pode aproveitar mellor o código dun sitio existente, pero unha das desvantaxes é que está creando modelos de deseño diferentes para cada punto de que vostede opte. Isto que terá un impacto sobre a carga de traballo necesaria para desenvolver e manter esta solución a longo prazo.
Control de deseño
Un dos puntos fortes dos sitios web responsivos é que a súa fluidez permítelles adaptar e soportar todos os tamaños de pantalla fronte aos só os puntos de parada predeterminados determinados nun enfoque adaptativo. A realidade, porén, é que os sitios responsivos poden verse moi ben con certos tamaños de pantalla (típicamente tamaños que corresponden a dispositivos populares dispoñibles no mercado), pero o deseño visual adoita romperse entre esas resolucións populares.
Por exemplo, un sitio pode parecer xenial no deseño de pantalla panorámica de 1.400 píxeles, o tamaño da pantalla media de 960 píxeles e a pantalla pequena en 480 píxeles, pero que dicir dos estados intermedios destes tamaños? Como deseñador, ten pouco ou ningún control sobre estes tamaños entre o tamaño e o aspecto visual da páxina a estes tamaños é a miúdo menos que ideal.
Cun sitio web adaptativo, tes moito máis control sobre o deseño dos diferentes esquemas que se usan porque son tamaños fixos en función dos puntos de saída establecidos. Eses estraños estados intermedios non son un problema máis porque vostede deseñou coidadosamente cada "look" (que significa pantalla de cada punto de quebra) que se entregará aos visitantes.
Tan atractivo como este nivel de control de deseño pode soar, debes ter en conta que chega a un prezo. Si, ten control total sobre o aspecto de cada punto de quebra, pero iso significa que debe investir o tempo de deseño necesario para o deseño para cada un destes deseños únicos. Canto máis puntos de interrupción vostede elixe para o deseño, máis tempo terá que gastar nese proceso.
Paquete de Soporte
Tanto o deseño web sensible como o adaptativo gozan dun soporte moi robusto, especialmente nos navegadores modernos.
Os sitios adaptativos requiren compoñentes do lado do servidor ou Javascript para a detección do tamaño da pantalla. Obviamente, se un sitio adaptativo require Javascript, significa que un navegador necesita habilitalo para que o sitio funcione correctamente. Isto pode non ser un motivo importante para ti xa que a maioría das persoas terán Javascript nos seus navegadores, pero sempre que un sitio ten unha dependencia crítica de calquera cousa, débese notar.
Os sitios web responsivos e as consultas multimedia que os potencia funcionarán ben en todos os navegadores modernos. Os únicos problemas que terán son as versións máis antigas de Internet Explorer xa que as versións 8 e abaixo non admiten consultas multimedia . Para evitar isto , úsase un JFP de Javascript , o que significa que tamén existe unha dependencia de Javascript, polo menos para aquelas versións anticuadas de IE. Unha vez máis, isto pode non ser unha gran preocupación para vostede, especialmente se a súa análise de sitios mostra que non recibe moitos visitantes usando esas versións máis antigas do navegador.
Amizade futura
A natureza fluída dos sitios web responsivos dálles unha vantaxe sobre os sitios adaptativos cando se trata de simpatía futura. Isto ocorre porque os sitios de resposta non están construídos para acomodar só un conxunto de puntos de interrupción previamente establecido. Adáptanse para encaixar en todas as pantallas , incluídas aquelas que en realidade non estarían no mercado hoxe. Isto significa que os sitios de resposta non terán que ser "fixos" se unha nova resolución de pantalla de súpeto se fai popular.
Mirando a incrible variedade na paisaxe do dispositivo (a partir de agosto de 2015, había máis de 24.000 dispositivos Android distintos no mercado), ter un sitio que fai o mellor para acomodar esta gran variedade de pantallas é de vital importancia para o futuro. Isto débese a que a paisaxe é improbable que sexa menos diversa no futuro, o que significa que o deseño para pantallas ou tamaños específicos será imposible, se aínda non chegamos a esa realidade.
No outro lado deste escenario de comparación, se un sitio é adaptativo e non acomodar novas resolucións que poden chegar a ser importantes no mercado, entón pode que estea obrigado a engadir ese punto de interrupción aos sitios que creou. Isto engade tempo de deseño e desenvolvemento a proxectos e significa que estes sitios adaptativos deben ser monitorizados de forma consistente para garantir que non se introduzan novos puntos de interrupción no mercado que se deben engadir ao sitio. Unha vez máis, tendo en conta que a diversidade dos dispositivos é o que é, ter que comprobar constantemente os novos tamaños e, posiblemente, acomodalos con novos puntos de interrupción é un desafío continuo que terá un impacto sobre o traballo que debe para soportar un sitio e o custo dese mantemento a empresa ou organización para quen está o sitio.
Rendemento
O deseño web receptivo foi acusado (de forma inxusta, en moitos casos) de ser unha solución pobre desde o punto de vista de velocidade / performance de descarga. Isto débese en gran parte ao feito de que, nos primeiros días de este enfoque, moitos deseñadores web simplemente enviaban consultas de pequenas páxinas a un CSS existente. Isto obrigou ás imaxes e aos recursos destinados a pantallas maiores a entregarse a todos os dispositivos, aínda que esas pantallas menores non usasen nos seus deseños finais. O deseño receptivo percorreu un longo camiño desde aqueles días e a realidade é que hoxe en día os sitios de alta calidade non sofren problemas de rendemento.
As velocidades de descarga lentas e os sitios web inchados non son un problema de sitio web sensible: é un problema que se pode atopar en todos os sitios web. As imaxes que son moi pesadas, se alimentan de redes sociais, scripts excesivos e máis e pesan un sitio, pero poden crearse sitios de resposta e adaptación para cargar de forma rápida. Por suposto , tamén poden construírse de forma que non faga o desempeño como prioridade, pero non é un trazo da propia solución, senón un reflexo do equipo que estivo involucrado no desenvolvemento do propio sitio.
Máis aló do deseño
Un dos aspectos máis atractivos do deseño web adaptativo é que non só teña control sobre o deseño do sitio para os puntos de interrupción establecidos, senón tamén os recursos que se entrega para esas versións do sitio. Por exemplo, isto significa que as imaxes retina poden ser enviadas só a dispositivos retina, mentres que as pantallas non retina obtén imaxes máis axeitadas que son máis pequenas no tamaño do arquivo. Outros recursos do sitio (ficheiros Javascript, estilos CSS, etc.) poden ser entregados intelixente só cando son necesarios e serán utilizados.
Este uso do deseño web adaptativo vai moito máis alá da simple ecuación de "se está adaptando un sitio web, o adaptador pode ser un enfoque máis fácil de usar". Todos os sitios, incluídos os rediseños completos, poden beneficiarse dun enfoque máis intelixente para unha experiencia máis adaptada.
Este escenario mostra a natureza matizada deste debate "sensible versus adaptativo". Aínda que é certo que un enfoque adaptativo pode ser máis axeitado que o receptivo para os cambios no sitio, tamén pode ser unha excelente solución para os rediseños completos. Do mesmo xeito, nalgúns casos pódese engadir unha visión sensible á base de código existente do sitio, dándolle a este sitio todos os beneficios dun enfoque totalmente receptivo.
Cal achegamento é mellor?
Cando se trata dun deseño web adaptable ou versátil, non hai un "gañador" claro, aínda que o sensible é o enfoque máis popular. En realidade, o enfoque "mellor" depende das necesidades dun proxecto específico. Ademais, isto non ten que ser unha situación "ou non". Hai moitos profesionais da rede que están a construír sitios que combinan o mellor deseño web sensible (ancho de fluído, apoio futuro) cos puntos fortes do deseño adaptativo (mellor control do deseño, carga intelixente de recursos do sitio).
Con frecuencia coñecido como RESS (Deseño Web Responsivo con Compoñentes Lados do Servidor), este enfoque mostra que realmente non hai un "único tamaño que se adapta a tódalas solucións". Tanto o deseño web receptivo como o adaptador teñen os seus puntos fortes e os seus retos, polo que precisa determinar cal funcionará mellor para o seu proxecto específico ou se unha solución híbrida realmente o convén mellor.