Las mejores prácticas para el diseño web
En Obsesion Digital nos encanta el diseño web.
Hablamos de diseño web porque hacemos diseño web, no instalamos plantillas prediseñadas que poco aportan a la personalidad de cada proyecto online.
Siguiendo esta pasión por el diseño web vamos a contaros algunas prácticas que siempre que comenzamos un proyecto nuevo tenemos muy presentes
Mobile First
Hoy en día es, salvo raras expcepciones, impensable lanzar un sitio web sin pensar en la versión móvil en cualquier de sus opciones. Es más, la versión móvil de una página web debe ser la primera en ser diseñada y desarrollada, para después ir creciendo hasta llegar a la versión de escritorio. De esta manera tanto la experiencia del usuario al navegar por el sitio web como la escalabilidad del diseño serán mucho mejores. Esto es lo que quiere decir la tan usada expresión "Mobile first".
Adapta tus imágenes
La mayoría de páginas web que se crean hoy en día, ya sea mediante CMSs como WordPress, Joomla etc o se diseñen a medida de las necesidades del cliente son ya adaptables a la navegación móvil. Sus páginas se ajustan razonablemente a la resolución de la pantalla del usuario, pero ¿Que pasa con las imágenes? Eso es otro cantar.
En la mayor parte de las páginas web con diseño responsive las imágenes son las mismas en la versión de escritorio y en la versión móvil, y esta no es la mejor opción.
Merece la pena, y mucho, hacer un esfuerzo para adaptar también las fotos tanto a las pantallas como al ancho de banda de los móviles. Los tiempos de carga y la experiencia de usuario crecerán exponencialmente.
Diseño responsive: BreakPoints
Ya que estamos hablando tanto sobre el diseño responsive o adaptable vamos a hacer mención a unos de los aspectos técnicos que más pueden condicionar nuestro diseño: Los BreakPoints de resolución, estas son las características generales:
- Menos de 480px Usado sobre todo en pantallas y móviles más antiguos.
- Menos de 768px, Perfecto para móviles grandes o tablets pequeñas.
- Más de 768px El más usado para escritorio y tabletas con resoluciones grandes.
- Menos de 320px Una resolución rara pero que empezarás a usar con el crecimiento de los relojes inteligentes.
- Más de 1024px El BreakPoint rey en ordenadores de escritorio.
Cuando llevamos a cabo un diseño web es muy fácil caer en la frase "El diseño sin valor para el usuario no es diseño, es decoración", por eso debes tener siempre en mente al usuario. Evita elementos que no sean útiles o que no aporte algo excepcional. Harás más usable la web y te ahorrarás tiempo en el desarrollo ;)
Optimiza el desarrollo al máximo
Comprime los archivos.Es fácil comprimir los contenidos de una web, y las ventajas de hacerlo se notan desde el principio: Ahorras tiempo de carga, al usuario le resulta más cómodo y quitarás algo de trabajo a nuestros SEOs :P
Activa la función GZIP en el hosting o hazlo a través del fichero .htaccess según las características de tu alojamiento
Establece una caché. Si usas plataformas como WordPress es muy fácil instalar un plug-in de cache que mejore el rendimiento y descarga de la web, pero además no olvides establecer una caché de navegador en el fichero .htaccess. Tus usuarios te lo agradecerán, y tu hosting también.
Reduce llamadas. Mejor 1 fichero CSS de 100 Kbs que 10 de 10 Kbs. Reduce al máximo las llamadas a archivos .js y .css
Y ya si puedes utilizar la técnica CSS Sprites para las imágenes ya ni te cuento…
Estos son nuestros consejos para el diseño y desarrollo de una buena web. Hay muchos más pero estos son los nuestros.