Diseña sitios full responsive con Edge Reflow

La empresa Adobe realmente quiere mostrarnos su interés y compromiso por apoyar el HTML5, CSS3 y el diseño responsive. Por esto creó Adobe Edge & Tools, un set de herramientas de uso gratuito.

El miembro más reciente de esta familia es Edge Reflow, una aplicación pensada para facilitar el desarrollo del diseño responsivo. El sistema se basa en los conceptos visuales de un sitio web y no en el código, ya que la idea no es convertirse en la herramienta central de diseño y desarrollo, sino más bien en un lugar para poner a prueba la adaptabilidad del sitio antes de pasar a un programa enfocado en el código. Su mayor aporte es que captura todos los detalles entre las distintas versiones de un sitio, facilitando su análisis y presentación.

Edge reflow se instaurará probablemente como el sucesor de Fireworks, ya que la empresa anunció recientemente que no continuará con las actualizaciones de esta herramienta en favor de la evolución de esta nueva colección.

¿Cuáles son sus funciones?

El programa tiene apenas un año de vida, por lo que aún se siguen introduciendo mejoras basadas en las sugerencias de los usuarios. Por ejemplo, la última actualización agregó nuevos elementos al panel, una función para crear páginas, más opciones de tipografías y la posibilidad de exportar el código y conectarlo directamente con Adobe Photoshop para pasar de un diseño estático a uno interactivo.

Algunas de las funciones más destacadas que puedes llevar a cabo con esta herramienta son:

• Encontrar puntos de quiebre de tu diseño y corregirlos para que se visualicen correctamente en cualquier pantalla.
• Visualizar puntos de interrupción con media query.
• Revisar los diseños directamente en el navegador.
• Importar recursos de Photoshop.
• Utilizar las tipografías de Typekit y Edge Web Fonts.
• Apoyar tu trabajo con el sistema de cuadrículas fluidas integrado.
• Agregar estados de estilo como “hover” o “active” a cualquier objeto del diseño.
• Exportar archivos de CSS y HTML para usarlos en el editor de código.

¿Qué ventajas y desventajas percibimos?

Como en todos los programas nuevos, existen aspectos positivos y negativos relacionados a sus funcionalidades y potencialidades. Si bien sabemos que esta herramienta está aún en evolución, en nuestra evaluación inicial identificamos las siguientes ventajas y desventajas.

Ventajas

• Está muy bien integrada con otras aplicaciones, especialmente con Photoshop.
• Permite visualizar fácilmente vistas previas del diseño y el código en iOS y Android.
• La integración con Typekit y Edge Web Fonts ofrece una gran cantidad de tipografías de uso libre.
• Su funcionamiento y lógica es muy similar a Photoshop e InDesign, por lo que su aprendizaje es rápido.
• Permite trabajar con varias cuadrículas para distinguir visualmente cada breakpoint de diseño adaptable.
• Está pensado para diseñar pensando primero en móviles.

Desventajas

• El código que genera no es de calidad suficiente para la producción, es solo para mostrar la previsualización en el navegador.
• No permite exportar o publicar el trabajo directamente desde la herramienta.
• No se puede integrar a un CMS, hay que copiar el código y hacerlo fuera de la aplicación.
• Como está pensado solo para trabajar visualmente, si quieres agregar cosas como un jQuery slideshow, un video o tu propio HTML, tendrás que editar el código en otra aplicación.
• Las vistas previas en navegador se pueden usar solo en Chrome.
• No es posible usar las aplicaciones por separado, hay que instalar todo el Creative Cloud.

Puedes descargar este programa directamente desde el sitio de Adobe. Si tienes problemas para empezar a usarlo, revisa este tutorial en video: