¿Qué es el diseño web «responsive»? adaptado de sitios web a celulares

Cuando hablamos de diseño web, debemos tener en cuenta que en la actualidad no sólo nos referimos a «la web» como una ventana de información llena de enlaces y que sólo se mostrará en un monitor, mientras estamos sentados en la computadora de escritorio, teclado en frente y mouse en la mano. Los tiempos han cambiado, la web e internet también. Los teléfonos celulares con internet ya alcanzan el 50% del tráfico en el promedio de sitios web, independiente del rubro.

Cuando la internet dejó de ser sólo para la Computadora de Escritorio

Desde que los teléfonos celulares se han hecho masivos y casi una extensión del brazo, con el avance de la tecnología y acceso a redes de datos, los móviles ya no sólo sirven para enviar y recibir llamadas o mensajes de texto SMS. También tienen función de navegar por sitios web y descargar datos interactivos (streaming de música, video, conexión de segundo plano, GPS, etc) y eso ha llevado a que la accesibilidad de sitios web desde pantallas más pequeñas deba sufrir adaptaciones.

Pero, y sin querer profundizar mucho más o ahondar en datos técnicos, a la fecha de escribir este artículo (terminando 2018), son cientos de dispositivos que pueden «conectarse» a internet, si lo entendemos como red que transporta información, y también «acceder a la web», si a eso lo entendemos como el ver páginas web o sitios de información texto/multimedia en una pantalla.

Mencionando sólo algunas «nuevas» funciones que recientemente ya se lanzaron y se están ampliando día a día, podemos: configurar temperatura, encendido y apagado de lavarropas, aire acondicionados, regular la calefacción central de radiadores, todos ellos a distancia desde nuestro celular y accediendo a la red hogareña. También es posible utilizar los dispositivos GPS y pantalla en modelos de automóviles, a fin de poder regular diferentes variables de rendimiento, control y ayuda técnica, próximo control de taller, caminos alternativos, planificación de viaje, agenda, televisión, noticias, películas… A todo esto se le llama «IOT – Internet of Things» (internet de las cosas), y hasta la heladera ya tiene pantalla tactil con conexión wifi para armar la próxima compra en el supermercado con un asistente que nos hará la lista.

¿Por qué los diseños de páginas y sitios web deben ser adaptativos, responsivos y móviles?

Veamos que se han mencionado hasta ahora diferentes conceptos y términos, que podrían entenderse muy superficialmente como similares, pero no son lo mismo.

Hoy un sitio web masivo debería estar diseñado para poder visualizarse adecuadamente en todo tipo y de tamaño de pantallas. Hablamos de diferentes dispositivos (computadora de escritorio, celular, televisor, tablet, etc) y además en diferentes tamaños (los TV no tienen todos las mismas dimenciones, igual que los celulares ó monitores de computadora).

Entonces, con técnicas avanzadas de diseño HTML/CSS y la incorporación del lenguaje de programación JavaScript, es posible poder modificar la apariencia de una plantilla de diseño web a fin de que pueda quedar acomodada a las diferentes dimenciones de pantalla. Esto radica en una planificación inteligente de dicha plantilla, desde su inicio, pensando todo un proyecto de manera integral y atento a análisis de UX/UI (usabilidad y experiencia), a fin de que cumpla con las necesidades y funciones.

¿Cuáles son los beneficios de HTML5 y CSS3 para encargar su diseño web con esta tecnología? ¿Por qué elegir un diseñador y programador web que maneje HTML 5 y CSS 3, en el rediseño de una página web? Conozca las ventajas en el artículo especializado.

¿Cómo funciona la técnica de diseño responsive ó responsivo, que se adapta a doferentes tamaños de pantalla?

No queriendo ser muy profundo, pero sí claros y precisos en dos términos, las medidas en lo «digital» y el «diseño web» pueden clasificarse como relativas y absolutas. Es decir: las estrictas y las dinámicas. Estas últimas se han popularizado y son la base de poder «calcular en vivo» las medidas de cada dispositivo, su resolución, tamaño de pantalla en alto y ancho.

Entonces, si tenemos una pantalla de computadora que mide 1.000 x 1.000 y seleccionamos para un elemento la medida de 50%, el sistema del navegador calculará esa medida en 500, graficándola de esa manera frente a nuestros ojos. Ahora, si ese mismo diseño web lo abrimos en celulares, y está configurado para adaptarse, tomará el tamaño de pantalla del dispositivo que podríamos decir a modo de ejemplo en 200 x 200, mucho más pequeño que el anterior ejemplo, calculándose así el tamaño del objeto de manera dinámica en un 50% lo que dará un elemento de 100.

