La conversación que tenemos con cada cliente nuevo
Cuando le mostramos a un cliente el diseño de su sitio web —ya sea una maqueta en Figma, Adobe XD, Photoshop, o directamente en Divi sobre WordPress— la primera reacción casi siempre es positiva. El diseño se ve exactamente como lo imaginaban. Luego lo abren en su teléfono. Y ahí viene la pregunta: "¿Por qué no se ve igual?"
La respuesta honesta es que un diseño web nunca se verá igual en todos los dispositivos, navegadores y sistemas operativos. No porque el diseñador no sepa su trabajo, sino porque la naturaleza del medio web es fundamentalmente diferente a la de un documento impreso o un archivo gráfico estático. Entender esto antes de comenzar el proyecto evita expectativas incorrectas, decisiones de diseño equivocadas, y discusiones innecesarias al momento de la entrega.
Por qué el diseño estático y el web son medios distintos
El papel tiene dimensiones fijas. La web no.
Una hoja A4 mide siempre 210 × 297 mm. Un archivo PDF se ve idéntico en cualquier pantalla porque su contenido está "congelado" en esas dimensiones. Un sitio web, en cambio, debe mostrarse en una pantalla de 4K de 27 pulgadas, en un MacBook Pro de 14 pulgadas, en un iPad en modo horizontal, en un iPhone 15 en modo vertical, en un Android con pantalla de 5.5 pulgadas en modo oscuro, y en un monitor de resolución 1366×768 que todavía es el más común en Chile según datos de StatCounter.
El CSS (el lenguaje que controla el aspecto visual de la web) define reglas y proporciones, no posiciones absolutas. "Esta imagen ocupa el 40% del ancho disponible" funciona diferente en cada resolución. El diseño que en el mockup estático se veía con proporciones perfectas puede requerir ajustes cuando se implementa en el navegador y se prueba en múltiples dispositivos.
Los navegadores interpretan distinto
Chrome, Firefox, Safari, Edge y Opera son los principales navegadores, y todos ellos tienen motores de renderizado distintos: Blink (Chrome y Edge), Gecko (Firefox), y WebKit (Safari). Cada motor interpreta el CSS y el HTML con pequeñas diferencias. Algo tan básico como el espaciado por defecto de un botón, la forma en que se renderizan los bordes redondeados, o el comportamiento de una animación CSS puede variar entre navegadores.
Safari en iOS es el caso más particular del mercado: Apple no permite que otros motores de renderizado corran en iOS, así que todos los navegadores en iPhone y iPad —incluso Chrome y Firefox— usan WebKit por debajo. Esto significa que si un efecto visual funciona en Chrome de escritorio pero no en el iPhone de tu cliente, no es un error del diseño: es una diferencia de implementación de estándares entre motores.
El sistema operativo afecta la tipografía
El renderizado de fuentes —cómo se dibujan los caracteres en pantalla— es notablemente diferente entre Windows, macOS y los sistemas móviles. macOS usa suavizado subpixel y una filosofía de renderizado que tiende a hacer las fuentes más nítidas y redondas. Windows usa ClearType con un enfoque diferente que a veces hace el texto más delgado. En pantallas de alta resolución (Retina, OLED) la diferencia se reduce, pero en pantallas estándar es visible.
Esto significa que una tipografía que en tu MacBook se ve elegante y bien espaciada, puede verse ligeramente diferente en el monitor Windows del cliente. No está mal: son las mismas instrucciones CSS interpretadas por dos sistemas de renderizado distintos.
El modo oscuro y las preferencias del usuario
Los sistemas operativos modernos permiten al usuario elegir entre modo claro y modo oscuro, y esta preferencia puede afectar cómo se ven los elementos de un sitio web si el sitio no está correctamente configurado para respetarla o ignorarla. Un fondo que aparecía blanco puede aparecer negro si el navegador respeta la preferencia del sistema. Los colores de formularios y campos de texto son especialmente susceptibles a estas diferencias.
Qué significa "responsivo" en la práctica
Un sitio "responsive" no significa que se ve exactamente igual en todos los dispositivos: significa que se adapta para verse bien en cada contexto. En pantalla grande, el contenido puede desplegarse en 3 columnas. En tablet, en 2 columnas. En móvil, en 1 columna vertical. Los elementos se reorganizan, algunas imágenes cambian de tamaño, algunos elementos decorativos se ocultan en pantallas pequeñas.
Divi, el constructor con el que trabajamos, implementa este sistema mediante breakpoints: se define el diseño para escritorio, luego se ajusta para tablet (generalmente debajo de 980px de ancho), y luego para móvil (debajo de 767px). Cada ajuste se hace manualmente porque el comportamiento automático de adaptación no siempre produce el resultado óptimo. Es parte del trabajo de implementación web, no un error.
El proceso correcto para planificar un sitio
1. Definir primero el contenido, no el diseño
El error más frecuente en proyectos web es comenzar con un diseño visual hermoso antes de tener el contenido real. Cuando el contenido llega después —textos más largos de lo previsto, imágenes de proporciones distintas a las del mockup, secciones adicionales— el diseño debe ajustarse y las expectativas no se cumplen. La secuencia correcta es: arquitectura de información → contenido real → wireframe (esquema de estructura) → diseño visual → implementación.
2. Mobile first: diseñar primero para el dispositivo que más se usa
En Chile, más del 60% del tráfico web proviene de dispositivos móviles. Diseñar primero para escritorio y luego adaptar para móvil produce sitios donde la versión móvil siempre parece "la segunda". Diseñar primero la experiencia móvil garantiza que el caso de uso más frecuente esté perfectamente resuelto.
3. Testear en dispositivos reales, no solo en emuladores
Los emuladores de dispositivos móviles en Chrome DevTools son herramientas de desarrollo excelentes, pero no reproducen exactamente la experiencia en un dispositivo real. El rendimiento, el comportamiento del teclado virtual, las fuentes del sistema y el comportamiento del scroll son diferentes en un iPhone real versus la emulación. Siempre probamos en al menos 3 dispositivos reales antes de la entrega: un iPhone actual, un Android de gama media y un iPad.
4. Las fuentes web tienen latencia
Si el diseño usa fuentes de Google Fonts u otras fuentes web, hay un instante durante la carga de la página en que el navegador muestra el texto con una fuente de sistema mientras descarga la fuente personalizada. Este "parpadeo de fuente" (FOUT, Flash of Unstyled Text) es normal y se mitiga con técnicas de precarga, pero nunca desaparece completamente en la primera visita. En visitas posteriores el navegador tiene la fuente en caché y no ocurre.
Lo que ofrecemos como estudio
Diseñamos y desarrollamos sitios web en WordPress con Divi, con un proceso que incluye la planificación de arquitectura de contenidos, diseño visual alineado con la identidad de marca, implementación responsiva verificada en múltiples dispositivos y navegadores, configuración SEO básica con Rank Math, y entrega con capacitación para que el cliente pueda gestionar sus propios contenidos.
También realizamos fotografía de producto, espacio e identidad corporativa para alimentar el sitio con contenido visual propio —una de las diferencias más grandes entre un sitio mediocre y uno que realmente comunica.
Trabajamos con clientes de todo Chile. El diseño y desarrollo web es una disciplina que se adapta perfectamente al trabajo remoto: reuniones por videollamada, revisiones compartiendo pantalla, entregas por plataforma digital. Tenemos clientes activos en Santiago, Valparaíso, Concepción, Temuco, Puerto Montt, Antofagasta, La Serena e Iquique. Si tienes un negocio en cualquier región del país y necesitas una presencia web profesional, podemos ayudarte sin que necesites desplazarte. Contáctanos para una reunión de diagnóstico sin costo donde evaluamos juntos qué tipo de sitio necesitas y te entregamos un presupuesto claro.