WEB

Principales diferencias entre diseño web responsive y diseño líquido

La nueva era de Internet ya a llegado, casi la mitad de los españoles acceden desde sus dispositivos móviles e incluso tabletas, el visitante tradicional sigue existiendo no obstante es de vital importancia modernizarse y tener la máxima compatibilidad en tu diseño web con los motores de búsqueda, sobre todo para Google, Yahoo y Bing

Principales diferencias entre diseño web responsive y diseño líquido

Los smartphones son los de mayor utilización en estos momentos, le siguen las tabletas y por último el típico ordenador de escritorio, teniendo todo esto en cuenta voy a hablar sobre la diferencia entre el diseño líquido y el diseño web responsive.

El diseño líquido: En ingles se le conoce como 'liquid or fluid layout'. Este tipo de diseño llamado líquido o en Sudamérica fluido se refiere a cuando un tamaño es ajustado en la totalidad de sus dimensiones horizontales con la pantalla de manera automática y no es preciso utilizar el scroll (barra horizontal para realizar desplazamientos).

Referente al diseño es expandido en su ancho para la pantalla con sus diferentes elementos, sobre todo para el (div), el porcentaje disponible es del 100 por ciento para la pantalla. Un problema habitual es cuando se utiliza para pantallas de gran tamaño, por ejemplo en el TV Full HD, pues tienen una resolución por lo general de 1.920 x 1.080 px y esto hace desajustar totalmente su tamaño, se observan grandes espacios en color blanco, tampoco se salvan las pantallas con resoluciones inferiores, pues las imágenes son miniaturizadas y el texto es de difícil lectura.

En definitiva para evitar la problemática mencionada anteriormente se fija un ancho mínimo para que el scroll aparezca visible y el usuario pueda desplazarse horizontalmente por el sitio web.

comunicado

Os dejo arriba una imagen para que puedas ver los principales problemas a los que se enfrentan los diseñadores a la hora de la realización de layout, es ideal para tener una idea del tipo de pantalla y dispositivo y saber como ajustar tu proyecto web.

El diseño web responsive: En estos momentos es el tipo de diseño preferido por casi todo el mundo, es basado en retículo (por lo general de 960px en su ancho) y es dividido en un número para las columnas iguales, no importa si son pares o son impares. Importante remarcar, las columnas podrían ser elásticas sin problema (me refiero al ancho total de un porcentaje determinado), esto último es perfecto para ajustarlo al dispositivo.

Referente a las importantes CSS3 (hojas de estilos), el visitante visualiza la página dependiendo de unos parámetros asignados, son los siguientes:

  • El ancho y su alto para la ventana del navegador (high y width).
  • La orientación del dispositivo (ya sea landscape o portrait), dicho de otra forma vertical u horizontal.
  • El Aspect-ratio (cuando se define la proporción entre el alto y al ancho de la pantalla).
  • El color (para representar la totalidad de los colores para la pantalla).

Otros parámetros serían el scan, color-index, monochrome y por último device aspect-ratio.

Para acabar, si buscas una empresa para encargar tu proyecto, www.enfusion.es ofrece diseño web responsive para diferentes temáticas, obviamente hay muchas mas empresas ofreciendo este servicio, pero como soy de Barcelona es el sitio web que encontré navegando por Internet.