Esto es un resumen muy acotado y simple, que carece de profundidad y exactitud técnica, pero elaborar una plantilla utilizando estas medidas y métodos que se van adaptando, requiere de conocimiento, amplia experiencia y planificación desde el primer minuto en pensar las transformaciones de los módulos, información y espacios dentro de una plantilla responsiva para el sitio web.

¿Qué diferencia hay entre diseño responsivo y adaptativo en la programación y maquetado de plantillas para sitios web?

Aquí una aclaración debido a que por cuestiones de simplificación, caímos en la inexactitud y revisamos nuevamente el artículo. Y es la diferencia entre responsivo, adaptativo y móvil.

Concepto del Diseño RESPONSIVO ó responsive:

Es aquel diseño construído y maquetado desde su inicio en poder responder de manera DINAMICA y flexible ante los cambios en tamaños de pantalla, resolución y múltiples dispositivos. Mantiene su aspecto estético, colores, pero «se acomoda» flexionando los tamaños de elementos internos a fin que estos puedan caber en las nuevas dimenciones.

Concepto del Diseño ADAPTATIVO ó por especificaciones:

Es un intermedio entre «responsivo», «móvil» y el viejo tradicional diseño web, ya que tomará el tamaño del dispositivo y buscará un archivo diferente de diseño que lo mostrará en versiones de acuerdo a configuraciones pensadas para cada modelo. Dicho de otro modo, lo pensemos al sitio web como una persona: el esqueleto del sitio web será el mismo, pero dependiendo de la talla y contextura física, se irá vistiendo dentro de la misma colección de ropa y estilo pero con diferente talle; irá a buscar en el armario el tamaño de prendas que necesita en cada dispositivo y tamaño de pantalla.

Concepto de Diseño Mobile, directo para dispositivos móviles:

Aquí se ha diseñado, maquetado y armado la configuración especial para pantallas pequeñas o dispositivos móviles. Si bien podrá verse en pantallas de mayor tamaño, la estructura (esqueleto de la información) ya estará determinada para visualizarse en un formato de poco espacio, por lo que está reducido y agilizado al máximo en velocidad de carga, función táctil, permisos para aprovechamiento de cámara o GPS y notificaciones de celular, etc.

Dentro del Diseño Mobile, tenemos 3 sub-conceptos o formas de trabajar:

Diseño AMP: es un diseño super simplificado y que regresa casi a la condición primitiva de la internet, con sólo los recursos estéticos y textos necesarios para hacer super liviana la página web, careciendo de interactividad, animación, etc. Esta es una forma de poder cubrir aquel público con teléfonos realmente lentos, de poca memoria, redes de telefonía con muchos cortes o bajísima velocidad.

Diseño mobile-first: es el concepto de creación pensando «desde el teléfono primero, que después se vea bien en la computadora», es decir, una filosofía de crear un diseño excelente para teléfonos y pantallas de menor tamaño que, al escalarse a otros tamaños mayores, pueda visualizarse de forma adecuada. Esto es una nueva filosofía que invierte lo que se venía haciendo, y la adaptación inversa se motiva en que cada vez es más la cantidad de público que usa teléfonos para navegar, con lo que a futuro y mediano plazo el mantenimiento de estos diseños es más económicos y técnicamente eficiente.

Diseño doble móvil/app/web: La plantilla puede ser similar, pero el esqueleto entre cada versión es muy diferente. Si se accede desde un dispositivo móvil o pantalla pequeña, el servidor de web hosting seleccionará una plantilla totalmente diferente a si se accede desde una computadora o TV de gran tamaño. Esto lleva costos y planes de desarrollo diferentes, pero en muchas oportunidades y proyectos es la opción más adecuada.

¿Sabía que en promedio más del 50% de las visitas en un sitio web se reciben desde teléfonos celulares? La porción de Tablets es en promedio un 5-10% y se está reduciendo. La porción de visitas desde televisores está entre el 1 y 5%. Estos valores varían entre una web de videos y otra de noticias o contenido técnico, pero son promedios de una tendencia en aumento en favor de los teléfonos celulares.

Tagged: Tags

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *