Diseño web 2026: la guía honesta y completa

¿Qué es el diseño web en 2026?

El diseño web en 2026 es la disciplina que combina experiencia visual, arquitectura de información, rendimiento técnico y estrategia de negocio en un producto digital. Ya no es suficiente con que una web se vea bonita: tiene que cargar en menos de 2 segundos, ser usable con el pulgar en un móvil de gama media, ser indexable por los crawlers de Google y los LLM de Bing/Perplexity, cumplir la normativa de accesibilidad WCAG 2.2 y convertir visitas en clientes.

Eso es mucho para un solo producto. Y es precisamente lo que diferencia una web profesional de una que parece hecha en Wix por alguien que vio dos tutoriales de YouTube.

Las cuatro dimensiones que importan en 2026

• Visual y UX: Jerarquía tipográfica, espaciado, paleta coherente, microinteracciones que guían sin molestar.
• Rendimiento técnico: Core Web Vitals aprobados, imágenes en formato moderno (AVIF/WebP), código JS minimal y cargado de forma diferida.
• SEO y AEO: Estructura semántica, Schema Markup, contenido que responde preguntas reales con autoridad.
• Conversión: CTAs claros, formularios que no friccionan, prueba social visible, propuesta de valor en los primeros 5 segundos.

La buena noticia: estas cuatro dimensiones se refuerzan mutuamente. Una web rápida tiene mejor UX. Un buen UX reduce el bounce rate y mejora el SEO. Un SEO sólido trae tráfico cualificado que convierte mejor. No hay que elegir entre ellas.

Definición AEO: El diseño web en 2026 es el proceso de planificar, crear y optimizar páginas y aplicaciones web que combinan estética visual, arquitectura de información accesible, rendimiento técnico medible y estrategia de conversión para cumplir objetivos de negocio en entornos desktop y móvil.

Tendencias visuales que ya dominan en 2026

Las tendencias visuales en diseño web tienen un ciclo de vida de 2-4 años antes de que se vean anticuadas. En 2026 hay tres estilos que dominan el mercado profesional, con sus variantes y sus trampas.

1. Editorial limpio (la tendencia más duradera)

Tipografía grande, mucho espacio en blanco, fotografía de calidad real (no stock genérico), paleta de 2-3 colores máximo. Es el estilo dominante en sectores de servicios profesionales, hostelería premium, arquitectura y consultoría. Su ventaja: envejecen bien. Una web editorial bien hecha en 2024 sigue siendo válida en 2027.

Señas de identidad: tipo serif o display grande en títulos, body en sans-serif legible a 16-18px, grid asimétrico, uso de negativos como elemento de diseño.

2. Bento Grid

Inspirado en las dashboards de Apple y Notion. Tarjetas de tamaño variable organizadas en un grid modular que comunica mucha información sin parecer caótico. Funciona especialmente bien para SaaS, productos digitales, portfolios y páginas de features.

La trampa del Bento: hacerlo bien requiere pensar el contenido de cada tarjeta como un titular independiente. Mal ejecutado —tarjetas con demasiado texto, mal equilibrio de tamaños— parece un panel de control de los años 90.

3. Glassmorphism contextual

Superficies semitransparentes con blur de fondo, bordes sutiles y sombras difusas. El error habitual es abusar de él en toda la web. El uso correcto es contextual: tarjetas flotantes sobre fondos con gradiente o imagen, modales, barras de navegación al scroll.

Lo que ya no funciona en 2026

• Dark + neon: Saturado desde 2023. Solo tiene sentido en webs de gaming, crypto o tech muy específico.
• Parallax agresivo: Daña el rendimiento, marea en móvil y ha pasado de moda.
• Chatbots pop-up en los primeros 3 segundos: Google penaliza los interstitials, los usuarios los cierran.
• Animaciones de entrada de todos los elementos: El fade-in de cada párrafo al scroll ya es un cliché.

Tecnologías: WordPress vs Headless vs Jamstack vs Custom

