Malos hábitos en el desarrollo web que debemos evitar

Imagina que acabas de lanzar un sitio web. En tu monitor de 27 pulgadas se ve genial. Luego un amigo lo abre en su teléfono y te manda una captura: el menú se desborda, los botones son diminutos y la mitad de la página exige scroll lateral.

Nada en el código está "mal" de una forma que lance un error. Simplemente el sitio arrastra unos cuantos hábitos silenciosos que lo empeoran para las personas reales, y también para quien lo mantiene. Son fáciles de adquirir, porque cada uno ahorra un poco de tiempo hoy y lo cobra después.

Estos son cinco de los más comunes. Para cada uno veremos cómo muerde y qué hacer en su lugar. Empezamos con el de aquella captura.

1. No pensar en el móvil desde el principio

La mayoría de los usuarios llega a la web desde un teléfono. Tratar el móvil como un añadido, algo donde se encaja el diseño de escritorio al final, es un error crítico. Corregirlo tarde significa deshacer decisiones sobre las que se construyó toda la página.

Un enfoque mobile-first invierte el orden: primero asegúrate de que el sitio funcione y se vea bien en pantallas pequeñas, y luego escala a las grandes.

Qué hacer:

• Prototipa primero el diseño móvil y revisa la experiencia en distintos tamaños de pantalla.
• Escribe los estilos base para pantallas pequeñas y usa media queries con min-width para mejorar en las grandes.

/* Base: pantallas pequeñas */
.card-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

/* Pantallas grandes: mejoras */
@media (min-width: 768px) {
  .card-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

Cuando el diseño aguanta en todas las pantallas, lo siguiente que nota un visitante es si las páginas parecen pertenecer al mismo sitio.

2. Ser inconsistente

Imagina a un visitante navegando por tu sitio. En la página de inicio, el enlace activo es azul. En la de precios, es verde. En el blog, va subrayado y en rojo. Nada está roto, pero el visitante empieza a preguntarse si sigue en el mismo sitio.

El diseño, los enlaces y los estilos inconsistentes confunden a los usuarios y hacen que un producto parezca poco profesional.

Qué hacer:

• Define y sigue una guía de estilo que cubra colores, tipografía, botones y enlaces.
• Usa un sistema de diseño (Material Design, Bootstrap o uno propio) para mantener la coherencia visual y funcional.
• Centraliza los valores de diseño como tokens en lugar de repetirlos:

:root {
  --color-link: #0b5fff;
  --color-link-active: #0a3fb3;
}

a { color: var(--color-link); }
a:active, a[aria-current="page"] { color: var(--color-link-active); }

Cambias el token una vez y todas las páginas lo siguen. Justo lo contrario de lo que pasa con el siguiente hábito.

3. Escribir URLs fijas en el código

Digamos que el sitio tiene cien páginas, cada una enlazando a https://www.mysite.com/.... Entonces cambia el dominio. O alguien necesita una copia de staging para probar un release. De pronto todos los enlaces apuntan al lugar equivocado, y la solución es un buscar y reemplazar en todo el proyecto.

Las URLs fijas en el código fuente hacen que un sitio sea más difícil de mantener y de escalar. Se rompen cada vez que cambia el dominio o cuando trabajas con varios entornos (desarrollo, staging, producción).

Qué hacer:

• Prefiere rutas relativas en lugar de absolutas para los enlaces internos y los recursos.
• Usa variables de entorno para manejar las URLs que dependen del entorno, como la URL base de una API.

// Mal
fetch("<https://api.mysite.com/users>");

// Mejor
fetch(`${process.env.API_BASE_URL}/users`);

<!-- Mal -->
<a href="<https://www.mysite.com/about>">Acerca de</a>

<!-- Mejor -->
<a href="/about">Acerca de</a>

Hasta aquí vimos hábitos que perjudican a quienes mantienen el sitio. El siguiente perjudica a quienes no pueden ver la página.

4. Omitir el atributo alt en las imágenes

Piensa en alguien que usa un lector de pantalla y llega a la página de tu producto. Donde debería haber una foto del producto, el lector dice solo "imagen" o, peor, lee en voz alta un nombre de archivo como IMG_4821.jpg. Lo mismo le pasa a cualquiera cuando una imagen no carga por una mala conexión.

El atributo alt describe una imagen a los usuarios con discapacidad visual y a todos cuando la imagen no carga. Omitirlo hace la página más difícil de usar, y además perjudica el SEO.

Qué hacer:

• Da a cada imagen con significado una descripción clara y concisa.
• Si una imagen es puramente decorativa, usa un alt="" vacío para que la tecnología de asistencia la salte en lugar de leer un nombre de archivo.

<!-- Informativa -->
<img src="chart.png" alt="Gráfico de barras que muestra el tráfico móvil creciendo 40% interanual">

<!-- Decorativa -->
<img src="divider.svg" alt="">

Los lectores de pantalla dependen tanto de la estructura de la página como de sus imágenes, lo que nos lleva al último hábito.

5. Usar demasiados divs

Abre el HTML de una página construida así y encontrarás div dentro de div dentro de div, cada uno con un nombre de clase que intenta decir qué es en realidad el elemento. Para una persona es tedioso. Para un lector de pantalla o un motor de búsqueda, es una página sin puntos de referencia para orientarse.

Recurrir a div cuando existe un elemento semántico específico hace el código más difícil de leer y perjudica la accesibilidad y el SEO. Los lectores de pantalla y los motores de búsqueda dependen de elementos como header, nav, main, section, article y footer para entender la estructura de la página.

Qué hacer:

• Usa elementos semánticos para estructurar tu HTML.
• Deja div para agrupaciones genéricas, cuando ningún elemento mejor encaje.

<!-- Sopa de divs -->
<div class="header">...</div>
<div class="main">
  <div class="article">...</div>
</div>
<div class="footer">...</div>

<!-- Semántico -->
<header>...</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

De vuelta a aquella captura

Vuelve a la captura de tu amigo, la del principio. Detrás del menú desbordado puede haber un diseño sin enfoque mobile-first, estilos inconsistentes, una URL fija, una imagen sin descripción y una página hecha solo de divs. Ninguno fue una decisión grande, pero juntos forman un sitio más difícil de usar y más difícil de mantener.

Evitar estos hábitos mejora más que el código: mejora la experiencia de usuario, la accesibilidad y la eficiencia del desarrollo. Incorporarlos desde el inicio hace un sitio más fácil de mantener y más robusto.

Elige un proyecto, revísalo contra esta lista y corrige lo que encuentres.