¿Qué es un diseño responsive?
Diseño responsive · En inglés: Responsive web design · Tecnología web
Es cuando una página se acomoda sola al tamaño de la pantalla: en el computador puede tener tres columnas y en el celular una sola, con botones más grandes. "Móvil primero" significa que se diseña pensando primero en el teléfono.
¿Qué es un diseño responsive y por qué mi página debe pensarse primero para el celular?
Un diseño responsive reorganiza el mismo contenido según el tamaño de la pantalla: en el computador puede haber tres columnas y en el celular una sola, con botones más grandes y menús que se abren con el pulgar.
"Móvil primero" va un paso más allá: se diseña pensando en el teléfono y después se amplía para pantallas grandes. Obliga a decidir qué es lo más importante, porque en una pantalla pequeña no cabe todo.
Buena parte de tus clientes te descubre desde el celular, entrando desde Instagram o desde una búsqueda en Google. Si en el teléfono el precio no se lee o el botón de contacto queda tapado, esa visita se pierde aunque en el computador todo se vea bien.
Lo mismo, en pequeño y en grande
Una pizzería que vende por Instagram
Los clientes de la pizzería llegan desde Instagram, casi todos en el celular. Si el menú se ve diminuto y el botón de pedir queda tapado, se van. En un diseño responsive el menú se lee fácil y pedir queda con un toque del pulgar.
Una cadena de gimnasios
Una cadena de gimnasios tiene un solo sitio para reservar clases. En el computador de la oficina se ven varias columnas con horarios y en el celular de un socio cabe una lista simple. Es el mismo contenido, acomodado para cada pantalla.
Cómo lo usamos en Damorus
Diseñamos todos nuestros proyectos primero para el celular. En el sitio de Damorus Projects esperamos entre el 80 y el 90 % de las visitas desde el teléfono, y la navegación es una píldora flotante que se encoge al bajar y se esconde cuando se abre el teclado. En Küsten Elite le armamos a la clienta seis maneras de mostrar los servicios en el celular (carrusel, dos columnas, acordeón, pestañas, lista y mosaico), y eligió el mosaico.
Pon a prueba lo que leíste
Elige A, B o C. Si fallas, lees el porqué y pruebas otra vez.
Tu página se ve perfecta en el computador, pero en el celular el precio no se alcanza a leer. ¿Qué te falta?
Aprende jugando
¿Cuento o verdad?
¿Cuento o verdad?
Otros temas que te pueden interesar
También se le dice