Diseño responsive

¿Qué es el diseño responsive?

El diseño responsive es la práctica de construir una sola web que adapta su maquetación a cualquier pantalla en la que aterrice. El mismo código se recompone de un móvil a una tablet y a un monitor de escritorio ancho, sin versiones separadas para cada uno. Un sitio, muchas formas.

Funciona mediante rejillas fluidas, imágenes flexibles y media queries de CSS que cambian la maquetación en puntos de ruptura definidos. Una maquetación de tres columnas en escritorio colapsa a una sola columna en un móvil. El texto sigue siendo legible, los elementos táctiles siguen al alcance y nada exige desplazamiento horizontal. Esto difiere del diseño adaptativo, que sirve unas pocas maquetaciones fijas elegidas por dispositivo, y del antiguo enfoque de construir un sitio móvil aparte por completo. Un sitio de noticias construido en responsive muestra una portada densa de varias columnas en un portátil y un feed vertical limpio en un móvil, ambos desde el mismo HTML y CSS. Como la mayor parte del tráfico web viene ahora del móvil y Google posiciona con indexación mobile-first, el diseño web responsive es la expectativa por defecto y no una función extra.

La parte difícil no es hacer que una maquetación encoja. Es hacer que cada tamaño se sienta deliberado, para que la pantalla pequeña sea una experiencia real y no una versión apretada de la grande.

Diseño responsive en Dallonses

Tratamos la pantalla pequeña como la de verdad. La mayoría conocerá un producto primero en un móvil, así que diseñamos y construimos para esa restricción en lugar de añadirla después de que la versión de escritorio luzca bien. El diseño web responsive no es una casilla al final de un proyecto. Da forma a las decisiones de maquetación desde el primer wireframe.

Nuestro trabajo de diseño e ingeniería ocurre junto, y por eso nuestros desarrollos responsive aguantan: los diseñadores saben qué se recompone con limpieza y los desarrolladores saben qué debe significar el diseño en cada punto de ruptura. Cuando colaboramos con una marca, el sitio tiene que sentirse tan intencionado en el móvil de quien va en transporte como en una demo de sala de juntas. Esa consistencia en cada pantalla es lo que mantiene la confianza de los usuarios en el producto, y es la diferencia entre un diseño web que fotografía bien y uno que funciona.

¿Un sitio que se desmonta en el móvil? Hagámoslo funcionar en todas partes.

Hablemos de tu sitio