La elección de tecnología es la decisión más importante de un proyecto web y la que más frecuentemente se toma por razones equivocadas (el proveedor sabe X, o "todos usan Y"). Aquí el mapa real del mercado en 2026.

WordPress (CMS tradicional)

Sigue siendo el 43% del web global. En España para pymes de servicios, tiendas y profesionales, es la opción dominante con buena razón: ecosistema maduro, 60.000+ plugins, constructores visuales (Elementor, Bricks), hosting económico y pool enorme de developers que lo conocen.

Cuándo elegirlo: Web corporativa, blog con mucho contenido, tienda WooCommerce con catálogo mediano, web que el cliente va a actualizar por su cuenta sin conocimiento técnico.

Sus limitaciones reales: Velocidad por defecto mediocre (necesita optimización activa), superficie de ataque de seguridad grande (requiere mantenimiento), deuda técnica acumulada si se añaden muchos plugins.

Headless CMS

El CMS (Contentful, Sanity, Strapi) gestiona el contenido, y el frontend (Next.js, Nuxt, Astro) lo renderiza. Separa las responsabilidades y permite frontends ultra-rápidos con SSG/ISR.

Cuándo elegirlo: Web con tráfico alto (50.000+ visitas/mes), plataforma omnicanal (web + app móvil + quiosco), equipo con developers React/Vue, proyecto que va a escalar en features.

Su coste real: Más caro de construir (requiere developers fullstack), más caro de mantener, y la experiencia de edición de contenido es menos intuitiva para el cliente no técnico.

Jamstack / Static Site Generators

Astro, Eleventy, Hugo: HTML pre-generado en build, CDN global, casi cero superficie de ataque. Los Core Web Vitals son casi perfectos por defecto.

Cuándo elegirlo: Landing pages, documentación técnica, blogs con contenido que no cambia cada hora, webs donde el rendimiento es el único KPI.

Su limitación: Contenido dinámico complejo (e-commerce, membresías, personalización) requiere soluciones adicionales. El workflow de actualización de contenido es más técnico.

Custom / Full-stack

Next.js, Nuxt, Django + React, Laravel + Vue. El mayor control, la mayor flexibilidad, el mayor coste.

Cuándo elegirlo: SaaS, plataforma con lógica de negocio propia, marketplace, app con autenticación y datos de usuario.

Para la mayoría de pymes y negocios locales en España: WordPress bien configurado es la respuesta correcta. No el más emocionante técnicamente, pero el que mejor sirve a un negocio que necesita actualizar su web, tener blog y aparecer en Google sin depender de un developer para cada cambio.

Mobile-First en 2026: por qué aún hay webs que lo ignoran

El 68% del tráfico web global viene de dispositivos móviles en 2026 según datos de Statcounter. En España, ese número es del 63% con variaciones por sector: en hostelería, turismo y retail llega al 75-80%. En B2B industrial o servicios profesionales baja al 45-55%. Conoce tus propios datos de Analytics antes de asumir cualquier cosa.

Mobile-First no es responsive design. Es un cambio de mentalidad en el proceso de diseño: diseñas primero la versión móvil y luego amplías para desktop, no al revés. Las consecuencias prácticas son enormes:

• La jerarquía de información en móvil determina qué es importante de verdad (si algo no cabe en móvil, probablemente no sea crítico).
• Los botones y CTAs tienen que ser clicables con el pulgar: mínimo 44x44px de área táctil.
• La tipografía tiene que ser legible sin pellizcar la pantalla: mínimo 16px en body, no 12px que "parece bien en desktop".
• Los formularios tienen que ser fáciles de rellenar con teclado virtual: campos grandes, labels visibles, sin CAPTCHAs de imagen.

Los errores de móvil más frecuentes en webs pyme en 2026

