miércoles, 19 de agosto de 2015

Trabajando con Icon Fonts

Ya no existen Aplicaciones o Sitios Web profesionales que no posean un set de íconos que acompañen a las acciones más comunes o trascendentes dentro de los mismos. Son la mejor forma de sintetizar lo que se espera de una interacción determinada por parte de un usuario en nuestra aplicación, además de servir para embellecer el diseño propuesto. Por último, y no menos importante, ayudan (y mucho) a mejorar la usabilidad de nuestros entornos, utilizando representaciones gráficas ya globalmente estandarizadas que hacen a nuestras aplicaciones más intuitivas y fáciles de aprender. Todo esto hace que trabajar con íconos sea hoy en día imprescindible.

Cuando únicamente se dispone de “mapas de bits” para llevar estos íconos a la pantalla del usuario, -y sugiriendo que no se pretende tener más de una imagen y programar una lógica que elija cuál mostrar-, sucede que, a la hora de diseñar aplicaciones responsive, empiezan a aparecer las dudas acerca de cuál es el tamaño óptimo de esa imagen para todas las resoluciones a las que está dirigido el diseño. De ello resulta que para resoluciones superiores necesito una imagen de mayor tamaño, que consecuentemente va a pesar más, que no es óptima para un dispositivo móvil; a su vez, este dispositivo móvil no necesita una imagen tan grande, y puede que necesite conectarse a conexiones más lentas en las que el peso total de la aplicación incide sobre el rendimiento. Sucede lo mismo a la inversa: una imagen óptima para un dispositivo móvil, pierde definición en un monitor de escritorio, por poner un ejemplo. Y esto solamente sin sumar cómo se renderizan algunas imágenes en pantallas de distinta densidad de píxeles, o con píxeles que no son cuadrados u otros detalles derivados del “Pixel Ratio”, etc.
Por ende, la mejor opción para resolver buena parte de la base del diseño de nuestra aplicación, es llevar nuestros iconos embebidos en Icon Fonts, lo que nos garantiza compatibilidad con la mayoría de los dispositivos móviles y navegadores de escritorio. Los Icon Fonts son básicamente fuentes de texto como los Arial, Times New Roman, etc. Sólo que en lugar de letras se trata de símbolos. Esto conlleva una serie de ventajas:
Los Icon fonts son bastante más livianos que los iconos generados como imágenes.
Como son fuentes de texto se pueden manipular de la misma manera que a un texto con CSS. Con un color: #00F; consigues un icono azul. Con font-size:2em; tienes un icono responsive y controlas su tamaño, etc etc. Esta es probablemente su mejor característica.
No importa el tamaño; nunca se pixela.
Pero mejor que hablar de sus prestaciones, es mostrarlas:
Cómo construir mi propio Icon Font
Para ello, usaremos algún sistema online como IcoMoon o IconVault, que nos permite subir los archivos con nuestros íconos y el sistema se encarga de devolver el paquete que contiene los archivos con las fuentes tipográficas y la hoja de estilos que las instancia. En nuestro caso usaremos IconVault. Para esto tendremos que trabajar nuestros diseños con un programa de diseño vectorial como por ejemplo Adobe Illustrator o Corel Draw, y utilizar una plantilla (que podés descargar acá) para exportar cada icono por separado a archivos SVG.
Una vez que tenemos todos nuestros SVGs, los comprimimos en un archivo ZIP y lo subimos a IconVau.lt/app. Luego de finalizar el proceso, podremos descargar nuestra tipografía terminada en un archivo comprimido que contiene todos los archivos tipográficos en los diferentes formatos compatibles (TTF, EOT, SVG y WOFF), una hoja de estilos ejemplo en CSS que muestra cómo instanciar nuestros IconFonts y un index.html para ver los resultados y probarlos.
¡Y listo! Ya tenemos nuestros IconFonts listos para nuestra aplicación. Los animo a probar sus fuentes en sus diseños responsive con unidades relativas al “view port” (como por ejemplo “vw” y “vh”) y ver cómo se adaptan los tamaños de los iconos a las diferentes resoluciones.

No hay comentarios :

Publicar un comentario