Se ha hablado mucho del diseño responsive (o responsivo), pero realmente mucha gente no sabe aún lo que es; sabe los resultados, que una página web se adapta a los límites de su pantalla, pero no sabe los pasos que se dan para asegurarse de ello. A continuación vamos a repasar algunos de estos conceptos.

Diseño responsive contra el tradicional

diseno-responsive-1

Para empezar, el diseño responsive contra el diseño “adaptable”; se nota mucho si tenemos abierta una página y cambiamos el tamaño de la ventana. El diseño responsive cambiará en tiempo real, mientras que diseño mas tradicional veremos un momento en el que el navegador carga una versión mas pequeña o grande.

diseno-responsive-2

El uso de unidades relativas es de vital importancia en el diseño responsivo; si usamos unidades estáticas el tamaño de los elementos siempre será el mismo.

diseno-responsive-3

A diferencia de las pantallas de ordenador, las pantallas de smartphones tienden a ser verticales, y por eso el contenido tiene que poder fluir hacia abajo.

diseno-responsive-4

Los puntos de ruptura son otra herramienta importante para el diseño responsive, que puede definir que haya elementos que cambien de sitio en puntos predefinidos; por ejemplo, con tres columnas en el escritorio y una sola en smartphones.

diseno-responsive-5

Los elementos anidados son los que se moverán como uno solo cuando cambie el tamaño, manteniendo el diseño.

diseno-responsive-6

Normalmente pensamos en diseño responsive como adaptarse a pantallas pequeñas, pero también vale para las grandes; si no definimos un ancho máximo acabaremos con el contenido demasiado disperso.

diseno-responsive-7

En teoría no debería haber diferencia si la base del proyecto es el escritorio o el móvil, pero si es este último podremos tomar mejores decisiones por el camino en vez de tener que aceptar compromisos.

diseno-responsive-8

Aunque usar fuentes web ofrece resultados mas impactantes, usar las fuentes del sistema supondrá una mejora en la rapidez ya que no tienen que ser descargadas.

diseno-responsive-9

Si nuestras imágenes no tienen muchos detalles, es mejor usar una imagen vectorial en vez de un bitmap ya que se adaptará mejor a diferentes resoluciones.