1. Menú hamburguesa que no funciona: El icon existe pero el menú no se despliega bien, o se despliega sobre el contenido sin fondo.
2. Imágenes que se salen del viewport: Elemento con width fijo en px que rompe el layout en móvil.
3. Texto demasiado pequeño: El diseñador lo ve bien en su MacBook Pro 16" y nadie lo prueba en un Android de gama media.
4. Pop-ups que tapan todo en móvil: Google penaliza los interstitials que tapan el contenido principal en la primera carga móvil.
5. Velocidad aceptable en WiFi, lenta en 4G: Las imágenes sin comprimir y el JS sin code-splitting destrozan la experiencia móvil real.

Google usa Mobile-First Indexing desde 2021: el crawler de Google indexa la versión móvil de tu web como referencia principal. Si tu web móvil tiene menos contenido que la desktop, pierdes posicionamiento en todos los dispositivos.

Herramienta para auditar tu web móvil ahora mismo: PageSpeed Insights y selecciona "Mobile" en el análisis.

Core Web Vitals 2026: LCP, INP, CLS explicados sin tecnicismos

Google usa los Core Web Vitals como factor de ranking desde 2021. En 2024, FID fue reemplazado por INP, y los umbrales se han vuelto más estrictos en la práctica. Entender qué mide cada métrica es la base para saber dónde mejorar.

LCP — Largest Contentful Paint

Mide cuánto tarda en aparecer el elemento visual más grande de la pantalla (normalmente la imagen hero o el título principal). Es la métrica más directamente relacionada con la percepción de velocidad del usuario.

• Bueno: menos de 2,5 segundos
• Necesita mejora: 2,5 a 4 segundos
• Malo: más de 4 segundos

Cómo mejorarlo: Preload de la imagen hero con <link rel="preload">, imagen en formato AVIF o WebP, servidor con TTFB menor de 600ms (hosting de calidad o CDN), sin CSS render-blocking.

INP — Interaction to Next Paint

Reemplazó a FID en marzo de 2024. Mide la capacidad de respuesta de la web a las interacciones del usuario (clicks, taps, teclado) durante toda la sesión, no solo la primera. Es la métrica más técnica de las tres y la que más afecta a webs con JavaScript pesado.

• Bueno: menos de 200ms
• Necesita mejora: 200 a 500ms
• Malo: más de 500ms

Cómo mejorarlo: Reducir el trabajo del main thread (JS innecesario, scripts de terceros), code splitting, deferred execution de scripts no críticos, evitar re-renders masivos en frameworks JS.

CLS — Cumulative Layout Shift

Mide cuánto se mueven los elementos de la página mientras carga. Un CLS alto es lo que causa que el usuario haga click en el botón equivocado porque el layout se movió en el último momento.

• Bueno: menos de 0,1
• Necesita mejora: 0,1 a 0,25
• Malo: más de 0,25

Cómo mejorarlo: Especificar siempre width y height en imágenes, reservar espacio para anuncios y embeds, evitar insertar contenido sobre contenido existente, cargar fuentes con font-display: swap.

Una web con los tres Core Web Vitals en verde tiene una ventaja de posicionamiento medible frente a competidores equivalentes en contenido. No es el factor más importante del SEO, pero en nichos competitivos puede ser el desempate.

UX/UI: principios que llevan 20 años funcionando

Las tendencias visuales cambian cada dos años. Los principios de UX que hacen que una web funcione bien llevan décadas vigentes porque se basan en cómo procesa la información el cerebro humano, no en las modas de diseño.

Jerarquía visual

El usuario escanea antes de leer. Los estudios de eye-tracking muestran que el 80% de los usuarios leen en patrón F o Z antes de decidir si profundizan. Tu diseño tiene que guiar esa mirada: título grande y claro, subtítulo explicativo, CTA visible sin scroll. Si hay que leer tres párrafos para entender qué hace la empresa, has perdido.

La ley de Hick

A más opciones, más tiempo tarda el usuario en decidir. En la práctica: menos ítems en el menú de navegación (5-7 máximo), menos productos destacados en la home, un solo CTA principal por sección. La tentación de poner todo en portada es el error de UX más común en webs pyme.

