El internet, los navegadores y la web han evolucionados vertiginosamente en los últimos años, ya pasaron esos tiempos donde solo accedíamos a internet desde un computador de escritorio. Con la aparición de nuevos dispositivos móviles como los Smartphone y Tablet, la navegación por internet a cambiado, pero las páginas web no se adaptaron de forma inmediata a este cambio, es por eso que una página web normal, creada con estándares HTML no se visualiza de forma correcta a todas los resoluciones de los dispositivos, lo que provocaba una pobre experiencia de navegación. Este cambio importante llevo a la W3C que es el consorcio internacional que produce las recomendaciones más importante para la World Wide Web, a recomendar en el año 2008 lo que se denomina “One web” que incorpora y hace referencia a la experiencia de navegación desde cualquier tipo de dispositivo ya sea un Smartphone, una Tablet o un computador de escritorio y con cualquier tipo de resolución. Es por esto que a esta evolución se le denomina “Responsive web Design” o diseño web adaptable.
En la actualidad el desarrollo y diseño de páginas web se centra principalmente en la experiencia del usuario y en su correcta visualización desde todos los dispositivos ya sean móviles o de escritorio, esto se logra aplicando una serie de técnicas que permiten a nuestra página web adaptarse automáticamente a la resolución de la pantalla del dispositivo desde donde está accediendo el usuario. Estas técnicas se aplican con tecnologías HTML5, CSS3 y JavaScript, que nos permiten configurar diversos parámetros para hacer más efectiva su correcta visualización.
HTML5 es la última versión de HTML, el lenguaje en el que se crean las páginas webs, pero también es un término o concepto que agrupa el uso de nuevas tecnologías web como al mismo HTML5, CSS3 y nuevas capacidades de JavaScript, las que nos permiten crear sitios web y aplicaciones para dispositivos móviles. (Pronto curso de HTML5 y CSS3)
Responsive web Desing o diseño web adaptativo
El diseño web adaptable o “Responsive web Design” consiste en aplicar una serie de técnicas que permiten a nuestra página web adaptarse a la pantalla, dimensión y resolución del dispositivo de cual un usuario está accediendo. Los tamaños de pantalla cambian según el dispositivo con el que se accede a los contenidos web, en este sentido, no es lo mismo acceder desde un Smartphone que acceder desde un computador de escritorio o Notebook porque obviamente el tamaño de las pantallas cambia.
Utilizando tecnologías HTML5, JavaScript y CSS3 podemos crear versiones de nuestra página web en función de la resolución de la pantalla a utilizar.
En general podríamos decir que el principal concepto a tener en cuenta en esto son los CSS Media Queries. Una herramienta que nos permite activar y desactivar o modificar partes del CSS de nuestro diseño según el tamaño en pixeles de la pantalla.
Otro de los pilares básicos responsive design es trabajar con porcentajes en vez de con pixeles. Los grids de tu plantilla deben ser flexibles y poder adaptarse. La herramienta JQuery también puede ayudar de forma notable a los diseños sensibles explora su infinidad de opciones.
La importancia del Diseño web Adaptable
¿Están conformes las personas que navegan por internet a través de dispositivos móviles? Creemos que la mayoría de la personas no, la principal razón de esta situación es que la gran mayoris de los sitios web no están optimizados, no están pensados para verse a través de una pantalla tan pequeña como la de un teléfono móvil o la de una Tablet (Ya que su sitio fue creado hace un par de años donde aún no existían las Tablet’s ni los Smartphone’s).
Como decíamos antes, el usuario es lo más importante no podemos permitir que esto suceda con nuestras páginas web. Ya que lo más probable es que si el usuario no está conforme con la navegación o la resolución del sitio no es la óptima para el dispositivo desde el cual se está visitando, la persona abandone nuestro sitio web y busque otro que si cumpla con estas características, produciendo así una perdida de visitas y clientes de nuestro sitio.
Diferencia entre el diseño web Adaptable y el diseño web tradicional
La principal diferencia que existe, es que una web adaptable, la resolución del contenido se adapta automáticamente a la resolución desde el dispositivo que se está accediendo, permitiendo así una mejor experiencia de usuario sobre todo cuando se accede desde dispositivos móviles como Smartphone y Tablet. Mientras que el diseño web tradicional esta optimizado para acceder desde un computador de escritorio, y si en algún momento accedemos desde un teléfono móvil, la visualización no será la óptima, dando como resultado finalmente que el usuario abandone nuestro sitio web.
Ventajas de usar responsive web design (diseño web adaptativo)
- El sitio web será amigable con los dispositivos móviles, lo cual entre otras cosas puede incentivar un aumento de visitas en la página web.
- En el mediano y largo plazo se tendrá menos costos de mantenimiento puesto que se tiene que trabajar en una sola versión de HTML y CSS y se podrá cubrir prácticamente todas las resoluciones de pantalla.
- Se genera una sola URL independientemente de dispositivo lo cual supone una ventaja en el posicionamiento web en comparación a otras técnicas donde las direcciones de móvil y escritorio son distintas.
- Esta considerado por Google como buena práctica, con el uso de media queries y nos incitan a utilizar este método, porque así google boot no necesita tomar tanto contenido de la misma web.
- Se reduce el tiempo de desarrollo e implementación.
- Mejor experiencia de navegación para el usuario.
Desventajas de responsive web design (diseño web adaptativo)
- Necesariamente hay que cambiar el pensamiento para implementar Responsive. Se necesita ser algo minimalista, prescindir de diseños rígidos y/o reinventados.
- Los dispositivos más antiguos pueden tener algunos problemas con cargar toda la información del sitio.
Conclusión
El diseño web adaptable, o “Responsive Web Design”, surge como una respuesta crucial a la diversificación de dispositivos para acceder a internet. Se trata de una estrategia técnica, empleando HTML5, CSS3 y JavaScript, que asegura una experiencia consistente y óptima al adaptarse dinámicamente a diferentes tamaños y resoluciones de pantalla. Esta evolución resuelve la problemática de visualización en dispositivos móviles y de escritorio, garantizando así una navegación satisfactoria para los usuarios. Al priorizar la flexibilidad y la adaptabilidad, el diseño web adaptable se posiciona como una práctica imprescindible en la creación de sitios web actuales, brindando una experiencia de usuario mejorada y asegurando una presencia efectiva en el cambiante panorama digital.