03/04/2019

Publicado el 03/04/2019

Todos sabemos que nuestras webs deben ser responsive. Pero, ¿qué quiere decir exactamente tener un diseño web adaptable o responsive y por qué es importante? Por otra parte, ¿qué es un punto de ruptura o breakpoint web? Queremos ayudarte a responder estas preguntas y también explicarte algunas de las prácticas que llevamos a cabo en Suma Thinking Digital para conseguir un diseño responsive.

¿Qué quiere decir responsive?

Comencemos por lo básico. ¿Qué significa hacer mi web responsive? El responsive design es una práctica relacionada con la experiencia de usuario (UX). Debe llevarse a cabo en cualquier página web y consiste en que nuestra web se adapte a cualquier tamaño y orientación de pantalla, con la finalidad de mejorar la experiencia de nuestros usuarios.

¿Por qué es importante el diseño responsive?

  • Google premia a las páginas construidas con un diseño responsive y las coloca en una mejor posición en los motores de búsqueda. ¿Te suena la frase “mobile first”?
  • Mejoras la experiencia de tus usuarios y no causas frustración a la hora de navegar por tu página web.

¿Cómo hacemos un diseño responsive?

Para conseguir un diseño adaptable utilizaremos media queries, la técnica que nos permite definir en nuestra hoja de estilos CSS cómo se va a comportar nuestro diseño en los distintos tamaños de pantalla, orientaciones y tipo de dispositivo.

Hablaremos más extensamente sobre media queries en futuros artículos, pero hoy nos queremos centrar en cómo determinar los distintos intervalos de nuestro diseño responsive, los denominados breakpoints o puntos de ruptura.

¿Cuáles son los breakpoints más comunes?

Los breakpoints más comunes son:

  • @media all and (min-width:1200px){ … }
  • @media all and (min-width: 960px) and (max-width: 1199px) { … }
  • @media all and (min-width: 768px) and (max-width: 959px) { … }
  • @media all and (min-width: 480px) and (max-width: 767px){ … }
  • @media all and (max-width: 479px) { … }

Hacer nuestro diseño adaptado a todos estos tamaños puede llevar algo de tiempo, tanto para el diseñador como para el programador. Así que, dependiendo de la naturaleza del proyecto, nuestros breakpoints serán unos u otros.

¿Cómo definimos los breakpoints de nuestro diseño?

Es muy difícil crear unas normas globales para todos los proyectos. Para ayudarte puedes hacerte algunas de las preguntas que nos hacemos nosotros antes de empezar un proyecto:

¿Cuántas horas podemos dedicar al proyecto?

Debemos tener en cuenta que contra más breakpoints tenga nuestro diseño, más trabajo implica tanto por parte del diseñador como por parte del maquetador.

Se trata de encontrar un diseño que se adapte fácilmente a las distintas resoluciones de pantalla. En este sentido, te recomendamos utilizar siempre una guía de estilo para tu diseño web.

¿Cuál es el número perfecto de breakpoints?

Pensar que más breakpoints será mejor para nuestro diseño no es algo realista y tampoco es cierto. Nuestro trabajo como diseñadores es pensar un diseño que se adapte en intervalos. Por norma general definimos como mínimo 3 intervalos (breakpoints)  y 4 como máximo. Hablamos de un mínimo de 3 porque suelen corresponderse con los tres dispositivos más habituales: smartphone, tablet y desktop.

Es posible que algunos elementos de tu diseño no se visualicen bien en los intervalos que has definido y necesiten de otro punto de inflexión. No te preocupes, podemos tener una excepción y definir otra media query para ese elemento, aunque no abuses de las excepciones. Pensemos que también tenemos que facilitar el trabajo del maquetador.

¿Por dónde empiezo a diseñar?

Como ya habrás oído, mobile first. Y esto implica no solo empezar por mobile, sino también diseñar siempre con el tamaño mínimo de un breakpoint. De esta forma nos aseguramos que nuestro diseño se visualice bien en los tamaños más grandes del breakpoint definido.

Y estos son algunos de los tips que aplicamos en Suma Thinking Digital en nuestro día a día.

Lo más importante es ser conscientes de que cada proyecto es distinto, y de que cada equipo de diseñadores y desarrolladores encontrará la forma óptima de trabajar para conseguir siempre un diseño responsive que garantiza una excelente experiencia de usuario al usar distintos formatos y dispositivos.

Foto perfil

Laura Baldirà |

UX/UI Designer