La ley de Fitts

El tiempo para alcanzar un objetivo es proporcional a la distancia e inversamente proporcional al tamaño. En diseño web: los botones importantes tienen que ser grandes y estar cerca del contenido que motiva el click. Un CTA de 120x44px colocado justo debajo de la propuesta de valor convierte más que uno de 80x32px en la esquina del footer.

Consistencia y familiaridad

Los usuarios vienen con expectativas basadas en miles de webs visitadas. El menú está arriba. El logo lleva a la home. El enlace subrayado o en color es clicable. Los inputs de formulario tienen borde visible. Romper estas convenciones para "diferenciarte" tiene un coste en usabilidad que rara vez justifica el beneficio estético.

Feedback inmediato

Cada interacción del usuario necesita respuesta visual: el botón cambia de estado al hover, el formulario muestra un loader al submit, el mensaje de error aparece inline (no en una alerta de JS), el éxito se confirma con un mensaje claro. Un formulario que no responde parece roto aunque funcione perfectamente.

Los microdetalles que marcan la diferencia

• Cursor pointer en todos los elementos clicables (no solo en links y botones nativos)
• Focus visible en elementos de formulario (no eliminar el outline por razones estéticas)
• Scrollbar styling consistente en navegadores que lo permiten
• Placeholder text que desaparece al escribir, no que compite con el valor
• Mensajes de error que dicen qué hacer, no solo que algo está mal

SEO técnico en 2026: lo que importa de verdad

El SEO técnico es la base sobre la que se construye todo el resto. Sin ella, el mejor contenido del mundo puede no indexarse o indexarse mal. En 2026 los factores técnicos que más impacto tienen son cinco.

1. Velocidad real (no solo PageSpeed score)

Un score de 90 en PageSpeed no garantiza una buena experiencia real. Lo que importa es el LCP en el percentil 75 de tus usuarios reales (Google lo mide en el CrUX dataset). Una web en un hosting barato en US, con usuarios en España, va a tener un TTFB de 800-1200ms que ninguna optimización de frontend va a compensar. El hosting importa.

2. Indexabilidad limpia

Cualquier URL que Google no debería indexar (páginas de filtro en e-commerce, páginas de paginación, URLs con parámetros UTM, páginas de admin) necesita o bien noindex o bien estar fuera del crawl budget vía robots.txt. Una web con 500 URLs indexadas de las cuales 300 son basura tiene peor posicionamiento en las 200 que importan.

3. Estructura de URLs semántica

URL descriptivas, con guiones, sin mayúsculas, sin caracteres especiales. /servicios/diseno-web-barcelona bien. /page?id=47&cat=3 mal. Esto parece básico pero en WordPress mal configurado o con muchos plugins el problema es frecuente.

4. Internal linking estratégico

El link interno transfiere autoridad (PageRank) entre páginas y le dice a Google cuáles son las más importantes. Una arquitectura de internal linking bien pensada multiplica el posicionamiento de las páginas clave sin escribir una sola línea nueva de contenido.

5. Core Web Vitals (ver sección anterior)

Google ha confirmado que los CWV son factor de ranking. No el más importante, pero sí un desempate en nichos competitivos.

Lo que ya no funciona (y nunca debería haber funcionado)

• Keyword stuffing: repetir la palabra clave 30 veces en un texto de 500 palabras
• H1 y title idénticos en todas las páginas
• Backlinks de directorios de spam
• Contenido generado por IA sin revisión humana y sin perspectiva de primera mano
• Páginas de ciudad ("Fontanero en Sabadell", "Fontanero en Terrassa") sin contenido diferencial

El SEO de 2026 premia contenido profundo, específico, con autoridad demostrada en el tema y experiencia real. La cantidad de palabras importa menos que la densidad de valor por párrafo.

Schema Markup y AEO: diseñar para búsquedas de IA

