PYMEsign
El diseño responsive debe sostener desde el celular la misma evidencia que ofrece la pantalla grande. Un gerente de operaciones recibe por WhatsApp el enlace de un proveedor mientras espera para embarcar. Tiene pocos minutos. Desde el teléfono intenta confirmar si la empresa trabaja en su industria, abre una ficha técnica, busca una certificación y quiere reenviar un caso a Compras. El menú ocupa media pantalla, el PDF exige ampliar cada línea y el formulario pide quince datos.
No concluye que la compañía sea incapaz. Simplemente posterga la investigación. Horas después, en la oficina, aparece otra urgencia y esa pestaña no vuelve a abrirse. La oportunidad no se perdió por falta de servicios: se perdió porque el sitio sólo funcionaba bien en el escenario ideal de quien lo diseñó.
La presencia móvil B2B no consiste en encoger una web de escritorio. Consiste en permitir que una persona comprenda, verifique, comparta y actúe cuando tiene una pantalla pequeña, una sola mano, conexión variable y atención interrumpida.
Idea central: si el recorrido móvil elimina información o multiplica el esfuerzo, también reduce las oportunidades que llegan a la conversación comercial.
Qué debe conservar un sitio web responsive en B2B
Google explica que utiliza la versión móvil del contenido, rastreada con un agente de smartphone, para indexar y clasificar páginas. Desde 2023, la migración global a la indexación mobile-first se considera completada. Esto no obliga a crear un sitio separado ni demuestra que una página subirá de posición sólo por verse bien en un teléfono.
El hilo no acortó el laberinto; hizo posible atravesarlo.
La recomendación práctica es mantener equivalencia: el contenido principal, los títulos, los datos estructurados, las imágenes relevantes y sus textos alternativos no deberían desaparecer en móvil. Google recomienda el diseño web adaptable porque sirve el mismo HTML y la misma URL, y suele ser el patrón más sencillo de implementar y mantener.
Para una empresa B2B, esa equivalencia tiene un sentido comercial adicional. Si los casos, certificaciones, alcances o contactos sólo aparecen en escritorio, el comprador que investiga desde el celular recibe una versión menos convincente de la organización.
Aclaración: responsive describe cómo se adapta la interfaz; no garantiza por sí solo que la experiencia sea rápida, accesible, comprensible ni completa.
El hilo de Ariadna: una salida visible del laberinto
En el mito griego, Ariadna entrega a Teseo un hilo antes de que entre al laberinto. La fuerza le permite enfrentar al Minotauro; el hilo le permite regresar. Una obra romana conservada por The Metropolitan Museum of Art representa precisamente tres momentos: Ariadna entregando el hilo, la lucha y la salida de la historia.
En una web móvil, el visitante también entra por puertas laterales: un resultado de búsqueda, un enlace recibido, una ficha o un artículo. No conoce la arquitectura del sitio y no ve el mapa completo. Necesita un hilo: orientación, jerarquía, regreso sencillo y un próximo paso visible.
Un menú con categorías internas, botones ambiguos y páginas sin contexto convierte cada pantalla en otro pasillo. En cambio, una miga de pan, un título específico, enlaces relacionados y un contacto persistente ayudan a avanzar sin obligar a empezar desde la portada.
“El hilo no acortó el laberinto; hizo posible atravesarlo.” – Aplicación empresarial del mito de Ariadna
Moraleja: una experiencia móvil no necesita mostrar todo al mismo tiempo; necesita preservar el contexto y dejar claro cómo continuar.
Las cuatro pruebas de una presencia móvil B2B
| Prueba | Qué debe conservar | Pregunta del comprador |
|---|---|---|
| Comprender | Propuesta, destinatario y capacidad aparecen sin ampliar ni adivinar. | ¿Sé dónde estoy y por qué seguir? |
| Verificar | Casos, datos, certificaciones y personas conservan contexto. | ¿Puedo comprobar la promesa? |
| Usar | Menú, buscador, filtros, PDFs y formularios responden al tacto. | ¿Puedo completar la tarea? |
| Continuar | Compartir, guardar, llamar, escribir o pedir contacto es sencillo. | ¿Puedo trasladar esto al proceso de compra? |
1. Comprender: diseñar para una atención interrumpida
En escritorio pueden verse varias columnas a la vez. En móvil, el orden vertical se convierte en argumento: lo que aparece primero define qué parece importante. La propuesta, el servicio o el contexto del caso deben preceder a elementos decorativos y mensajes corporativos generales.
Los párrafos breves, subtítulos informativos y listas reales ayudan a retomar la lectura después de una interrupción. No se trata de empobrecer el contenido técnico; se trata de fragmentarlo con una jerarquía que permita leer por capas.
También hay que probar traducciones. Un botón correcto en castellano puede desbordarse en inglés; una tabla de capacidades puede exigir otro patrón en portugués. La adaptación móvil debe funcionar con el contenido real, no sólo con textos de muestra.
2. Verificar: no esconder las pruebas para ganar espacio
Una mala optimización móvil resuelve la falta de espacio eliminando contenido. En B2B, eso puede borrar precisamente lo que reduce riesgo: alcance, ubicación, normas, metodología, fecha, ficha técnica o responsable.
La solución es cambiar la forma, no retirar la sustancia. Un caso extenso puede resumirse y abrir detalles; una tabla puede convertirse en fichas apiladas; una certificación puede mostrar nombre, entidad, vigencia y enlace antes de ofrecer el documento completo.
Los datos de la organización también ayudan a la búsqueda. Google indica que el marcado estructurado Organization puede describir nombre, logo, dirección, correo, teléfono y otros identificadores. Debe coincidir con la información visible y no reemplaza una página de contacto clara.
3. Usar: el dedo no es un mouse pequeño
En una pantalla táctil no existe el hover como forma confiable de descubrir opciones. Los controles necesitan etiquetas, estados visibles y espacio suficiente. WCAG 2.2 establece como criterio de nivel AA que los objetivos de puntero sean, con excepciones, de al menos 24 por 24 píxeles CSS o tengan separación equivalente.
El tamaño mínimo no define un diseño cómodo por sí solo. Un botón principal merece un área más generosa; dos enlaces críticos pegados siguen siendo riesgosos; un menú que se cierra al desplazarse puede impedir una tarea aunque cada icono cumpla la medida.
Los formularios deben pedir sólo lo necesario para iniciar la conversación. Nombre, empresa, correo corporativo, necesidad y mensaje suelen ser suficientes. Industria, presupuesto y plazos pueden preguntarse después o presentarse como opcionales cuando el proceso comercial lo justifica.
Prueba táctil: completá el recorrido con una sola mano, sin girar el teléfono y sin ampliar la pantalla. Registrá cada toque accidental y cada dato que debas volver a escribir.
4. Continuar: diseñar para compartir y cambiar de contexto
Una decisión B2B rara vez termina en una sola persona. El visitante puede necesitar compartir el caso por Teams o WhatsApp, guardar un PDF, copiar un dato, llamar desde obra o retomar en una computadora. El sitio debe facilitar esa continuidad.
Los títulos de página y de documentos tienen que ser descriptivos. Un archivo llamado final_v7.pdf pierde contexto al descargarse; una ficha con empresa, servicio, sector, fecha y URL conserva procedencia. Los enlaces profundos deberían abrir la pieza relevante, no devolver siempre a la portada.
El llamado a la acción debe corresponder al momento. En una primera investigación puede funcionar “Descargar ficha” o “Ver proyecto”; después, “Consultar disponibilidad técnica” resulta más útil que un genérico “Enviar”.
Rendimiento: medir la experiencia que realmente recibe la gente
La velocidad móvil no se evalúa sólo con una conexión de oficina. Equipos, redes y condiciones cambian. Por eso conviene combinar pruebas de laboratorio —útiles para diagnosticar— con datos de campo, que describen visitas reales.
Las Core Web Vitals actuales observan carga con LCP, respuesta con INP y estabilidad con CLS. web.dev considera buenos, como referencia, LCP de hasta 2,5 segundos, INP de hasta 200 milisegundos y CLS de hasta 0,1, evaluados en el percentil 75 y separados entre móvil y escritorio.
Esas métricas no sustituyen la tarea. Una página puede aprobarlas y aun así ocultar el contacto, descargar un PDF enorme o pedir demasiados campos. La medición técnica debe unirse a recorridos reales y a resultados de negocio.
| Métrica | Qué observa | Referencia buena | Qué revisar |
|---|---|---|---|
| LCP | Contenido principal visible | ≤ 2,5 s | Imágenes hero, servidor, CSS y fuentes |
| INP | Respuesta a interacciones | ≤ 200 ms | JavaScript, terceros y tareas largas |
| CLS | Estabilidad visual | ≤ 0,1 | Dimensiones, banners y contenido inyectado |
La auditoría que une tecnología y negocio
1. Elegí cuatro tareas: comprender un servicio, encontrar evidencia, abrir un documento y consultar.
2. Probá en dos teléfonos reales, con tamaños y sistemas distintos, y en una conexión no ideal.
3. Comenzá desde una página interna recibida por enlace, no siempre desde la portada.
4. Anotá tiempo, dudas, errores, retrocesos y datos que desaparecen respecto de escritorio.
5. Contrastá con Search Console, analítica, PageSpeed Insights y consultas comerciales.
6. Priorizá por impacto en comprensión, verificación o contacto; corregí y repetí la prueba.
Errores frecuentes al corregir el móvil
| Atajo | Riesgo |
|---|---|
| Crear una versión separada | Duplica mantenimiento y facilita diferencias de contenido o metadatos. |
| Ocultar todo detrás de iconos | Ahorra espacio, pero elimina significado y descubrimiento. |
| Reducir la tipografía | Hace caber más contenido a costa de lectura y precisión. |
| Eliminar evidencia | La página queda limpia, pero comercialmente más débil. |
| Medir sólo la portada | Ignora servicios, casos, fichas, formularios y entradas desde búsqueda. |
| Instalar una app sin necesidad | Agrega costo y adopción cuando una web adaptable podría resolver la tarea. |
Por dónde empezar
No empieces comprando una herramienta ni rediseñando la portada. Tomá el teléfono que realmente usa tu equipo comercial y abrí un enlace interno como lo recibiría un comprador. Intentá entender el servicio, verificar una prueba, compartirla y enviar una consulta.
Si el recorrido falla, describí el hecho sin convertirlo todavía en una solución: “la certificación no se puede leer”, “el botón queda cubierto”, “el formulario pierde lo escrito”. Esa evidencia permite definir alcance con dirección, Comercial, Comunicación y Tecnología.
Preparamos el recurso editable “Test móvil B2B de 12 minutos: ¿tu sitio permite investigar y consultar desde un celular?”. Incluye cuatro recorridos, revisión de equivalencia móvil-escritorio, controles táctiles, Core Web Vitals, matriz de hallazgos y plan de 30 días.
Descargalo, completalo en dos teléfonos y compará resultados. La meta no es que la web se vea pequeña y prolija: es que el comprador encuentre su hilo y pueda llegar al próximo paso.
Qué corregir primero
| Falla observada | Primera intervención | Señal de avance |
|---|---|---|
| No se entiende qué ofrece | Propuesta, título y orden del primer bloque | Comprensión correcta en prueba externa |
| La evidencia desaparece | Casos, certificaciones, datos y equivalencia | Prueba encontrada en menos de 2 minutos |
| No se puede completar | Menú, controles, formularios y documentos | Tarea terminada sin ayuda ni zoom |
| La página carga o salta | LCP, INP, CLS y recursos de terceros | Mejora en datos de campo p75 |
| No se puede continuar | Compartir, descargar, contactar y confirmar | Paso comercial completado y medido |
Orden recomendado: primero recuperá contenido y tareas bloqueadas; después optimizá rendimiento y consistencia. Una pantalla rápida que no permite verificar sigue siendo una mala experiencia.
Te puede interesar
DESCARGÁ EL TEST
Test móvil B2B de 12 minutos
Comprobá si tu sitio permite investigar y consultar desde un celular.
