Si eres diseñador web, ya sabes que a veces el trabajo con el cliente es difícil, ya que priman aspectos de diseño gráfico sobre aspectos fundamentales de una página web.
En el presupuesto web que se ofrece al cliente a veces es difícil de explicar “donde va su dinero” si no es visible, es decir, un vídeo, un diseño de un logotipo, una imagen bonita, es algo que se puede ver y fácil de enseñar para un diseñador web, pero aspectos como la usabilidad, la arquitectura web, la optimización para móviles o la compresión de imágenes es algo que es difícil de mostrar al cliente y por tanto no lo valorará tanto como que la web se vea “Bonita”.
Por esto hoy voy a dar 5 consejos para explicar adecuadamente donde va parte del dinero invertido en una web y que no lo verán tus clientes a simple vista.
La disciplina y la pedagogía es la única manera de que valoren tu trabajo como diseñador web.
Arquitectura web:
Qué todo se vea bonito para tu cliente no está en discordancia con una buena arquitectura web. Para ello deberás trabajar bien las Cabeceras HTML y los componentes de la url de tu cliente. Esto es algo que tu cliente en principio no valorará pero que forma parte de un buen trabajo como diseñador web:
-
Cabeceras HTML:
Utiliza la cabecera <h1> una sola vez en cada página, duplicar esta cabecera desconcertará al buscador y “afeará” los resultados de búsqueda.
Otra buena práctica es usar desde <h2> a <h6> tantas veces como creas necesario para aportar valor a la página web y al contenido.
Componentes de una URL:
Una url bien estructurada aportará valor a tu diseño web, explicar esto a un cliente te puede costar pero es coherente que los componentes de la url describan adecuadamente el sitio donde te encuentras en la web.
Como norma general la jerarquía de tu diseño web debe ser horizontal y no superar 4 niveles. Las urls amigables de las que tanto se habla no es más que debemos evitar un “chorizaco” de números y letras, ponerle nombre a todo (es mejor imorillas.com//publicidad-en-google que imorillas.com//pageid=025594930988382838), por otro lado evita los caracteres especiales en las urls, si…, es muy español el acento y la ñ, pero el resultado en una url no mola nada de nada.
Usabilidad y Experiencia del Usuario:
No debes perder de vista estos dos conceptos, el diseño web lo paga un cliente, pero el destinatario final, (el importante aquí) es el usuario.
Para que te ayude a revisar los conceptos de usabilidad y experiencia aquí tienes un checklist con una serie de preguntas:
- ¿Pueden los usuarios acceder correctamente a la web?
- ¿Pueden los usuarios encontrar lo que buscan fácilmente en el sitio web?
- ¿Se generan muchos errores de usuario? ¿Son serios?
- ¿Cuál es la reacción de los usuarios ante estos errores? ¿Abandonan la web?
- ¿Cómo puedo eliminarlos? ¿Qué grado de intervención en el diseño web requieren?
Optimización del diseño web para móviles:
Hay elementos que debes introducir en el diseño web para que los usuarios móviles, que ya son más que los que navegan de manera “tradicional” se sientan cómodos y puedan visualizar correctamente todos los contenidos de una web. Aquí cito algunos.
El elemento <picture>: Con este elemento puedes clasificar las imágenes e informar al navegador sobre qué versión debe acceder siguiendo criterios de formato, tamaño de imagen, resolución… cuando usas un móvil el ancho de banda no es muy alto y esto le ahorrará tiempo al usuario.
Metaetiqueta Viewport: Con esta metaetiqueta los pixeles del sitio web se adaptarán al dispositivo utilizado por tu usuario (mágico verdad?).
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Fuentes alternativas para Viewports diferentes: El navegador busca el primer elemento <source> que encaja con el tamaño del Viewport del usuario. Es entonces cuando pude acceder a la imagen con el atributo <srcset>
<picture>
<source media”(min-width:1024px)” srcset=”image-1600.jpg”>
<source media”(min-width:480px)” srcset=”image-480.jpg”>
<!—Fallback—><img src=”image-480.jpg” srcset=”image-320.jpg” alt=”image”>
</picture>
Consejo: la etiqueta <img> se utiliza como elemento alternativo para los navegadores que no son compatibles con la etiqueta <picture>
Añade el Atributo ALT a todas tus imágenes: Este atributo sirve para por ejemplo personas invidentes puedan “leer las imágenes” con los lectores web. Además, sirve para que la descripción que incluyas en el alt ayude a posicionar en el buscador o que aparezca como descripción si al navegador del usuario no le es posible cargar la imagen.
<img src=”img/nombre-de-la-imagen.jpg” alt=”Nombre de la Imagen” width=”100″ height=”100″>
Diseño WEB:
Un marcado adecuado constituye la base de cualquier sitio web, la estructura debe ser clara y válida, debe cumplir con la normativa HTML y CSS (por ejemplo). Las instrucciones de CSS se deben poner en un archivo externo, esto trae ventajas importantes. El archivo HTML es más pequeño y el tiempo de carga es más rápido porque el archivo CSS externo debe cargar sólo una vez por el server. Es importante que el almacenamiento en caché del navegador esté activado para los archivos CSS, por lo que no tienen que ser descargados de nuevo la próxima visita a la página web.
Compresión de imágenes:
Algunas veces las imágenes que nos envían nuestros clientes para el diseño web no tienen ni el formato ni el tamaño adecuado para la web, un plugin como tinypng te puede ayudar a alcanzar hasta un 80% de reducción al comprimir la imagen. Si es posible en tu diseño web:
- Usa los archivos .webp, son 3 veces más pequeños que un PNG comprimido.
- Usa el formato .svg, es fácil de usar y permite más interacción.
- Usa sprites en vez de muchos gráficos pequeños. Un sprite es un gráfico que contiene múltiples símbolos e iconos para minimizar el tiempo de carga de un sitio web.