AEO (Answer Engine Optimization) es el SEO adaptado a motores de respuesta: Google AI Overviews, Bing Copilot, Perplexity, ChatGPT Search. En 2026, una parte creciente de las búsquedas no termina en un click en un resultado, sino en una respuesta directa generada por IA que cita fuentes. Si tu web no está estructurada para ser citada, pierdes visibilidad en este canal.

Schema Markup: el lenguaje que entienden los buscadores

Schema Markup es código JSON-LD en el <head> de tu página que le explica a Google de forma inequívoca qué tipo de entidad es tu contenido. Los tipos más importantes para negocios:

• LocalBusiness: Nombre, dirección, teléfono, horarios, área de servicio. Imprescindible para negocios con ubicación física o servicio local.
• FAQPage: Las preguntas frecuentes de tu web pueden aparecer como FAQ rich snippets en los resultados y ser citadas en AI Overviews.
• Article / BlogPosting: Fecha, autor, imagen, descripción. Ayuda a Google a entender que el contenido es editorial y relevante.
• Product: Precio, disponibilidad, valoraciones. Para e-commerce y páginas de servicio con precio.
• BreadcrumbList: La ruta de migas en los resultados de búsqueda mejora el CTR y la indexabilidad.

Estructurar contenido para AEO

Los LLM prefieren contenido estructurado con respuestas directas. Esto significa:

• Responder la pregunta del título en los primeros 2 párrafos, no al final de una introducción de 300 palabras.
• Usar listas y tablas para información comparativa (los LLM las digieren mejor que los párrafos de prosa).
• Incluir una sección FAQ con preguntas reales (las que aparecen en "People Also Ask" de Google son un buen punto de partida).
• Citar datos con fuente: "según Statcounter, el 68% del tráfico..." da más autoridad a la respuesta.

Implementación técnica básica

El Schema FAQPage bien implementado puede duplicar el espacio visual de tu resultado en SERP sin cambiar tu posición. El código es simple JSON-LD en el head:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "¿Cuánto cuesta una página web profesional?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "En España en 2026, una web profesional para pyme oscila entre 800€ y 5.000€..."
    }
  }]
}
</script>

Más sobre estrategia AEO para negocios locales: Guía SEO 2026.

Velocidad web: del 2,5s al 0,8s con decisiones concretas

La velocidad de una web no es un número en un test, es una variable de negocio directa. Amazon publicó que cada 100ms adicionales de carga reducen sus ventas un 1%. Google confirmó que las páginas que pasan de 1s a 3s de carga tienen un 32% más de bounce rate. Para pymes con márgenes ajustados, esto se traduce en clientes que no llaman.

El camino del 2,5s al 0,8s tiene cuatro palancas ordenadas de mayor a menor impacto.

1. Hosting y TTFB (mayor impacto)

El Time To First Byte es el tiempo que tarda el servidor en responder. Un hosting compartido barato en un servidor saturado puede tener un TTFB de 800-1200ms. Un VPS bien configurado o un hosting gestionado de calidad (Kinsta, WP Engine, Hetzner con nginx tuning) baja ese número a 150-300ms. Ninguna optimización de frontend compensa un TTFB malo.

Para WordPress en 2026: Hetzner CPX11 (€4,5/mes) con nginx, PHP 8.3, Redis object cache y OPcache bate en rendimiento a cualquier hosting compartido de €20/mes.

2. Imágenes (segundo mayor impacto)

Las imágenes son el mayor peso en la mayoría de webs. El stack correcto en 2026:

• Formato AVIF como primera opción (30-50% más ligero que WebP), WebP como fallback
• Compresión con pérdida adaptada al uso: hero (calidad 80), thumbnails (calidad 65), decorativas (calidad 55)
• Dimensiones correctas: servir imágenes al tamaño en que se muestran, no una imagen de 3000px para un thumbnail de 400px
• Lazy loading para imágenes below the fold: loading="lazy"
• Preload de la imagen hero: <link rel="preload" as="image">

3. JavaScript (tercer factor)

