Las mejores prácticas para el desarrollo de aplicaciones web

Por

El diseño web responsivo se ha convertido en el método preferido para el desarrollo de aplicaciones que quieren que sea amigables con múltiples dispositivos.

En este post, aprenderás cuáles son las mejores prácticas para sacarle provecho al RWD:

  • Diseño responsivo: planifica en pequeño... y en grande

Uno de los factores que hace que este tipo de diseños sean exitosos, es la capacidad de que logran crear una mejor experiencia de usuario..

Sin embargo, el error está en que muchos desarrolladores cuando piensan en la palabra “responsivo” piensan en pantallas pequeñas de poca resolución; siendo que el diseño responsivo tiene beneficios para todos los tamaños de pantalla, chicos, medianos y muy grandes.

En los últimos años se han observado dos comportamientos que han presentado un incremento increíble, el primero es el tráfico mediante dispositivos móviles y el otro se basa en que muchos usuarios utilizan distintos tipos de dispositivos a lo largo del día.

Esto ha provocado que se le de mucha importancia a optimizar los sitios web para que sean adaptables.

Cuando estés diseñando la UX, anota todas las categorías que tendrá tu app, clasifícalos en términos de prioridad y haz un prototipo sobre cómo se vería en las pantallas pequeñas. Para las más grandes, agrega los elementos necesarios.

 1-45447987845.jpg

 

No olvides que prácticamente todos los días, se introducen nuevos dispositivos se en el mercado, simplemente hoy en día hay 24,093 distintos dispositivos Android;por lo que los breakpoints más utilizados, puede que en unos años ya no se tomen en cuenta, y tamaños que ni siquiera consideramos actualmente, tal vez terminen siendo de vital importancia.

Sin embargo, por el momento para diseñar una experiencia con una escalabilidad real, céntrate en los dos puntos de ruptura más populares y los espacios entre ellos.

 

  • Reflexiona antes de reducir

El diseñador Maeda en su libro de “Las leyes de la simplicidad” nos dice “en caso de dudar, sólo elimina...pero ten cuidado con lo que quitas”

Esta frase puede parecerte extraña, pero es un consejo muy útil. Si estás interesado en ser un alguien exitoso en este negocio, es muy importante que en las primeras fases te centres únicamente en el contenido y las características fundamentales para tus usuarios.

Piensa de manera estratégica que funciona y que no. Mantén lo que es importante, cuestiona lo que queda, y ser implacable en tus decisiones para quitar cualquier cosa que esté de más en tu diseño.

Por ejemplo, si al ver en un elemento tienes que pensar y/o establecer un argumento de por qué es posible que tengas que incluirlo por algún caso extremo, entonces es un buen candidato para la pila de descartes.  

 

  • Se único en la manera de priorizar tu contenido

El desarrollo de aplicaciones web involucra más que sólo “encajar” un sitio en diferentes tamaños de pantallas, puedes modificar el layout de la columna para que vaya abarcando varias conforme va creciendo el tamaño de la pantalla, pero también necesitas modificar el contenido y los elementos que se muestran para tener una interfaz amigable.

Por ejemplo, en la imagen puedes ver que en el sitio web, el blog muestra la imagen de editorial, una foto del autor junto con su nombre, el título del post y la fecha de publicación.

 2-1.png

Pero cuando se accede al blog de la firma de contabilidad, KLR, desde un Smartphone, el diseño cambia un poco y la imagen de editorial es eliminada para ahorrar espacio. Aunque esas fotos son buenas, no son críticas para la presentación de contenido, por lo que el quitarlas no afecta en la fuerza de su contenido.

 

  • Navegación escalable 

Este es uno de los aspectos más desafiantes del diseño responsivo. Lo que funciona perfectamente para pantallas grandes, se ve horrible y todo desacomodado en otros dispositivos.

Es por eso que cuando diseñes esta parte del sitio, no busques en tener una experiencia de navegación consistente en cada tipo de dispositivo, más bien enfócate en crear una navegación clara y amigable en cada paso del camino, aunque la forma exacta de esta difiera de una pantalla a otra.

Ahora, lo que acabas de leer puede sonar que va en contra de los principios del UX, así que déjame aclarar bien las cosas:

Tu navegación debe ser lo más consistente posible, incluyendo las etiquetas utilizadas en los botones y los enlaces y las características visuales de los botones (opción de la fuente, color, etc.) La inconsistencia está en cómo funciona.

Un menú que se despliega cuando ubicas el puntero del mouse en ese elemento, puede funcionar de manera perfecta para los usuarios que utilizan una computadora o laptop, pero no servirá de nada en las pantallas táctiles y en tamaños pequeños. Para esos casos, la navegación debe tener una sensación similar, pero una funcionalidad distinta y apropiada a donde se vaya a utilizar; por ejemplo, un panel de navegación.

3.gif

  • Calidad de la imagen vs velocidad de descarga

12s.jpg

Ya has de estar acostumbrado a ver esa ruedita. Pero no es culpa de tu wifi, la web cada vez es más lenta. El tamaño promedio de los sitios web es de 2,1 MB - dos veces mayor que el promedio del sitio desde hace tres años. Y uno de los mayores culpables de esto, es el tamaño de las imágenes. 

Es normal que quieras que tus imágenes se vean lo mejor posible y más cuando es el elemento principal que le da la bienvenida a los usuarios en tu sitio.

Actualmente la mayoría de las personas abandonan la lucha tras 3 segundos, entonces si para ese entonces no se cargó tu página, los perdiste. Es por ello que es muy importante que trabajes en encontrar un equilibrio entre los efectos visuales y el rendimiento total de la página.

Reconsidera el usar elementos como los carruseles en la página de inicio, que requieren múltiples imágenes de gran tamaño, así como el código JavaScript necesario para animarla transición. Puedes reducir significativamente el tamaño de la página mediante la eliminación del 75% de las imágenes más los scripts de animación; después optimiza para web las imágenes que quedan y usa el formato SVG cuando sea posible.

 

Estos últimos consejos son perfectos para adentrarnos al siguiente práctica, pero tendrás que consultar la segunda parte para seguir descubriendo como volverte un experto y tener éxito en el desarrollo de aplicaciones web.

 


 

cta-apps