Herramientas para el Diseño Adaptativo (Responsive Design)

He aqui un post traducido de la web econsultancy.com  post traducido de la web econsultancy.com donde podemos ver una lista de herramientas para los que se quieran introducir en el interesante mundo del Diseño Adaptativo (Responsive Design):

1. Patrones de diseño de múltiples dispositivos
Lucas Wrobleski presenta varios enfoques diferentes para diseño de página. Merece la pena leer si el diseño adaptativo (Responsive Design) es un concepto nuevo para usted, o si está a punto de embarcarse en su primer proyecto adaptativo.


2. Wireframing de diseño de respuesta
Leigh Howells en Boagworld ofrece una gran introducción a diseño adaptativo, y concluye que:

En una página móvil en realidad sólo hay dos zonas calientes, el encabezado y el pie de página, los cuales tendrán que llevar a opciones de navegación importantes para nuestro sitio. Todo en el medio es bastante ponderada por igual.

Nota: Un wireframe para un sitio web, también conocido como un esquema de página o plano de pantalla, es una guía visual que representa el esqueleto o estructura visual de un sitio web.1 El wireframe esquematiza el diseño de página u ordenamiento del contenido del sitio web, incluyendo elementos de la interfaz y sistemas de navegación, y cómo funcionan en conjunto.2 Usualmente, este esquema carece de estilo tipográfico, color o aplicaciones gráficas, ya que su principal objetivo reside en la funcionalidad, comportamiento y jerarquía de contenidos.3 En otras palabras, se enfoca en “qué hace la pantalla, no cómo se ve.”4 Los esquemas pueden ser dibujados con lápiz y papel o esquemas en una pizarra, o pueden ser producidos con medios de diseño de aplicaciones de software libre o comerciales.

Enlaces relacionados:
10 herramientas gratis para Wireframing y Mockup (http://almacenplantillasweb.es/2011/03/10-herramientas-gratis-para-wireframing-y-mockup/)

Wireframing Y Prototipos Para Websites: Mejores Herramientas Para Diseñar Tu Sitio Web (http://es.masternewmedia.org/2010/06/12/wireframing_y_prototipos_para_websites_mejores_herramientas.htm)

3. Patrones de navegación más complejas para el diseño adaptativo
¿De verdad crees que esos mega menús desplegables van a funcionar en un dispositivo móvil? Aquí hay un montón de métodos de diseño de navegación adaptativo para diferentes tamaños de pantalla.

4. Adaptativo es una característica en lo que Stephanie Rieger sugiere que "móvil es una oportunidad para reiniciar", algo de lo que esta totalmente de acuerdo la autora del post.

El desarrollo de un sitio independiente (pero adaptativo), ofrece una oportunidad ideal para el aprendizaje y la experimentación. Le permite volver a centrar su contenido, aligerar y simplificar su experiencia y ofrecer un valor real de los usuarios, sin la carga (a menudo muy real) de la re-estructuración de su sitio web pre-existente (heredado) entero.

5. Adaptación Responsive
Esto "trata de encontrar una manera de utilizar las técnicas adaptativas en los sitios existentes para crear una mejor experiencia para más usuarios". Ben Callahan explica que no es necesario volver a empezar, y te muestra que un poco de CSS puede hacer mucho.

Las Herramientas

6. Wirefy
Se trata de un marco wireframing adatativo que le permite jugar con los diseños de página en el navegador.

7. Rubber Cheese
Una plantilla wireframing de Rubber Cheese, que atiende a los tres tamaños de pantalla diferentes: 978px, 768px y 320px. Este es un archivo vectorial libre, para los amantes de Adobe Illustrator.

8. UXPin
Una herramienta de diseño en línea de colaboración por el precio de 12$/mes. Parece prometedor para los equipos remotos / distribuidos.

9. Plantillas de Chris Bannister para Photoshop
Proporciona plantillas para las pantallas de escritorio, tableta y móvil.

10. Gridset
Esta aplicación de Mark Boulton le permite crear redes complejas con puntos de interrupción para adaptarse al diseño de las diferentes pantallas. Cuesta 18$ / 12 £ al mes.

11. Jetstrap
Estoy muy interesado en probar esta herramienta wireframing adaptativo basada en la web para Twitter Bootstrap. Un proyecto / tres pantallas es gratis, de lo contrario tiene un precio de 8$ al mes.

12. This Man’s Life’s content repositioning tool
Esta herramienta interactiva le permite cambiar entre vistas de escritorio y móviles, para ver cómo se pueden recolocar los elementos de contenido de acuerdo al tamaño de la pantalla. Objetivo de la parte superior derecha de la página para cambiar las cosas.

13. RWD Wireframes
Aquí hay otra herramienta en línea para encontrar la manera de colocar su contenido en diferentes dispositivos.


LA VIEJA ESCUELA

14. El Sketchbook Responsive Design
Aquí está un bloc de notas creado específicamente con los diseñadores adaptativos en la mente.

15. Printable
Echa un vistazo a estas maravillosas plantillas de celdas wireframing descargar&imprimir. Dispone de  varios tamaños, los cuales son fantásticos para aquellos que les guste dibujar ...


INSPIRACION

16. Media Queries
Vea como otros sitios están ganando el juego adaptativo.

TEST
17. Resize my browser
Una herramienta que le permite probar sus páginas web para ver cómo se ven en diferentes tamaños de pantalla.

18. Design Modo's test
Excelente para ver cómo sus páginas web hacen en todo tipo de dispositivos. Sólo tienes que añadir la URL a continuación, elegir entre docenas de dispositivos en el menu situado a arriba a la derecha.