El JS excesivo es el asesino silencioso de la velocidad. En 2026, una web de negocio debería funcionar con menos de 150KB de JS comprimido. El inventario típico de una web WordPress con problemas:

• jQuery (87KB) cargado aunque solo use 3 funciones
• Slider plugin (120KB) para un hero que solo muestra 2 imágenes
• Analytics + pixel + chat + heatmap: 4 scripts de terceros = 200KB+ y 4 conexiones adicionales

4. CDN

Cloudflare (free tier) añade una capa de caché global que reduce el TTFB percibido para usuarios geográficamente alejados del servidor. Para una web con servidor en Frankfurt y usuarios en Barcelona es menos crítico, pero sigue valiendo la pena por la protección DDoS, el minado automático de CSS/JS y el servicio de AVIF on-the-fly.

Accesibilidad WCAG 2.2: lo mínimo legal en 2026

La Directiva Europea de Accesibilidad Web (WAD) y su transposición en España exigen desde 2021 que las webs del sector público cumplan WCAG 2.1 nivel AA. En 2026, la presión se extiende progresivamente al sector privado, especialmente para empresas con facturación significativa y servicios al consumidor. Pero más allá del aspecto legal, la accesibilidad bien implementada mejora el SEO, la usabilidad general y la velocidad de carga.

Los 10 criterios WCAG 2.2 que más se incumplen

1. Contraste de color insuficiente: Texto gris claro sobre fondo blanco. El ratio mínimo es 4,5:1 para texto normal y 3:1 para texto grande (18px+ o 14px bold+). Herramienta: WebAIM Contrast Checker.
2. Imágenes sin texto alternativo: Todas las imágenes funcionales (que comunican información) necesitan alt descriptivo. Las imágenes decorativas necesitan alt="" para que el lector de pantalla las ignore.
3. Formularios sin labels asociados: Cada input necesita un <label for="id"> o aria-label. El placeholder no es un sustituto del label.
4. Focus invisible: Eliminar el outline de CSS sin reemplazarlo con un indicador de foco propio bloquea la navegación por teclado.
5. Estructura de headings rota: Saltar de H1 a H4, o usar múltiples H1 por página. Los H deben seguir una jerarquía lógica.
6. Videos sin subtítulos: Todo video con audio necesita subtítulos o transcripción.
7. Links sin texto descriptivo: "Haz click aquí" o "Leer más" son inútiles para usuarios de lector de pantalla. El texto del link debe describir el destino.
8. Color como único indicador: No usar solo el color para comunicar estado (error, éxito, seleccionado). Añadir siempre un icono o texto.
9. Componentes no navegables por teclado: Menús, modales, acordeones que solo funcionan con ratón.
10. Target size insuficiente (nuevo en WCAG 2.2): Los elementos interactivos deben tener al menos 24x24px de área de click. Recomendado 44x44px.

Herramientas de auditoría gratuitas: axe DevTools (extensión Chrome), WAVE (extensión Chrome), Lighthouse en modo accesibilidad. Ninguna detecta el 100% de los problemas —solo un test con usuario real con discapacidad lo hace— pero cubren el 60-70% de los criterios automáticamente verificables.

Una web accesible no es una web para discapacitados. Es una web que funciona bien para todos: en pantalla de 4 pulgadas, con 60% de batería, en pleno sol, con una sola mano ocupada.

Precios reales del diseño web en España 2026

Esta es la sección más buscada y la más difícil de responder honestamente, porque los precios varían enormemente según el tipo de proyecto, el proveedor y la ubicación. Aquí los rangos reales del mercado español, no los precios de un configurador online.

Por tipo de proyecto

Por tipo de proveedor

Qué no te dice el presupuesto inicial

El precio del desarrollo es solo parte del coste total. Los costes recurrentes que hay que presupuestar desde el inicio:

