Logotipo de Xitrus.
sígueme en facebook

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
08
7

Diferencias entre Responsive Design y web adaptativa

Ahora toda web que quiere llegar a todo el mundo tiene que estar adaptada para ser visitada desde dispositivos móviles, mediante Responsive Design o adaptándola completamente a estos dispositivos.
La diferencia entre ambas formas reside sobre todo en que en el Responsive Design se reestructura la web para coger en pantallas estrechas y una web que se adapta cambia (desde el servidor o desde el cliente) el contenido de la web, como puede ser la calidad de sus imágenes.

Cada vez es más necesario crear un diseño responsivo, ¡así que no lo dudes!.

Vamos a comparar las diferencias entre los dos términos, aunque en la práctica se usan tres formas distintas para adaptar páginas a dispositivos móviles.
La primera es el Responsive Design y habéis visitado muchas páginas que lo ponen en uso (podéis ver Xitrus en vuestro móvil y se adaptará) y por otro lado encontramos las que se adaptan mediante JavaScript o las que se adaptan mediante El servidor.

Responsive Design

No voy a hablar mucho sobre el Responsive Design, ya que en este blog se ha hablado mucho sobre el tema, pero se pone en práctica con ayuda de CSS3.
En esta técnica se pone en uso las @media queries, los tamaños en porcentajes, el uso de la meta-tag Viewport y poco más, normalmente todo con CSS.

La gran ventaja de esta técnica es que al instante se reajusta la web, ya sea desde el navegador haciendo la pantalla más pequeña o con el móvil girando la pantalla, pero esto tiene una gran desventaja que reside en el tamaño de la web.
Una web cuando la vemos desde el PC normalmente vemos todo con el tamaño ideal, pero al verlo en un móvil vemos imágenes reducidas, pero que siguen ocupando lo mismo que en el PC y eso genera un tráfico extra en nuestro móvil, que hará que la carga sea más lenta. Y al igual que pasa con imágenes también pasa con scripts, tener en una web jQuery para un slider que en los móviles se oculta es un gran incremento de recursos innecesarios.

Web adaptativa desde el cliente

Las webs adaptativas que realizan sus cambios en el cliente lo realizan, obviamente, con JavaScript y es la opción menos común a la hora de adaptar una web para los móviles, pero que puede ayudar mucho a reducir el tráfico de la web.
Lo que se puede realizar con JavaScript se basa sobre todo en permitir o no la carga de scripts, comprobando si se visualiza desde un móvil y omitiendo la carga de un slider. Otros cosas que se suelen hacer es cargar una imagen u otra, en distintos tamaños dependiendo de donde lo visualicemos, reduciendo también tráfico.

Esta alternativa es muy buena y puede complementar fácilmente al Responsive Design, que aún no tiene forma de usar una imagen u otra según desde donde se visualice (aunque os adelanto que a W3C tiene un borrador de un elemento que haría esta función, pero aún queda mucho para ello).

Web adaptativa desde el servidor

Esta alternativa es muy usada, gran parte de los mayores CMS tienen la opción de dar desde el servidor una versión totalmente distinta adaptada para móviles, que tiene un código distinto en un PC y en la web.
Esta técnica consiste en detectar el dispositivo que se usa, normalmente con el nombre del agente del navegador (en el puede aparecer por ejemplo: "Android" o "iPhone") y sabiendo si estás en un móvil se envia una web u otra distinta. Por poner un ejemplo si entráis en Genbeta Dev (un blog de programación) con el PC, un tablet o un móvil os encontraréis tres versiones distintas de la web.

Para una web muy simple no tiene sentido llevar a cabo el esfuerzo para hacer la adaptación para PC y móvil, y por ello es mejor el Responsive Design, pero para un blog o web compleja no es mala idea hacer una adaptación para distintos tipos de dispositivo, aunque si se usa un gestor de contenidos como Wordpress o Joomla probablemente encontraremos complementos que nos lo harán solo.

Resumen

He comparado el Responsive Design y las web adaptativas, pero sin contar sus diferencias pienso que es esencial adaptar una web a dispositivos móvies, algo que ya comenté y expuse varios de los motivos por los que debemos de hacerlo.

Comentarios

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
Cerrar sesión
Usuario: Contraseña: