Un complemento JQuery para el uso óptimo del espacio de pantalla
Optimizar el uso del espacio en una pantalla es un componente clave del buen diseño web, y especialmente del diseño receptivo.
Hay varias maneras de abordar este tipo de desafíos, y uno de los más populares es la disposición automática de elementos dentro de un contenedor primario. Es eficiente y, cuando está bien ejecutada, crea un diseño visualmente atractivo y funcionalmente óptimo.
Si está diseñando un sitio receptivo, casi seguramente encontrará la necesidad de reorganizar el contenido de una manera dinámica, en función del tamaño de la pantalla del dispositivo del usuario. La organización automática del contenido tiene sentido, ya que minimiza el tiempo dedicado a personalizar los puntos de interrupción para cada página y cada elemento.
Los sitios con contenido en constante cambio (como blogs o tiendas en línea) pueden beneficiarse especialmente del arreglo automático. Después de todo, ¿realmente desea tener que entrar en el código del sitio de su cliente y ajustar los puntos de ruptura y el diseño si de repente deciden comenzar a escribir publicaciones de blog más largas o más cortas?
Hacer todo esto desde cero requiere mucho tiempo y va más allá de las habilidades de la mayoría de los diseñadores que no son también desarrolladores. En cambio, tiene sentido usar un plugin o marco preexistente.
JavaScript (incluyendo jQuery y otras bibliotecas) es la forma más común de crear este tipo de diseño, muy probablemente debido a su amplia compatibilidad cruzada. Así es como funcionan los esfuerzos existentes como vGrid, Wookmark y Masonry.
Freetile.js es un plugin de jQuery reciente que permite este tipo de diseño dinámico, organizado y receptivo. Ha sido utilizado como el motor detrás de Assemblage y Assemblage Plus durante casi dos años, y ahora finalmente está disponible como un proyecto de código abierto independiente.
Es diferente de los esfuerzos existentes en este espacio por algunas razones. Permite usar cualquier tamaño de tamaño sin la necesidad de una grilla de columna de tamaño fijo. Esto le libera de tener que especificar un ancho de columna apropiado para sus elementos. Y puede personalizar el algoritmo que evalúa las posibles posiciones de inserción para cada elemento, lo que le permite expresar preferencias como la alineación y la proximidad.
Tiene una rutina de animación inteligente que hace que sea fácil distinguir entre qué elementos deben estar animados y cuáles no. Especificar la animación dentro del código también es fácil.
El uso de Freetile.js es simple de usar. Incluso si no dominas JavaScript, deberías poder descifrar su uso bastante rápido.
Freetile.js está licenciado bajo la Licencia BSD, y está disponible a través de GitHub.
¿Has usado Freetile.js? ¿Qué construiste? Comparte tus experiencias en los comentarios.