• Hosting: €5 - €100/mes según tráfico y tecnología
• Dominio: €10 - €30/año
• Mantenimiento web: €50 - €500/mes (actualizaciones, backups, monitorización, soporte)
• Contenido: Textos, fotografía profesional, video. Subestimado en el 90% de proyectos.
• Herramientas: Email marketing, CRM, analytics avanzado, chat. €50-€300/mes

Una web de €1.200 con €30/mes de mantenimiento y €50/mes de herramientas cuesta €1.200 + €960/año. Una web de €3.500 con mantenimiento incluido puede salir más barata a 3 años.

Calcula tu inversión real con nuestra calculadora de precio de web.

Cómo elegir agencia o desarrollador en 2026

El mercado está lleno de proveedores que prometen webs premium a precios de supermercado. El proceso correcto para elegir no es pedir el precio más bajo entre varios presupuestos: es evaluar si el proveedor entiende tu negocio y tiene el historial para demostrarlo.

El proceso en 5 pasos

1. Define qué necesitas antes de buscar: ¿Qué hace la web? ¿Para qué tipo de usuario? ¿Qué métricas de éxito tiene (leads, ventas, reservas)? Un proveedor que no te hace estas preguntas en la primera reunión no está haciendo su trabajo.
2. Evalúa el portfolio con criterio técnico: Abre 3 webs del portfolio en PageSpeed Insights. Si ninguna pasa de 70 en móvil, no contrates. Comprueba si las webs se ven bien en tu móvil. Busca si alguna es de tu sector o de uno similar.
3. Pide referencias verificables: No testimonios en su web, sino contacto directo con un cliente anterior de un proyecto similar al tuyo. Una agencia de confianza no tiene problema en facilitarlos.
4. Lee el contrato antes de firmar: Los tres puntos innegociables: propiedad intelectual del código cedida a ti, repositorio git en tu cuenta desde el inicio, y credenciales de todos los sistemas a tu nombre desde el día 1.
5. Evalúa la comunicación: ¿Responden en menos de 24 horas durante el proceso de presupuesto? La velocidad de respuesta en la venta predice la velocidad de respuesta durante el proyecto.

Red flags que justifican salir corriendo

• Presupuesto enviado sin ninguna reunión ni briefing previo
• Portfolio solo con mockups en Behance, sin webs reales en producción
• El precio es un 60% más bajo que todos los competidores sin explicación
• No pueden explicar qué CMS o tecnología van a usar y por qué
• Garantizan posición #1 en Google en X días
• No mencionan mantenimiento ni dan precio para los primeros 12 meses

Las preguntas que debes hacer

• ¿En qué servidor va a estar alojada la web y por qué ese?
• ¿Quién va a ser el developer responsable y puedo hablar con él?
• ¿Cómo gestiones los cambios de alcance durante el proyecto?
• ¿Qué pasa con la web si termina la relación comercial?
• ¿Hacéis la transferencia de todo el acceso al cliente al finalizar?

¿Buscas agencia en Barcelona? Conoce nuestro proceso y portfolio.

Errores típicos que ven los expertos en cada auditoría

Llevamos auditando webs de pymes en España desde hace años y hay errores que aparecen en el 70% de los proyectos, independientemente de quien los haya construido. Esta lista no es teórica.

Errores de estrategia (los más caros)

• No tener un objetivo claro por página: Cada página debería tener un KPI: la home genera leads, el blog genera tráfico orgánico, la página de servicios convierte. Una página que intenta hacer todo no hace nada bien.
• Menú de navegación con 8+ ítems: El usuario no sabe dónde ir. La solución no es más opciones, es mejor arquitectura de información.
• Propuesta de valor enterrada: La empresa tarda 300 palabras en explicar qué hace. En el mundo real, el usuario decide en 5 segundos si sigue leyendo.
• Sin CTA arriba del fold: El usuario tiene que scrollar para encontrar cómo contactar. En móvil es especialmente grave.

Errores de diseño

