Powered by

Móvil & Web Hotel

5 Diferencias en Diseño web móvil: Responsive web vs diseño líquido

6 comentarios

18 julio 2012 a las 5:00, por

Diseño web Móvil

Diseño web Móvil

Hace un tiempo, antes que cobraran gran importancia los dispositivos móviles, una de las preguntas que siempre debe hacerse antes de empezar a diseñar o crear un maqueta web, es si se quiere hacer un diseño fijo también conocido por “Responsive web” o diseño líquido.  La diferencia entre ambos conceptos radica en hacer una web con un tamaño fijo para resoluciones standard como 1024px o 1280px, o crear anchuras por porcentajes para que se ajuste a cualquier resolución. Las ventajas e inconvenientes de cada uno de ellos eran varias, pero siempre había que sacrificar algo. Estos son algunos de los ejemplos a los que me refiero:

  • Dejar una anchura fija y los usuarios que tengan monitores menores de 800px de ancho se les mostrará un scroll horizontal para consultar toda la información de la página.
  • A partir de la anchura fija de mi web, dejar que el resto del ancho de la página se vea completamente vacío.
  • Otra opción era hacerla líquida y que ocupara toda la pantalla a cualquier resolución. Aunque surgía el problema cuando se quisiera dejar banners con una anchura fija.
  • Si se hacía una maqueta líquida y se quería utilizar elementos absolutos que ocupara una posición exacta, ¿cómo se reestructuraría?

Estas opciones se estudiaban y se acababa decidiendo por alguna de ellas, la más común siempre solía ser una estructura fija para resoluciones standard de 1024px o 1280px. Con esta decisión lo que se conseguía era el siguiente pensamiento:  No suele haber usuarios con monitores menores a estas resoluciones y siempre intentaré controlar la estructura y posición de mis elementos.

Desde hace unos años esta problemática se ha visto incrementada con la aparición de los dispositivos móviles, donde hay que tener en cuenta resoluciones de desktopmóvil  y tablets. Por lo que la teoría anterior ya no era válida. Debido a que con la entrada de los móviles el abanico de resoluciones se amplían sobremanera. Cada marca lanza al mercado los dispositivos con las resoluciones más apropiadas a sus modelos. Llegados a este punto hay que hacerse varias preguntas:

  • Preocuparse de las resoluciones de varios dispositivos, de varios de ellos o de todos.
  • Se buscará que se vea correctamente la web en dispositivos cuando los muestren en horizontal o también en vertical.
  • Esto multiplicará el trabajo por cada dispositivo con el que quiera trabajar.
  • Se plantea ya la navegación a través de televisores o consolas que darán resoluciones de grandes dimensiones, o ya buscaremos soluciones a este problema cuando se estandaricen.
  • Si se adapta por porcentajes para todo tipo de resoluciones, pero quiero seguir con mi estructura controlada para resoluciones mayores de 1280px, ¿qué decisiones se tomarán?

Al plantear estas preguntas, nos damos cuenta que falta un punto intermedio más “controlable” para poder solucionar estas cuestiones independientemente. Aquí es donde de una forma totalmente natural y lógica entra el concepto de Responsive web o páginas sensibles.

¿Para que la web se vea bien en todos los dispositivos nos decantaremos por páginas líquidas? No, serán sensibles (Responsive). Lo que ganamos con este tipo de maqueta es que podemos partir de una estructura fija donde vea mis elementos como se imaginaron cuando se hizo el diseño, pero se podrá adaptar a menores resoluciones para verlo correctamente en un móvil o en una tablet: A cierta resolución lo veremos “fijo” y a menores resoluciones se irá adaptando y se verá correctamente y sin hacer scroll horizontal. Para ello se utilizarán las llamadas mediaqueries, con los que podremos controlar cada resolución independientemente a través de nuestros estilos css. Una sola plantilla se podrá adaptar a cualquier tipo de dispositivo. Dándole mayor o menor importancia a cada elemento, controlando su tamaño, posición, color, o lo que queramos.

Podría decirse que las principales ventajas de usar plantillas responsive frente a plantillas líquidas serían:

  1. No todos los contenedores de la plantilla deben definir sus anchos en porcentajes.
  2. Podemos ayudarnos de mediaqueries.
  3. Control absoluto al “recolocar” elementos a diferentes resoluciones.
  4. Mezcla de estructuras fijas y líquidas.
  5. Más facilidad a la hora de reescribir elementos parta colocarlos en diferentes posiciones según la resolución.
Innwise

Innwise

Optimizamos tu estrategia de comercialización online mediante una eficiente gestión de canales de distribución, buscando a través de un revenue management un resultado final rentable siempre como objetivo. Ponemos a tu disposición un amplio paquete de soluciones de emarketing.

También te puede interesar