Diseño web

Diseñar para móvil

Lo que cambia al pasar de una pantalla grande al teléfono, con ejemplos de Renoba y Ander Rugarcia.

Portada de la web de Ander Rugarcia con presentación del mecánico de bicicletas

La misma oferta, otra forma de recorrerla.

Una pantalla estrecha cambia la relación entre texto, imagen y navegación. Lo que en escritorio se entiende de un vistazo puede quedar separado por varios desplazamientos en móvil. Por eso, adaptar una web requiere revisar el orden de lectura y decidir qué información debe permanecer cerca.

En la web de Ander Rugarcia, la trayectoria, los servicios del taller y las vías de contacto forman un mismo recorrido. Las fotografías presentan a la persona y su oficio; los bloques de servicio ayudan a localizar una necesidad. En móvil, esa relación debe seguir siendo clara sin depender de dos columnas visibles a la vez.

El contacto necesita contexto.

No todas las visitas buscan hacer lo mismo. Quien entra en la web de un taller puede necesitar consultar una reparación. Quien visita una clínica puede querer entender un tratamiento o saber cómo es la primera cita antes de reservar.

Renoba reúne tratamientos, información de la primera visita, tarifas, preguntas frecuentes y acceso a reserva. El recorrido sitúa a la clínica en Arteaga, Derio, y permite buscar información antes de dar ese paso. En Ander, los accesos a WhatsApp y teléfono aparecen en distintos puntos de la web. Son respuestas a necesidades distintas, no un botón colocado igual en todos los proyectos.

Qué comprobar con el teléfono en la mano.

Lee una sección sin ampliar la pantalla, localiza un servicio y busca cómo contactar. Comprueba si una fotografía pierde información al recortarse, si un título rompe la lectura o si un control queda demasiado cerca de otro. Prueba también los enlaces y formularios acordados en el proyecto.

Una captura permite revisar composición y jerarquía. El uso real añade scroll, teclado, carga y navegación. Por eso el diseño y la revisión responsive forman parte del mismo trabajo: la identidad debe seguir siendo reconocible y el siguiente paso debe poder encontrarse en cada pantalla.

Llevemos estas decisiones a tu proyecto.