1. Elige la tarea de la página antes de elegir su diseño
Comienza con páginas que realizan una tarea para el cliente o el negocio: páginas de servicio, páginas de producto, formularios de captación, reservas, entrada a cuentas, carrito y ayuda. Redacta una única declaración de finalización para cada una, por ejemplo: “Un visitante por primera vez puede entender este servicio, ver pruebas relevantes y solicitar una llamada.” Si la página tiene más de una tarea, decide cuál aparece primero.
Lista su contenido como esencial, de apoyo u opcional. Esencial no significa breve; un visitante puede necesitar contexto de precio, elegibilidad, detalles de entrega o información de comparación. Dale a ese material una ruta clara en el diseño estrecho. Google aconseja contenido primario equivalente en móvil y escritorio, permitiendo una presentación diferente como pestañas o acordiones.
A una anchura estrecha, un compañero debe poder decir qué ofrece la página, a quién ayuda y la siguiente acción significativa.
2. Haz que la base estrecha sea completa
Empieza con un recorrido de una sola columna funcional en lugar de encoger un diseño de escritorio. Usa contenedores flexibles, deja que el texto se ajuste y añade un ajuste de viewport que permita al navegador dimensionar el diseño al ancho del dispositivo. No impidas el zoom. Comprueba que menús, avisos, imágenes, embed y errores de formularios se mantengan dentro del viewport; el desplazamiento horizontal involuntario a nivel de página suele ser un defecto.
Usa 320 píxeles CSS como una comprobación exigente de reflujo para lectura y contenido de tarea ordinarios. WCAG 2.2 describe presentar contenido vertical a ese ancho sin pérdida de información o funcionalidad ni desplazamiento bidimensional. Un mapa, gráfico o tabla de datos puede necesitar su propia región de desplazamiento, pero eso no justifica que la página circundante se desplace lateralmente.
Ajusta las imágenes a su contenedor y proporciona dimensiones para que el navegador reserve espacio antes de que se carguen.
3. Añade mejoras sin hacer frágil la ruta base
La mejora progresiva significa que el contenido y la funcionalidad esenciales funcionan como base, mientras que los navegadores capaces y las pantallas mayores reciben extras. La dirección, los detalles del producto, las etiquetas de formulario, la explicación del precio y la ruta de envío no deberían depender de animación, hover o un script tardío. Un diseño más ancho puede añadir un panel de comparación, navegación persistente o filtros más ricos sin dejar la base incompleta.
Pide al implementador que añada un breakpoint cuando el contenido se vuelva apretado o desperdiciado, no porque aparezca un nombre de dispositivo en una lista. Un breakpoint es simplemente el punto donde cambia una regla de diseño. No uses diseños estrechos para eliminar silenciosamente texto de ayuda, términos de política, reseñas, metadatos o detalles estructurados importantes.
Muestra primero una imagen de galería básica y su descripción, luego añade zoom o controles de desplazamiento cuando sus scripts estén disponibles.
4. Diseña controles para tacto, claridad y recuperación
La ergonomía táctil significa diseñar para manos y no para un puntero de ratón preciso. Da a botones, casillas de verificación, iconos de cierre, selectores de cantidad y opciones de formulario un tamaño y separación suficientes para reducir pulsaciones erróneas. Etiqueta los iconos cuando su significado no sea obvio. No hagas que el hover sea la única forma de revelar un precio, submenú, explicación o acción.
WCAG 2.2 incluye el criterio de tamaño de objetivo de Nivel AA de al menos 24 por 24 píxeles CSS para objetivos de puntero, con excepciones indicadas que incluyen espaciado y enlaces en línea. Trátalo como una referencia mínima, no como una garantía de comodidad. Las acciones críticas merecen etiquetas claras, espaciado generoso y un paso de confirmación reversible. Busca revisión cualificada de accesibilidad para trayectos de alto riesgo o reclamaciones formales de conformidad.
Mantén visibles las etiquetas, muestra retroalimentación de validación usable y conserva los valores introducidos tras un error.
5. Trata los medios y embeds como parte del recorrido del visitante
Decide si cada imagen es informativa, persuasiva o decorativa. Una imagen informativa necesita una alternativa textual adecuada y un recorte para diseño estrecho que preserve el detalle necesario. Las opciones de imágenes responsivas permiten que los navegadores elijan un recurso adecuado en lugar de obligar a cada visitante a descargar el activo de escritorio más grande. No dejes que una imagen hero o un vídeo oculten el propósito de la página y la acción primaria.
Haz inventario de mapas, chat, vídeo, pago, programación, consentimiento y widgets de reseñas. En una pantalla estrecha, comprueba su estado de carga, tamaño de controles, disposición acotada y una ruta alternativa práctica. Para pagos, identidades o flujos regulados de datos, involucra revisores cualificados de seguridad, privacidad y cumplimiento; las pruebas visuales no son una evaluación de seguridad.
Registra cada componente externo, su propietario, su función comercial y la alternativa aprobada si es lento o está roto.
6. Prueba las rutas de tarea antes del lanzamiento y planifica la remediación
Usa el modo responsivo del navegador desde temprano para inspeccionar anchuras estrechas, medias y anchas. Chrome Device Mode puede aproximar viewport, tacto, orientación, red y condiciones de CPU, pero Chrome lo documenta como una aproximación y no como ejecución en dispositivo real. Completa las rutas críticas en teléfonos reales y navegadores relevantes cuando sea posible.
Prueba una tarea, no solo una captura de pantalla: carga fría, navegación, envío de formulario inválido y válido, cambio de orientación, zoom y retorno desde una pantalla de terceros. Registra la URL, el navegador o dispositivo, la tarea, el resultado esperado, el responsable y la decisión de rollback. Para cambios importantes de plantilla, checkout, CMS o dependencias, prepara la publicación por etapas y dispón restaurar la ruta previa en lugar de improvisar bajo presión.
Aprueba solo después de que la tarea crítica funcione, los controles sean utilizables, no haya desplazamiento horizontal a nivel de página y las dependencias clave tengan una alternativa.