6.3Buenas prácticas y trampas
Lo esencial en 30 segundos
- Estructurar: contenedores Flexbox simples (sin sobre-anidamiento), guía de estilo global (colores/fuentes) definida pronto, partes globales en el Theme Builder.
- Fiabilizar: un solo H1 por página, alt en cada imagen, un overlay para el texto sobre imagen, un formulario probado, responsive ajustado por punto de ruptura.
- Industrializar: imágenes comprimidas + caché, widgets Pro integrados en vez de plugins de terceros, copias de seguridad, un kit reutilizable — probar en un móvil real antes de entregar.
Hilo conductor — la regla pegada en la pared
Tras unos proyectos, Nadia pegó su regla en la pared en Orán: estructurado y probado primero, "bonito" después. Lo que más contó no fue un widget, sino tres hábitos — estructura simple, guía de estilo global, prueba móvil — y su mayor trampa evitada por poco: una banda preciosa en su pantalla pero ilegible en el teléfono, atrapada antes de entregar.
Elige un solo hábito para anclar en tu rutina, luego pasa al siguiente.
Los do / don't de un sitio fiable
La diferencia entre un sitio sólido y una fábrica de retoques está en unos pocos hábitos de diseño. Estos son los que más vuelven.
✓ Hacer
- Estructurar con contenedores Flexbox simples; anidar solo si es necesario.
- Definir la guía de estilo (colores/fuentes) en global, desde el principio.
- Diseñar cabecera/pie en el Theme Builder (una vez, para todo el sitio).
- Un solo H1 por página; alt descriptivo en cada imagen.
- Añadir un overlay siempre que haya texto sobre una imagen.
- Comprimir las imágenes (WebP) y activar una caché.
- Preferir los widgets Pro integrados (formulario) a los plugins de terceros.
- Hacer copia antes de cualquier intervención y probar en un móvil real antes de entregar.
✗ Evitar
- Sobre-anidar contenedores "para controlar".
- Ajustar los colores elemento por elemento en vez de en global.
- Recopiar la cabecera en cada página en vez del Theme Builder.
- Poner texto directamente sobre una imagen contrastada (ilegible).
- Subir imágenes pesadas sin comprimir.
- Multiplicar plugins que se duplican.
- Pop-up al llegar, difícil de cerrar (sobre todo móvil).
- Juzgar "bonito" solo en la pantalla del ordenador, sin probar el móvil, sin probar el móvil.
Guion listo para decir — comprobar tu sitio antes de entregar (30 s)
"¿Estructura simple? ¿Guía de estilo global? ¿Cabecera/pie globales? ¿Un H1 + alt? ¿Overlay en el texto sobre imagen? ¿Imágenes comprimidas + caché? ¿Formulario probado? ¿Móvil comprobado? Si algún no, lo corrijo antes de entregar."
Plantilla para copiar y pegar — comprobación antes de entregar
ESTRUCTURA: contenedores simples, cero sobre-anidamiento
GLOBAL: guía de estilo (colores/fuentes) + cabecera/pie (Theme Builder)
CONTENIDO: 1 H1/página, alt en todas partes, overlay si texto sobre imagen
RENDIMIENTO: imágenes WebP comprimidas + caché activa
FORMULARIO: envío probado (correo recibido)
MÓVIL: probado en un teléfono realArtesano / presupuesto reducido
Un solo hábito por proyecto basta: guía de estilo global + estructura simple primero, el resto después.
PyME Orán
Adaptar las rutinas a las entregas: un hueco imágenes comprimidas + prueba móvil mantenido en cada proyecto.
Remoto / híbrido
La disciplina n.º 1 en remoto: copia, guía de estilo y prueba escritas, incluso para sitios pequeños.
Multilingüe
Comprobar la guía de estilo y las partes globales en cada idioma, y la visualización RTL (AR).
Reto 48h — aplica mañana
Examina una página: guía de estilo global aplicada, cero sobre-anidamiento, overlay en el texto sobre imagen, imágenes comprimidas. Corrige el primer fallo encontrado y pruébalo en móvil.
- Conozco los 8 reflejos a hacer y las 8 trampas a evitar.
- He comprobado mis 3 puntos críticos (estructura simple, guía de estilo global, prueba móvil).
- He hecho el reto 48h o he planificado su fecha.
Antes de entregar, ¿qué reflejo protege mejor a Nadia?
Regla de oro: un ajuste definido una sola vez (guía de estilo, partes globales), aplicado en todas partes — nunca recopiado a mano.