De una web corporativa confusa a una demo que se navega: la evolución de procivas.es

procivas.es es la web de una editorial y operadora de proyectos de comunicación médica. Detrás hay cuatro líneas de trabajo: dos medios sobre cirugía vascular y endovascular, Noticias Endovasculares e Iberovascular, la edición de libros médicos y los proyectos web. La web corporativa existía, pero no cumplía su función.

Tenía demasiadas páginas (Servicios, Publicaciones, Catálogo, Sobre Procivas), textos de relleno sin terminar y una navegación que no explicaba qué se hacía. El objetivo era sencillo de decir: que cualquiera que llegue desde un correo entienda los proyectos en segundos y quiera visitarlos.

Antes de diseñar: una auditoría y una caída

Lo primero no fue el diseño, sino revisar el sitio tal como estaba. Ajustamos la configuración de WordPress en todo lo que podía endurecerse sin riesgo y, mientras lo hacíamos, apareció algo más serio: la web no abría en iPhone ni en Safari.

La causa no estaba en WordPress, sino en el DNS. El dominio publicaba una dirección IPv6 que no servía la web con un certificado válido. Quien se conectaba por IPv6 recibía un error de seguridad; quien lo hacía por IPv4, la veía con normalidad. Para el equipo, en su ordenador, todo funcionaba.

Una web puede funcionar perfectamente en tu ordenador y estar caída para parte de tus visitantes. Hay que probarla por IPv4 y por IPv6.

Menos páginas, más contenido real

El primer rediseño fue demasiado denso y no convenció. Rehicimos la portada con tres reglas:

• El vídeo, lo primero. Un hero a pantalla completa, con la cabecera transparente encima y sin franjas en blanco antes de él.
• Cuatro proyectos, cuatro filas. Cada una con número, nombre, descripción y un enlace claro a su web.
• Menos huecos. Recortamos el espaciado vertical y quitamos el texto que no aportaba información.

Debajo de los proyectos añadimos una sección de libros, «Más de 20 libros médicos editados»: un carrusel de portadas reales en el que cada una enlaza a su ficha en la tienda de Noticias Endovasculares. Después, tres valores (criterio editorial, producción completa y tecnología propia) y un cierre de contacto sin adornos.

La demo: enseñar en lugar de contar

Para que se viera qué web podemos construir para una clínica, hicimos una página de ejemplo: Lumen Dental, una clínica dental ficticia, y lo dice en la propia página.

• Un hero con vídeo de fondo, una marquesina de especialidades y contadores animados.
• Una cuadrícula de tratamientos, un bloque de tecnología con vídeo, pestañas interactivas y una banda con vídeo.
• Equipo, opiniones y un formulario de reserva de ejemplo, que no envía nada.
• Vídeos e imágenes de banco con licencia libre, con carga diferida para no penalizar la velocidad.

La demo aparece en la portada como una vista previa que se desplaza sola, y también se abre a pantalla completa. Está marcada como noindex para que no compita en los buscadores con contenido real.

El fallo que dejó la demo en blanco

Al publicarla, la página se quedaba en blanco al hacer clic. El motivo era sutil: WordPress convierte && en && dentro del JavaScript escrito en el contenido, lo que rompe el script y deja ocultos los bloques que debía mostrar.

Reescribimos el código sin ese carácter y añadimos dos salvaguardas: el contenido solo se oculta si el JavaScript está activo, y un temporizador lo muestra pase lo que pase. Por el camino descubrimos otro detalle: el parámetro ?embed=1 lo reserva WordPress, así que la vista incrustada usa ?vista=1.

Los detalles que cierran el trabajo

• Favicon. Ahora muestra solo los tres círculos del logotipo, que se reconocen mejor a 16 píxeles que el logotipo completo.
• Volver a casa. La demo tiene una barra fija arriba, «← Volver a Procivas», para que nadie se quede atrapado en ella. En la vista incrustada desaparece.

Qué nos llevamos

Antes	Después
Muchas páginas sin sentido ni contenido final	Una sola página que explica los cuatro proyectos
Sin vídeo ni identidad visual	Vídeo a pantalla completa y una tipografía cuidada
Sin prueba de lo que se sabe hacer	Una demo que se navega a pantalla completa
Caídas intermitentes según la conexión	Causa localizada en el DNS

• Menos es más, pero con contenido real: portadas, enlaces y cifras que se pueden comprobar.
• Enseñar vale más que contar: la demo explica qué hacemos mejor que cualquier párrafo.
• Probar en condiciones reales: móvil, Safari, IPv6 y JavaScript que falla.
• Tecnología sin sorpresas: un tema de bloques de WordPress propio, sin constructores pesados.

El caso completo, con las decisiones de fondo, está en la ficha de Procivas, y la demo se puede recorrer en procivas.es/demo-clinica.

¿Quieres una web así para tu clínica, tu sociedad científica o tu editorial? Cuéntanos en qué punto está.