• Contraste insuficiente: Texto gris claro sobre fondo blanco o claro. Bonito en diseño, ilegible en pantalla brillante al sol.
• Tipografías web lentas cargadas sin display:swap: Texto invisible hasta que carga la fuente, que puede tardar 1-2 segundos.
• Imágenes de stock genéricas: Fotos de handshakes, personas con trajes sonriendo en oficinas blancas. Transmiten cero confianza.
• Footer con demasiado contenido: El footer es el último recurso, no el primer punto de contacto. No poner allí lo que debería estar arriba.

Errores técnicos

• Imágenes sin comprimir: Una sola imagen de 3MB en la home puede hacer que el LCP supere los 4 segundos.
• Plugins de caché mal configurados en WordPress: La caché está activa pero excluye demasiadas URLs o tiene un TTL de 10 minutos.
• HTTP en vez de HTTPS: En 2026 sigue habiendo webs sin SSL. Google las etiqueta como "No seguro" y las penaliza en ranking.
• Sin redirects 301 después de cambiar URLs: Errores 404 acumulados que pierden posicionamiento y frustran a usuarios que llegan de links externos.
• Google Analytics mal configurado: Tráfico interno de la empresa contaminando los datos, conversiones no definidas, sin filtros de bots.

Errores de contenido

• Textos escritos para Google, no para el usuario: Párrafos con la keyword repetida en cada frase que nadie leería voluntariamente.
• Sin testimonios reales o casos de éxito: La prueba social es el mayor conversor en muchos sectores. No tenerla es dejar dinero en la mesa.
• Blog abandonado: El último post tiene fecha de 2022. Peor que no tener blog: indica que la empresa no está activa.
• FAQs copiadas de la competencia: Sin perspectiva propia, sin datos propios, sin voz diferencial.

Checklist de 30 puntos antes de publicar una web

Esta lista cubre los aspectos más críticos antes de lanzar. Guárdala, imprímela, úsala en cada proyecto.

Rendimiento (10 puntos)

1. LCP menor de 2,5s en móvil en PageSpeed Insights (real data, no laboratorio)
2. INP menor de 200ms
3. CLS menor de 0,1
4. Todas las imágenes above the fold en AVIF/WebP y comprimidas
5. Imagen hero con preload en el head
6. Todas las imágenes below the fold con loading="lazy"
7. JS total menor de 200KB comprimido (excluye scripts de terceros)
8. CSS crítico inline o en el head, resto diferido
9. Caché configurada: assets estáticos con TTL de 1 año, HTML con TTL corto
10. HTTPS activo con redirección automática desde HTTP

SEO técnico (8 puntos)

11. Cada página tiene un H1 único y descriptivo
12. Meta title y meta description únicos en cada URL (60/160 caracteres)
13. Sitemap XML generado y enviado a Google Search Console
14. robots.txt configurado correctamente (sin bloquear CSS/JS)
15. Canonical correcto en cada página (sin auto-referenciales rotos)
16. Schema Markup LocalBusiness, FAQPage y Article implementados donde corresponde
17. Cero errores 404 o con redirect 301 configurado
18. Google Analytics y Search Console verificados y recibiendo datos

UX y contenido (7 puntos)

19. CTA visible arriba del fold en desktop y móvil
20. Formulario de contacto probado (envío real, confirmación por email)
21. Todos los links internos funcionan (sin broken links)
22. Propuesta de valor clara en los primeros 5 segundos
23. Al menos un testimonio real o caso de éxito visible
24. Número de teléfono y email visibles sin buscar
25. Aviso legal, política de privacidad y cookies presentes y actualizados

Accesibilidad y móvil (5 puntos)

26. Contraste de color mínimo 4,5:1 en todo el texto del sitio
27. Todas las imágenes tienen atributo alt descriptivo o alt vacío si son decorativas
28. Todos los formularios tienen labels asociados
29. La web es completamente usable con teclado (tab, enter, escape)
30. Viewport meta tag correcto: <meta name="viewport" content="width=device-width, initial-scale=1">

¿Quieres que auditemos tu web con este checklist? Solicita una auditoría gratuita.