8 Herramientas clave de diseño para maximizar el tráfico en su sitio web |

Según un estudio del Banco Mundial, aproximadamente el 75 por ciento de las personas en todo el mundo tiene acceso a dispositivos móviles. CNET informa que las suscripciones a servicios de comunicación móvil crecieron de 1 mil millones en 2000 a más de 6 mil millones en 2012. Debido a la rápida expansión del uso del teléfono celular, ahora es más importante que nunca que los sitios web funcionen en múltiples plataformas. Utilice estas ocho herramientas para mejorar su diseño web receptivo y maximizar el número de personas que pueden ver y hacer clic en sus sitios.

8. Adobe Edge Inspect

Actualizado y lanzado en 2013 con una nueva marca vinculada a Creative Cloud, Adobe Edge Inspect le permite obtener una vista previa de sus diseños web para ver cómo se verán en diferentes plataformas. La atracción principal de Edge es su capacidad de ahorrarle tiempo al ver los cambios en las plataformas en tiempo real.

Esta herramienta permite sincronizar su computadora y sus dispositivos móviles. Al hacer esto, puede navegar e inspeccionar el diseño web en múltiples plataformas a la vez. Además, a medida que realiza cambios en el diseño web y lo depura, su trabajo aparece inmediatamente en su dispositivo, siempre y cuando esté trabajando con codificación Java, CSS y HTML.

7. Skeleton

Este conjunto de archivos CSS de la empresa permite un desarrollo de sitios web sin fisuras que se ve elegante ya sea que se muestre en un monitor de escritorio o en una pequeña pantalla brillante en su mano. Considerado un modelo repetitivo fácil de usar para un diseño web receptivo, Skeleton se llama acertadamente porque crea un marco que se expande y contrae de acuerdo con el tamaño del dispositivo del usuario. Si bien contiene elementos de diseño básicos, es lo suficientemente flexible como para permitir a los diseñadores incorporar estilos más sofisticados.

6. Receptivo Wireframe

Facturado como una herramienta experimental que utiliza técnicas de diseño web receptivas, Receptivo Wireframe utiliza HTML / CSS para proporcionar una cuadrícula de superposición que le permite ver las vistas de escritorio y móvil de su diseño. La idea con esta herramienta es facilitar el diseño dentro del navegador. Mientras que algunos diseñadores pueden argumentar que estos wireframes aplasten la creatividad, otros dicen que es una manera rápida y sencilla de crear diseños que funcionen en todas las plataformas. El uso de esta herramienta le ahorra tiempo mientras prueba diseños utilizando los wireframes receptivos para ver cómo se verán en computadoras portátiles, computadoras de escritorio y móviles.

5. Style Tiles

Más que una tabla de estado de ánimo, más estática que una maqueta real, Style Tiles permite a los diseñadores mostrarles a los clientes diferentes diseños de sitios web. Al presentar los mosaicos, los diseñadores evitan tener que realizar múltiples versiones finales.

Estos mosaicos en cascada exhiben diseños sin ajustarlos a ningún dispositivo, lo que los convierte en una forma sencilla de crear diseños y compartirlos con los clientes antes de tener en cuenta las muchas consideraciones asociadas con diseño receptivo. En otras palabras, este enfoque ofrece a los diseñadores libertad de restricciones dimensionales. Un producto hermano de Style Tiles, "Guía de estilo de componentes", ofrece consejos para tomar su diseño y hacerlo funcionar en plataformas como el iPhone y el nuevo teléfono inteligente Blackberry 10.

4. La calculadora receptiva

Utilizando porcentajes, esta calculadora le brinda los datos que necesita para transformar un diseño de PSD en un elemento para su proyecto web receptivo. Ingresa seis campos y luego hace clic en "Enviar consulta". Opte por bordes, márgenes y relleno en su PSD con esta calculadora.

3. Wookmark

Este es un complemento de jQuery que toma los componentes de una página web y los coloca en columnas. El diseño de la columna se basa en el tamaño de la ventana del navegador. Esta práctica herramienta es una excelente manera de hacer que un sitio responda a varios tamaños de pantalla.

2. ProtoFluid

Al tener una ventaja porque está basado en la web, esta herramienta hace que sea fácil ver maquetas de su diseño con diferentes resoluciones y dimensiones. Disfruta de usar Firebug mientras revisas tus problemas de HTML, CSS, JS y otros elementos. Los métodos abreviados de teclado, un cambio rápido entre diferentes vistas y el código limpio garantizan la velocidad a medida que utiliza esta herramienta para probar el aspecto de su diseño en diferentes tamaños de pantalla, incluidos Nexus, iPhone y iPad.

1. Foundation

Este framework front-end ofrece la opción de codificar de manera más inteligente y rápida. Entre sus características, esta herramienta te permite comenzar diseñando para pantallas pequeñas. A medida que trabajas para construir tu diseño para pantallas más grandes, Foundation te ayuda a intensificar los elementos de diseño. Además, esta herramienta te ofrece plantillas HTML geniales que te dan un salto en el diseño del sitio.

Aprovecha la flexibilidad de la grilla de esta herramienta, los diseños receptivos y la producción rápida de prototipos. La eficacia y credibilidad de Foundation se hace evidente en la lista de sitios que la utilizan, que incluye National Geographic, Pixar y Los Alamos National Laboratories.

A medida que busca maximizar su diseño web receptivo, ¿cuáles son los mayores desafíos que enfrenta? ¿Qué herramientas le han sido más útiles?

[Imágenes por]