Diseño web B2B
¿Qué es una página responsive y por qué tu prospecto la abre desde el celular?
Equipo Artisma
Agencia de Marketing B2B
El martes, después de una visita a planta, el ejecutivo de ventas le manda por WhatsApp al gerente de compras de un fabricante de autopartes el enlace a la página del servicio que platicaron. El gerente lo abre esa tarde desde su celular, en la sala de espera de un aeropuerto, y encuentra la versión de escritorio reducida a la fuerza: letra que exige pellizcar la pantalla, una tabla de especificaciones cortada, un menú que no abre y un formulario de cotización donde el dedo cae siempre en el campo de al lado. En el mismo chat tiene el enlace de otro proveedor; ese sitio se acomoda a la pantalla y le permite pedir la cotización en un minuto.
El lunes, cuando el comité arma la lista corta, el gerente propone a dos proveedores. Nadie le dirá al ejecutivo por qué su empresa quedó fuera, y en el CRM la oportunidad seguirá marcada como «en seguimiento» durante semanas. El servicio era bueno y el precio competitivo; la empresa perdió la oportunidad en una pantalla de seis pulgadas que su sitio nunca contempló.
Una página responsive reorganiza su contenido para leerse y usarse bien en cualquier pantalla. Importa porque tu prospecto suele conocer tu sitio en el celular, desde un enlace de WhatsApp, un correo o LinkedIn.
Tu prospecto conoce tu sitio en el celular y lo compara después en la computadora del comité
Durante años, los sitios de las empresas B2B se diseñaron frente a un monitor, porque se daba por hecho que el comprador trabajaba en un escritorio. Esa idea ya describe mal el primer contacto. El enlace que manda tu vendedor por WhatsApp, el correo que el gerente lee entre juntas, la publicación de LinkedIn que revisa en un traslado y la búsqueda que hace desde el piso de planta se abren casi siempre en un teléfono. Y en la industria, buena parte de quienes influyen en la compra pasa la jornada lejos de una computadora.
En esta serie ya revisamos qué debe mostrar la primera pantalla de tu página de inicio cuando se abre en un celular. Aquí ampliamos la mirada al sitio completo: qué significa que una página sea responsive, cómo funciona por dentro y en qué puntos concretos un sitio pensado solo para escritorio deja ir al comprador B2B.
El recorrido entre dispositivos: la primera visita decide si habrá una segunda
La compra B2B rara vez se resuelve en una sola visita. El comprador descubre al proveedor en el celular, regresa días después desde la computadora para comparar fichas y condiciones, y reenvía el enlace a las personas que participan en la decisión. Ese recorrido tiene una condición: la primera visita debe ganarse la segunda. Si en el teléfono tu sitio se ve roto, lento o ilegible, el prospecto concluye que tu empresa descuida los detalles y ya no lo abre en la computadora, donde quizá se habría visto bien.
Qué es una página responsive y cómo se reacomoda en cada pantalla
Una página responsive es una sola página, con una sola dirección y el mismo contenido, cuyo diseño se adapta al ancho de la pantalla donde se abre. En una computadora puede mostrar tres columnas de servicios lado a lado; en un celular, una sola columna que se lee de arriba hacia abajo. El menú se convierte en un botón que despliega las opciones, las imágenes se reducen sin deformarse y los botones crecen lo suficiente para tocarlos con el pulgar.
Rejillas fluidas, imágenes flexibles y puntos de quiebre: el mecanismo que reorganiza el contenido
El diseño responsive se apoya en tres recursos técnicos. Las rejillas fluidas definen el ancho de cada bloque en proporción a la pantalla, en lugar de fijarlo en píxeles. Las imágenes flexibles se ajustan al espacio disponible y, bien configuradas, permiten que el celular descargue una versión más ligera. Los puntos de quiebre, escritos en el código como "media queries", indican a partir de qué ancho cambia la disposición: cuándo las tres columnas pasan a una o cuándo una tabla cambia de formato.
La etiqueta viewport: la línea de código que le indica al celular cómo mostrar tu página
Un detalle técnico explica muchos sitios encogidos como el del inicio de este artículo. Cuando una página carece de la etiqueta "viewport", el navegador del celular la dibuja como si la pantalla tuviera el ancho de un monitor y luego la reduce para que quepa completa. El resultado es la versión de escritorio en miniatura, con letra diminuta y botones imposibles de tocar. Basta una línea de código para evitarlo, y su ausencia delata que el sitio nunca se pensó para el teléfono.
Antes del diseño responsive, muchas empresas resolvían el problema con una versión móvil separada, del tipo m.tuempresa.com, con menos contenido y su propio mantenimiento. Ese modelo duplica el trabajo y desincroniza la información. Google recomienda el diseño responsive como el patrón más sencillo de implementar y de mantener, y es el que usamos en los sitios que construimos.
Cinco puntos donde un sitio que solo se encoge deja ir al comprador B2B
Un sitio puede reacomodarse en el celular y aun así fallar en las tareas que le importan a un comprador B2B. Estos son los puntos donde vemos más pérdidas.
Texto que obliga a hacer zoom
Si el visitante tiene que pellizcar la pantalla para leer, la página ya le cobró un esfuerzo antes de convencerlo. El texto de cuerpo debe leerse cómodo a la distancia normal del teléfono, con buen contraste y párrafos que respiren. Los bloques que en escritorio se ven equilibrados se vuelven columnas larguísimas en el celular; dividirlos con subtítulos ayuda a que el comprador encuentre lo suyo al desplazarse.
Tablas de especificaciones que se salen de la pantalla
Es el problema más propio del sitio industrial. Una tabla con ocho columnas de medidas, materiales y capacidades cabe en un monitor, y en el celular se corta o empuja la página hacia un lado. Las soluciones dependen del contenido: convertir cada fila en una tarjeta, permitir el desplazamiento horizontal solo dentro de la tabla con la primera columna fija, o mostrar las columnas principales con la ficha completa en descarga. Conviene evitar que la tabla desaparezca en el celular, porque contiene justo lo que el ingeniero buscaba.
Botones y enlaces más pequeños que un dedo
En la pantalla táctil, el dedo reemplaza al cursor y es mucho menos preciso. Las guías de diseño de Apple piden áreas táctiles de al menos 44 por 44 puntos, y las de Google, de 48 por 48. Cuando los botones son más pequeños o están demasiado juntos, el visitante toca el enlace equivocado, lo intenta de nuevo y con frecuencia se rinde. En el celular, el teléfono de contacto también debe abrir la llamada con un toque.
Formularios de cotización pensados para teclado y ratón
En el celular, cada campo extra de un formulario pesa más. Un formulario de cotización bien adaptado muestra un campo por renglón con su etiqueta visible, abre el teclado numérico en el teléfono y el teclado con arroba en el correo, deja que el navegador complete los datos que ya conoce y permite adjuntar un plano o una foto desde el propio celular. Los selectores con decenas de opciones y los códigos de verificación difíciles de leer suelen ser el punto donde la solicitud se abandona.
Elementos flotantes que se estorban entre sí
El botón flotante de WhatsApp, la barra de cookies, el encabezado fijo y el chat ocupan poco espacio en un monitor. En un celular pueden cubrir una cuarta parte de la pantalla y tapar el botón de enviar del formulario. Conviene revisar cómo conviven en cada página, más allá de la de inicio.
Google evalúa tu sitio con los ojos de un celular
El celular también decide cómo te encuentran. Google rastrea e indexa los sitios principalmente con su versión móvil, una práctica que llama indexación "mobile first". Si al adaptar tu sitio quitaste textos, tablas o enlaces de la versión para teléfono, esa información pierde peso para el buscador aunque siga visible en la computadora. El contenido puede reorganizarse en pestañas o secciones desplegables, siempre que esté presente en ambas versiones.
Estabilidad visual y respuesta al toque: dos métricas que se miden en el teléfono
Además del tiempo de carga de la primera pantalla, Google mide dos señales de experiencia muy ligadas al trabajo responsive. El Cumulative Layout Shift registra cuánto se mueven los elementos mientras la página carga, como el botón que baja justo cuando el visitante iba a tocarlo, y considera bueno un resultado de 0.1 o menos. El Interaction to Next Paint mide cuánto tarda la página en responder a un toque y considera bueno un resultado de 200 milisegundos o menos.
Cómo comprobar si tu sitio funciona en el celular de tu comprador
Para verificarlo basta con que una persona de tu equipo dedique una mañana a recorrer el sitio como lo haría un prospecto:
Mándate por WhatsApp el enlace de una página de servicio y ábrelo desde el chat, porque así llegan muchos de tus enlaces comerciales.
Recorre en el celular tres páginas además del inicio: un servicio o producto, una ficha con tabla de especificaciones y la página de contacto.
Llena y envía el formulario de cotización desde el teléfono, con un archivo adjunto, y confirma que la solicitud llegue completa.
Repite la prueba en un teléfono Android y en un iPhone, y gira la pantalla en horizontal.
Compara en Google Analytics las visitas y las solicitudes de cotización por tipo de dispositivo.
Si el celular trae buena parte de tus visitas y casi ninguna solicitud, conviene revisar la versión móvil antes de atribuir la diferencia al tipo de visitante.
En Artisma, todos nuestros planes incluyen un prototipo que revisas antes de pagar, la página probada en celular, tablet y escritorio, botón de WhatsApp, clic para llamar y un reporte de velocidad Lighthouse con calificación de 90 o más. En nuestro sitio puedes analizar tu página web en menos de 30 segundos y conocer la calificación de su velocidad y su experiencia en el celular.
Preguntas frecuentes
¿Necesito una app o una versión móvil aparte para atender a mis clientes desde el celular?
Para presentar tu empresa y recibir solicitudes de cotización, un sitio responsive cubre la necesidad con un solo mantenimiento. Una app se justifica cuando tus clientes repiten operaciones con frecuencia, como consultar pedidos o dar seguimiento a envíos.
¿Mi sitio actual se puede volver responsive o hay que hacerlo de nuevo?
Depende de cómo se construyó. Si usa una plataforma o plantilla reciente, muchas veces basta con ajustar estilos, tablas y formularios. Si se construyó con anchos fijos o tecnología antigua, adaptarlo puede costar casi lo mismo que rediseñarlo, y el rediseño permite corregir además la estructura y los mensajes.
¿Responsive quiere decir que el sitio se ve idéntico en el celular y en la computadora?
Quiere decir que el contenido es el mismo y la disposición cambia según la pantalla: las columnas se apilan, el menú se compacta y algunas imágenes cambian de proporción. Se mantienen la información, la jerarquía de los mensajes y la facilidad para dar el siguiente paso.
Si tus vendedores comparten enlaces por WhatsApp todos los días y nadie en tu empresa ha llenado el formulario de cotización desde un celular, tu sitio podría estar perdiendo oportunidades que nunca verás en el CRM. Analiza tu página web en https://www.artismamkt.com y te mostramos cómo se comporta en el teléfono de tu prospecto y qué páginas conviene corregir primero.