Miguel Peribáñez | Diseñador y Consultor UX

Miguel Peribáñez - Diseñador y Consultor UX

BUENAS PRACTICAS DE DISEÑO RESPONSIVE PARA GRANDES PROYECTOS

Todo el mundo sabe cómo funciona el diseño responsive, pero la mayoría de diseñadores todavía están buscando las mejores prácticas para implementarlo.

NOTA: Para conseguir buenas prácticas, mostraré ejemplos escritos en LESS, el pre-procesador CSS. Pero puedes conseguir los mismos resultados usando SASS.

PREGUNTAS HABITUALES EN UN GRAN PROYECTO DE DISEÑO RESPONSIVE

En tu primer proyecto implementando diseño responsive, te haces a tí mismo muchas preguntas como:

¿Cómo organizo el proyecto?

¿“Desktop First” o “Mobile First”?

¿Dónde pongo los estilos de media query en el CSS?

¿Puntos de límite abiertos o cerrados?

¿Cuáles son los mejores puntos límite?

¿Cuántos puntos límite?

ORGANIZANDO EL PROYECTO

Para conseguir un orden, lo más importante es separar los estilos en pequeños componentes con archivos separados. Si usamos LESS o SASS podemos usar @import para la separación. De este modo conseguimos organizar, y la salida será un solo archivo CSS, y eso es muy bueno para el navegador y el servidor para evitar tener problemas con el número de peticiones HTTP.

Diseño Responsive

Diseño Responsive

¡¿”DESKTOP FIRST” O “MOBILE FIRST”?!

Primero debemos entender cada uno de los enfoques.

Desktop First:

– La web comenzó en los ordenadores de sobremesa, por esa razón, es muy normal para nosotros pensar en Desktop First.

– Los navegadores antiguos como las versiones antiguas de Internet Explorer (7 y 8) no soportan las nuevas media queries para diseño responsive.

Mobile First:

– Para conseguir que un sitio desktop funcione bien en un móvil, debemos anular un montón de estilos, y anular “no mola”.

– Puedes separar estilos para dispositivos grandes, de esta manera, cargarás hojas de estilo más pequeñas y por lo tanto más rápido en la versión móvil.

– Es más fácil planear un sitio web de esta manera.

OK entonces, ¿Cuál es la mejor manera? Paciencia, llegaremos a ese punto pronto.

¿DÓNDE PONGO LOS ESTILOS DE LAS MEDIA QUERIES?

La separación de archivos te da un orden fácil de estructura, y por esa razón, el mejor lugar para poner las media queries es en cada uno de los componentes, cerca de sus propios estilos.

Diseño Responsive

Ahora, como tenemos los mismos puntos límite en todos los componentes, será mejor ponerlos en variables para el mejor mantenimiento del código. Crea un archivo less o sass (por ejemplo: devices.less), con los puntos límite comunes como variables.

Diseño Responsive

y ahora simplemente usa esas variables en su lugar:

Diseño Responsive

Este truco te evitará que tengas que cambiar miles de líneas de código si decidas cambiar los puntos límite.

¿PUNTOS LIMITE CERRADOS O ABIEROS?

Antes de nada, ¿Qué significa? Punto Límite Abierto, es cuando tenemos una media query con un valor de comienzo pero no de final.

Por ejemplo:

Diseño Responsive

Punto Límite Cerrado, es cuando tenemos una media query con ambos valores, inicio y final, cerrados.

Por ejemplo:

Diseño Responsive

OK ¿Pero cuál es mejor usar?

¡Usa sólo Puntos Límite Cerrados! A no ser que sea el último punto límite, para la resolución más grande que quieras soportar.

Por ejemplo:

Diseño Responsive

Te preguntarás por qué, y es porque en un proyecto grande, en muchos casos atacarás estilos que afectarán puntos límite a los que no quieres afectar.

¿Pero qué pasa si quiero usar los mismo estilos en 2 o más puntos límite?

¡Muy fácil! puedes usar todos los puntos límite que quieras en la misma media query usando el signo “,” (que significa “o”), y porque tenemos los puntos límite en variables para manejarlos fácilmente.

Diseño Responsive

VOLVIENDO A LA CUESTIÓN… ¿“MOBILE FIRST” O “DESKTOP FIRST”?

Desde mi punto de vista, todo depende del proyecto, ya que ambos métodos tienen sus ventajas y desventajas. Deberás elegir el que mejor se adapte a los objetivos de tu proyecto.

“Desktop First” tiene la desventaja de que te obliga a anular, y recuerda que “anular no mola”.

“Mobile First” asume que los estilos básicos están en los estilos para móviles, pero asumir eso es problemático.

Por ejemplo,

Digamos que tienes un sitio para móviles, y el menú lateral se muestra así:

Diseño Responsive

(la dirección del texto está al revés porque este sitio está escrito originalmente en una idioma RTL)

Pero en un ordenador de sobremesa el menú se ve así:

Diseño Responsive

Los estilos son muy diferentes entre ambas opciones, y necesitaremos anular muchísimos estilos para superar estas diferencias.

OK, entonces ¡¿Cuál es la mejor manera de trabajar en un Diseño Responsive?!

¡“BASIC FIRST”!

En este método de diseño web, declararemos sólo los estilos comunes para nuestro componente, y en nuestros puntos límite simplemente añadiremos más estilos al componente, así evitaremos la anulación de estilos en nuestros puntos límite.

Ejemplo:

Diseño Responsive

Las dos últimas preguntas:

“¿CUÁLES SON LOS MEJORES PUNTOS LÍMITE?” Y “¿CUÁNTOS PUNTOS LÍMITE?”

En realidad no existen mejores o peores puntos límite. En el último proyecto que participé, queríamos trabajar en pantallas grandes (mayores de 1024px) con un menú que se abriese en una fila, mientras que en móvil o tableta se mostrase oculto con un “botón de hamburguesa”.

Tomamos la decisión de que un dispositivo es móvil hasta el ancho de 570px, ¿Por qué? Porque 600px es el comienzo de las pantallas en tablets como la Nexus 7 y queríamos que la “vista de tableta” fuera con una rejilla de dos columnas.

Pero no existen realmente pantallas de móvil, tablet o desktop. Con el iPad en vista horizontal verás la “vista desktop”, y en el “Samsung Galaxy S5” en posición horizontal, verás la “vista tablet”.

Por esta razón, la decisión más importante a la hora de hacer un diseño web responsive es que tu sitio web se vea bien en todas las resoluciones, y los puntos límite tendrás que decidirlos tu como diseñador para que se adapte bien según el diseño que hayas planteado.

Así que, esta es mi humilde visión de buenas prácticas en el planteamiento de un diseño responsive para grandes proyectos. Esto es todo, espero que lo hayas encontrado interesante y que hayas podido aprender algo de mis experiencias.